You are browsing documentation for version 5.0 of OroCommerce, OroCRM, and OroPlatform, maintained until August 2024 and supported until March 2026. See version 5.1 (the latest LTS version) of the Oro documentation for information on latest features.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Displaying Pictures

Unified Way to Display a Picture

To control how pictures are displayed in storefront and back-office, OroAttachmentBundle provides a TWIG template @OroAttachment/Twig/picture.html.twig used to output a <picture> tag with image sources.

The following example shows the most general way to display a picture for the file stored in the sample_image variable using the login_page_logo filter:

{% include '@OroAttachment/Twig/picture.html.twig' with {
    {# File object representing an image that is needed to display #}
    file: sample_image,
    {# Filter to apply to image to get a resized version of it #}
    filter: 'login_page_logo'
} %}

In this case, picture sources (URLs) will be generated under the hood using the oro_filtered_picture_sources TWIG function.


By default, picture sources contain a URL to the resized image in the original image format and in WebP format. You can change this behavior using the oro_attachment.webp_strategy configuration.

If you want to have more control of what sources, <img> or <picture> attributes are used for the <picture> tag, you can specify them explicitly.

{% include '@OroAttachment/Twig/picture.html.twig' with {
    {# Sources collection to be used in <picture> tag. Beware that "file" and "filter" variables are ignored if "sources" is specified. #}
    {# Each source must have "srcset" attribute containing the URL to image. #}
    {# Any other attributes allowed for <source> tag a permitted as well, for example "type". #}
    sources: oro_filtered_picture_sources(sample_image, 'login_page_logo'),
    {# HTML attributes to add to <img> tag located inside of <picture> tag. #}
    img_attrs: {
        alt: 'Sample image alt',
    {# HTML attributes to add to <picture> tag. #}
    picture_attrs: {
        class: 'sample-class',
} %}


If you cannot use the TWIG template to render a picture (e.g., in JS), use the oro_filtered_picture_sources TWIG function to get picture sources and pass them wherever you need.