Image Field Type
Renders an Image Selector component inside the block.
The type we would use inside the schema’s field_meta property to render this field is “image”: "type": "image"
If you haven’t already, we suggest you read the “model.json file” and “Field Types” pages before continuing.
Minimum Schema needed to create the field
"bg_img": {
"type": "object",
"field_meta": {
"type": "image",
"label": "Background Image"
},
"default": {
"src": "",
"id": null
}
}This snippet of code will generate an Image Selector. The field name will be “bg_img”, its label will be “Background Image” and by default, it won’t have a selected image.
What it would look like inside the block in the editor.
Rendering field’s data on the front-end:
We would use the "src" property that’s present inside the “default” object, and additionally, "alt", that will be added automatically.
In latte, it would look something like this.
<img
src="{$bg_img['src']}"
alt="{$bg_img['alt']}"
/>We have a helper function that we can use to render images and SVGs in an easier and more standardized way.
In this case, we would use it like this:
{tr_get_media($bg_img)}Check out the tr_get_media page to learn more about this helper function.
Additional / Optional field_meta properties
Besides the field_meta properties we saw above, Image Field Type has a few more additional and optional field_meta properties.
include_subtypesizeallowedTypeshelp– written about on the Field Types pagecol– written about on the model.json page
include_subtype property
If present, this property should have a value of true. Besides the "src", and "alt" that we get on the front-end, we will now also get the "subtype" property, which will show us the type of the uploaded image.
"bg_img": {
"type": "object",
"field_meta": {
"type": "image",
"label": "Background Image",
"include_subtype": true
},
"default": {
"src": "",
"id": null
}
}
We could use this data to conditionally render something, for example.
size property
In case we have defined custom sizes for cropping the images that we upload, we can use this field to get the desired size. By default, this field will save and return the path to the originally uploaded image.
Let’s say we have defined a custom size by the name of “thumbnail”, which crops the image to 150px x 150px.
We can get that size like this:
"bg_img": {
"type": "object",
"field_meta": {
"type": "image",
"label": "Background Image",
"size": "thumbnail"
},
"default": {
"src": "",
"id": null
}
}
allowedTypes property
By default (if we don’t define this property), we would be able to select images in any format (png, jpeg, gif, SVG, etc…).
By using it, we can limit the formats that could be used. It accepts an array of the mime types, and it could look something like this.
"bg_img": {
"type": "object",
"field_meta": {
"type": "image",
"label": "Background Image",
"allowedTypes": ["image/svg+xml", "image/gif"]
},
"default": {
"src": "",
"id": null
}
}We can see the list of all the mime types on this MDN’s page, but here’s a short list of the ones that we would usually need as a reference.
”image/jpeg””image/png””image/gif””image/webp””image/svg+xml”