Picture

The Image Variants module allows you to lay out multiple versions of an image adapted for different screen sizes or light/dark themes. In the module, an image source is linked to a specific breakpoint or theme. This way, you can add multiple versions of an image and adapt the size and cropping to small/large screens or light/dark screens.

Criteria for selecting the image source

Here you choose whether this module should adapt images for breakpoints or light/dark color theme.

Screen width (breakpoints)

The breakpoints available to choose from are the breakpoints set up for the website.

User preference for light or dark color theme

Select this if you want image variants for both light and dark themes.

Image sources (for breakpoints)

Base image

Here you upload the image you have as your base image.

Image for breakpoint

Upload your alternative images and link them to the breakpoints that are set up (they are shown in the list). If you want to add more, select the breakpoint and press "Add".

Image sources (for light/dark theme)

If you have selected the light/dark theme image variants, you will get different settings under image sources:

Basic image and image for light color theme

Here you designate the image to be used in the light theme.

Image for dark color theme

Here you designate the image to be used in the dark theme.

Alternative text (alt text)

Here you set the alt text for the image. Either get it from the image description on the base image, enter your own or skip the caption.

Image text

Here you can give your image a text. The text appears below the image.

Image interaction on click

What should happen when you click on the image? Choose to do nothing or to link the image to a page.

What image formats are supported?

The module supports:

• gif
• jpg/jpeg
• png
  
• svg
• webp