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

Images
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.

Alternative text
Screen readers will read this to users with disabilities, and it is shown if the image can't be loaded for some reason. Use ALT text that describes what is in the image.

Don't

Add collages of images into a single image module. 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 but use the ‘Media and text’ module instead. Image captions are a few lines of text used to explain and elaborate on published photographs.

Image 1 (jpg, png)
Mandatory

Image 2 (jpg, png)
Optional

Alternative text
Mandatory. ALT text is assigned once to an image, and it won’t display on the front-end unless the image can't be loaded for some reason. ALT text is primarily for users with disabilities using screen readers to engage with the page content.

Caption
Optional

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

Captions

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

Fortum nuclear workers
Image caption goes here.

Collage module?

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

Image caption goes here.

To create the module in the CMS

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

In case you can't find answers from this guide, you can contact Indiana support.

iCAT

Internet Change Advisory Team
www.fortum.com/indianasupport
icat [at] fortum [dot] com

Revisions