Picture

The picture module is used to render a single picture on the page.

Configuration parameters

image

object An object containing following image properties:

• width float type, represents the width of the image
• height float type, represents the height of the image
• file_name string type, represents the name of the image file
• uploaded_file string type, represents the name of the uploaded image file

alt

string (optional) A string containing the value of an alt attribute read by the screen readers.

link

string (optional) If configured, clicking on the picture will result in opening this link

allowImageAsLink

int (optional) if set to 1 it will be allowed to render image as link

shouldOpenLinkInNewTab

int (optional) if set to 1 a configured link will be set to open in a new tab.

borderRadius

float A numeric representation of a border-radius property value of the picture.

classNames

string A list of additional classes that will be added to the <img> element. For example "class-1 class-2".

Module source code

{% from '@macros/image.twig' import image %}

{% set webpImages = { src: [] } %}
{% set nonWebpImages = { src: [] } %}

{% for pathName, pathUrl in moduleConfig.image.paths %}
    {% set size2x = '2x' in pathName ? '2x' : '' %}
    {% set size15x = '1.5x' in pathName ? '1.5x' : '' %}

    {% if 'webp' in pathName %}
        {%
            set webpImages = {
                src: webpImages.src|merge([{
                    path: pathUrl,
                    size: size2x ?: size15x ?: '1x'
                }]),
            }
        %}
    {% else %}
        {%
            set nonWebpImages = {
                src: nonWebpImages.src|merge([{
                    path: pathUrl,
                    size: size2x ?: size15x ?: '1x'
                }]),
            }
        %}
    {% endif %}
{% endfor %}

{% set borderRadius = "border-radius: #{moduleConfig.borderRadius / 2}%;" %}

{%
    set images = [
        webpImages|merge({ type: 'image/webp' }),
        nonWebpImages|merge({ type: "image/#{moduleConfig.image.format}" })
    ]
%}

{% set class = moduleConfig.classNames|join(' ') ~ ' picture__image' %}

{% if moduleConfig.link %}
<figure class="picture">
    <a
        href="{{ moduleConfig.link }}"
        {% if not moduleConfig.shouldOpenLinkInTheSameTab %}
            target="_blank"
            rel="noopener nofollow"
        {% endif %}
    >
{% endif %}

        {{
            image(
                {
                    img: {
                        width: moduleConfig.image.width,
                        height: moduleConfig.image.height,
                        src: moduleConfig.image.paths.original,
                        id: "picture-#{moduleConfig.image.id}",
                        alt: moduleConfig.alt,
                        style: borderRadius,
                        class: class,
                        decoding: 'async',
                        lazy: true
                    }
                },
                images
            )
        }}

{% if moduleConfig.link %}
    </a>
</figure>
{% endif %}

Macros reference

• image

Module configuration schema

[
  {
    "state": "unfolded",
    "label": "General settings",
    "elements": [
      {
        "type": "imageUpload",
        "name": "image",
        "label": "Image <<SVE>>",
        "isRequired": true,
        "supportsTranslations": true,
        "hint": "The file name is important for SEO and should describe the content of the image. Use dashes to separate words.",
        "options": {
          "requireImageSize" : true,
          "allowedExtensions": [
            "webp",
            "svg",
            "jpg",
            "png",
            "gif",
            "jpeg"
          ]
        }
      },
      {
        "type": "text",
        "name": "alt",
        "label": "Alternative image description (\"alt\")",
        "supportsTranslations": true,
        "isRequired": false,
        "hint": "Alternative text (\"alt\" attribute) should contain a description of what the graphic presents. This description is read by software for the blind and analyzed when search engines index the page."
      },
      {
        "type": "checkbox",
        "name": "allowImageAsLink",
        "label": "Image as a link",
        "supportsTranslations": true,
        "defaultValue": 0,
        "children": [
          {
            "type": "text",
            "name": "link",
            "label": "Webpage URL",
            "supportsTranslations": true,
            "options": {
              "placeholder": "https:\/\/ or \/"
            },
            "validators": [{"type" : "url", "options": { "allowRelativePath": true }}],
            "relations": [
              {
                "parentName": "allowImageAsLink",
                "parentValueToActionsMap": [
                  {
                    "value": 0,
                    "actions": [
                      "setHiddenAndOptional",
                      "setDisabled"
                    ]
                  },
                  {
                    "value": 1,
                    "actions": [
                      "setVisibleAndRequired",
                      "setAvailable"
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "checkbox",
            "name": "shouldOpenLinkInTheSameTab",
            "label": "Open the link in the same tab",
            "supportsTranslations": true,
            "defaultValue": 1,
            "hint": "Opening links in the same tab makes navigation easier: using the \"back\" button is possible. The customer can decide to open the page in a new tab.",
            "relations": [
              {
                "parentName": "allowImageAsLink",
                "parentValueToActionsMap": [
                  {
                    "value": 0,
                    "actions": [
                      "setHidden",
                      "setDisabled"
                    ]
                  },
                  {
                    "value": 1,
                    "actions": [
                      "setVisible",
                      "setAvailable"
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "number",
        "name": "borderRadius",
        "label": "Round corners of the image",
        "labelDescription": "0% - rectangular, 100% - round image",
        "defaultValue": 0,
        "validators": [
          { "type": "int" },
          { "type": "lessEqThan", "options": { "max": 100} },
          { "type": "greaterEqThan", "options": { "min": 0} }
        ],
        "options": {
          "postfix": "%"
        }
      }
    ]
  },
  {
    "state": "unfolded",
    "label": "CSS",
    "elements": [
      {
        "type": "text",
        "name": "classNames",
        "label": "CSS class",
        "labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
      }
    ]
  }
]