Media

Image paragraph

Image paragraph

What

An image or two images.

Where

This module can be used anywhere an image is needed to make an impact or to visualize text content.

Do

Use horizontal images only and choose the focal point in the CMS to be in the center. The CMS will crop optimal sizes accordingly for optimal responsive scaling. This guarantees that users with any device will understand the image.

Don’t

Add collages of images into a single image file. Use the module with two images instead. If you add a collage of images to a single image container, the collage will crop from sides, and the collage will not be visible on mobile.

Don’t write long text on the image caption field; use the ‘Media and text’ module instead. Image captions are a few lines of text used to explain and elaborate on published photographs.

Format
Always use .jpg image format for photographs because of better compression and smaller file size.

For cutout images (where the background has been cut off), illustrations, graphs and other graphics .png format is better due to better quality.

Image 1 (jpg, png)
Mandatory.

Image 2 (jpg, png)
Optional.

Alternative text
Mandatory.

Use ALT text that describes what is in the picture. ALT text is assigned once to an image (reused in all instances where the same image is used) and won’t display on the front end unless the image can’t be loaded for some reason (e.g. if the user has turned off the loading of images in the browser settings). ALT text is primarily for users with disabilities using screen readers to engage with the page content.

Caption
Optional.

Use caption only if it’s mandatory to explain the image. Don’t write a caption if you only use an image for impact.

Decorative
Use the decorative option to hide the images from screen readers. Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included only to make the website more visually attractive.

Modal pop-up viewer
This option allows the user to enlarge image(s) into a modal pop-up viewer.

Note
See the ‘publishing and managing pages’ section for a full-width page hero image.

Collage module

Use the collage module when you have two images with the same purpose. These images will stack on top of each other on mobile, keeping both images visible.

This module is specific to a page. It will be created and edited via the page template.

  1. Navigate to Manage Content Add content [Content type] Image content

  2. Required
    2.1 Image 1: Add by clicking ‘Select images’ and remove by clicking ‘Remove’.
    2.2 Alternative text: Click ‘Edit’ to see and edit the ALT text. IMPORTANT NOTE! Changing ALT text will change centrally throughout the site. For more information, see the ‘Publishing and managing media’ section.
    2.3 Caption: Edit by writing into the text field.

  3. Optional
    3.1 Image 2: Add by clicking ‘Add image content block’ and remove by clicking ‘Remove’.

  4. When ready with the page, save it to display the modules.

Note

For publishing a full-width page hero image, see the ‘publishing and managing pages’ section.

Image - CMS guide

Support

If you can't find answers from this guide, contact Indiana application support.

ACB

Indiana Application Change Board
icat [at] fortum [dot] com

Revisions

Sami Näyhö, 1 month ago (September 29, 2023 @ 16:04:19 UTC)

Possibility to set the image as decorative added.