Images are an integral part of any website. They can serve as decoration and convey information.
In Ibexa DXP, you can reuse them, normalize their file names, generate different size variations, resize images programmatically, or even define placeholders for missing ones.
Images from DAM systems¶
If your installation is connected to a DAM system, you can use images directly from a DAM system in your content.
Specific DAM configuration depends on the system that the installation uses.
For an ImageAsset field to be reused, you must publish it. Only then is notification triggered, which states that an image has been published under the Location and can now be reused. After you establish a media library, you can create Relations between the image Content item and the main Content item that uses it.
Normalizing image file names¶
If you use image files with unprintable UTF-8 characters in file names, you may come across a problem with images not displaying. Run the following command to normalize image file names:
Next, clear the cache:
and run the following:
Configuring image variations¶
With image variations (image aliases) you can define and use different versions of the same image. You generate variations based on filters that modify aspects such as size and proportions, quality or effects.
Image variations are generated with LiipImagineBundle, by using the underlying
Imagine library from avalanche123.
The LiipImagineBundle bundle supports GD (default), Imagick or Gmagick PHP
extensions, and enables you to define flexible filters in PHP.
Image files are stored by using the
IOService, and are completely independent
from the Image Field Type.
They are generated only once and cleared on demand, for example, on content removal).
LiipImagineBundle only works on image blobs, so no command line tool is needed. For more information, see the bundle's documentation.
Code injection in image EXIF
Image URL resolution¶
You can use LiipImagine's
liip:imagine:cache:resolve command to resolve the path
to image variations that are generated from the original image, with one or more
paths as arguments.
Paths to repository images must be relative to the
directory, for example:
For more information, see LiipImagineBundle documentation.
You can resize all original images of a chosen Content Type with the following command.
You must provide the command with:
- identifier of the image Content Type
- identifier of the Field that you want to affect
- name of the image variation to apply to the images
You can also pass two additional parameters:
iteration-countis the number of images to be recreated in a single iteration, to reduce memory use. The default value is
useris the identifier of a User with proper permission who will perform the operation (
publish). The default value is
resize-original command publishes a new version of each Content item it modifies.
Generating placeholder images¶
With a placeholder generator you can download or generate placeholder images for any missing image. It proves useful when you are working on an existing database and are unable to download uploaded images to your local development environment, due to, for example, a large size of files.
If the original image cannot be resolved, the
method generates a placeholder by delegating it to the implementation of the
PlaceholderProvider interface, and saves it under the original path.
In Ibexa DXP, there are two implementations of the
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|fontpath||n/a||Path to the font file (*.ttf).||Yes|
|text||"IMAGE PLACEHOLDER %width%x%height%\n(%id%)"||Text which will be displayed in the image placeholder. %width%, %height%, %id% in it will be replaced with width, height and ID of the original image.|
|fontsize||20||Size of the font in the image placeholder.|
|foreground||#000000||Foreground color of the placeholder.|
|secondary||#CCCCCC||Secondary color of the placeholder.|
|background||#EEEEEE||Background color of the placeholder.|
RemoteProvider you can download
- remote sources, for example, http://placekitten.com (see example 2)
- live version of a site (see example 3)
|url_pattern||''||URL pattern. %width%, %height%, %id% in it will be replaced with width, height and ID of the original image.|
|timeout||5||Period of time before timeout, measured in seconds.|
Placeholder generation can be configured for each
binary_handler under the
1 2 3 4 5 6
If there is no configuration assigned to the
binary_handler, the placeholder
generation is disabled.
Example 1 - placeholders with basic information about original image
1 2 3 4 5 6 7 8 9
Example 2 - placeholders from remote source
1 2 3 4 5 6
Example 3 - placeholders from live version of a site
1 2 3 4 5 6
Support for SVG images¶
You cannot store SVG images in Ibexa DXP by using the Image or ImageAsset Field Type. However, you can work things around by relying on the File Field Type and implementing a custom extension that lets you display and download files in your templates.
First, enable adding SVG files to content by removing them from the blacklist of allowed MIME types.
To do it, comment out the relevant line under
Then, add a download route to the
1 2 3
It points to a custom controller that handles the downloading of the SVG file.
The controller's definition (that you place in the
config/services.yaml file under
services key) and implementation are as follows:
1 2 3 4 5 6 7 8
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
To be able to use a proper link in your templates, you also need a dedicated Twig extension:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
Now you can load SVG files in your templates by using generated links and a newly created Twig helper:
1 2 3
JPEG images are optimized using the ImageMagic library, which is available out of the box.
If you use other formats, such a PNG, SVG, GIF or WEBP, and you use the Image Editor, to prevent images increasing in size when you modify them in the editor, you need to install additional image handling libraries.
|PNG||Either Optipng or Pngquant 2|
Install these libraries using your package manager, for example:
Embedding images in Rich Text¶
The RichText field allows you to embed other Content items within the field.
Content items that are identified as images are rendered in the Rich Text Field by using a dedicated template.
You can determine Content Types that will be treated as images and rendered.
You do this in
By default, the
parameter is set to cover the Image Content Type, but you can add other types
that you want to be treated as images, for example:
You can set the template that is used when rendering embedded images in the
ibexa.default_view_templates.content.embed_image container parameter: