To render images contained in Image Asset or Image Fields, use the
ibexa_render_field() Twig function.
You can pass the name of an image variation as an argument, for example:
1 2 3 4 5
Render first image¶
If a Content item contains more than one image, you may want to select the first filled image to render.
This enables you to avoid a situation where, for example, the featured image in an article is missing, because the first image Field was left empty.
ibexa_content_field_identifier_first_filled_image() Twig function
returns the identifier of the first image Field that is not empty.
1 2 3
Configure image variation¶
The same image can have multiple variations differing in things such as scale, cropping, or applied filters.
You can use the built-in image variations or configure your own.
The following example creates a custom variation that scales the image down to a 200 x 200 thumbnail and renders it in grayscale:
1 2 3 4 5 6 7 8 9
To use it, select the variation when rendering the image:
1 2 3 4 5
Use focal point¶
In the image editor you can define a focal point for an image. The focal point does not have an instant effect when you use the default templates. However, you can use it to select the part of the image the view focuses on when the image is cropped.
The following example shows how to use an image contained in an Image Field as a focussed background.
First, in the main template, render the Image Field with a custom template:
1 2 3
Then, create the custom Field template in
overriding the default
ezimage_field template block:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
This template uses the focal point information contained in the image's additional data to position the background so that the focussed part of the image is displayed.