Configure image formats ======================= Sulu supports to configure image formats for images that are uploaded via the administration interface. This allows to optimize the performance of your website by outputting images in the exact dimensions that are needed. Furthermore, the content manager can select the cutout that should be used when outputting a specific image format for an uploaded image. To save space on your server, image formats for uploaded images are generated when they are requested the first time. Image formats can be defined in: - `config/image-formats.xml` Or when you use the SuluThemeBundle you can define the formats in your theme folder: - `path/to//config/image-formats.xml` The following example shows you different ways to define image formats: .. code-block:: xml Defining meta title ------------------- You should define a meta title for every image format, since these titles are shown to the content manager in the administration interface when cropping the images. .. code-block:: xml Author Avatar Autor Avatar Header Header Using image formats in your Twig template ----------------------------------------- The URLs for accessing specific image formats are passed to you twig template inside of the ``thumbnails`` property: .. code-block:: twig
{{ image.title }}
Per default, image formats will be outputted in the file format of the original file. You can also use a specific file format (eg. ``png`` or ``webp``) by adding the extension to the format key: .. code-block:: twig
{{ image.title }}
Image Compression ----------------- Global image compression ^^^^^^^^^^^^^^^^^^^^^^^^ Images will not get compressed by default when you upload them. You can set the compression for images globally e.g. in the `config/packages/sulu_media.yml`. This file does not exist by default and must be created on your own. .. code-block:: yaml sulu_media: format_manager: default_imagine_options: jpeg_quality: 80 webp_quality: 80 png_compression_level: 6 Its recommended to have `jpeg_quality` between 70-90 as this is the best compromise between quality and image size. Specific image compression ^^^^^^^^^^^^^^^^^^^^^^^^^^ A image compression can also be set on a specific image format the following way: .. code-block:: xml Transformations --------------- There are several transformations available in sulu to add some effects to your images: Blur ^^^^ Will blur the image by a given `sigma` parameter: .. code-block:: xml blur 6 Grayscale ^^^^^^^^^ Will convert the image into a black/white image: .. code-block:: xml grayscale Gamma ^^^^^ Will add a gamma effect by a given `correction` parameter: .. code-block:: xml gamma 0.7 Sharpen ^^^^^^^ Will add a sharpen effect: .. code-block:: xml sharpen Paste ^^^^^ The paste transformation effect will add another image on top on the rendered image. This can be used to add a border or a copyright to the image. .. code-block:: xml paste @AppBundle/Resources/public/border.png The given image can be positioned by adding `x`, `y`, `w` `h` parameter: .. code-block:: xml paste @AppBundle/Resources/public/border.png 0 0 300 300 Combining Transformations ^^^^^^^^^^^^^^^^^^^^^^^^^ Transformation effect can also be combined the following way: .. code-block:: xml blur 6 grayscale Editing existing image formats ------------------------------ If you edit exist image formats you need to run the following command to regenerate exist images: If you modify an existing image format configuration, you need to regenerate already generated images by executing the following command: .. code-block:: bash php bin/websiteconsole sulu:media:regenerate-formats Alternatively, you can also remove all generated image formats by executing: .. code-block:: bash php bin/websiteconsole sulu:media:format:cache:clear In this case, image formats will be regenerated using the new configuration on the first request of the image format. Remove obsolete images ---------------------- In a multi server setup, when an image is removed via the administration interface, existing image formats are only removed on the current server. Generated image formats of media that do not exist in the database can be removed by running the following command: .. code-block:: bash php bin/websiteconsole sulu:media:format:cache:cleanup