How to get a serie of images with the same dimension (Width and Height) ?

About

When rendering a serie of images, you may want them to have the same dimension (width and height) in order to get a consistent and peaceful visual.

To achieve it, you need to use the combine the ratio attribute with a dimension (width or height). It permits to get the same image aspect-ratio as well as the same dimension for all images.

This howto shows you how to do it:

with an image link
with a page image

Examples

Image Link

With an image link, you can use the ratio attribute inline.

{{:undraw_content_creator.svg?0x200&ratio=16:9|}}
{{:docs:block:stock_image_surfer_in_the_see.png?0x200&ratio=16:9|}}

where:

0x200 sets the width to 0 (auto) and the height to 200
ratio=16:9 sets the aspect-ratio to 16:9

Output:

Note that it works for svg as raster images

Page Image

The page image component is used in a fragment iteration to show an illustrative page of an image.

For instance, the page image has an intrinsic ratio of 16:9, we can change it to a ratio of 4:3 with the below markup and constraints the height

<iterator>
   <data>select where path like '%page-image' or path like '%howto'</data>
   <grid max-line=2>
   <fragment>
      <box> <!-- Split the horizontal space in boxes -->
        <box align="center text-center" width="200"> <!-- Create boxes of 200 in the split area and center them -->
          <heading 3>${name}</heading>
          <page-image ratio="4:3" height="200"/>
        </box>
      </box>
   </fragment>
   </grid>
</iterator>

Page Image

Howto