Images and text wrapping

Learn how to add images of different sizes and wrap text around them on the Information Details content type.

The Information Details content type allows you to add images in 2 ways: through the rich text editor toolbar, or by selecting “Add image” within a section. This article addresses how to use the “Add image” function to display images at different sizes, including side by side, with the option to wrap text around the images.

Using 'Add image'

Section content

Under the Content tab, choose the “Add Image” button in the Section Content field.

This will open several fields that allow you to control how your image looks on the page.

In the Administrative title, say what your image shows. This optional field will only be visible to you and to other authors, as well as to people who use screen readers.

In the Image field, add an image using the blue button. The maximum size is 256 MB and allowed types are png, gif, jpg, and jpeg.

You can enter a caption that will appear below the image in the Caption field. The caption is limited to 500 words. The caption field is a rich text field, so you can embed links in it.

Next, choose the Display size. This controls the size of the image on the page, and it also adjusts based on which Info Details page template is used: Information details or visual story. The visual story template stretches the content the full width of the page and removes the right column that holds contact information and related links. Use the visual story template if your page has a lot of images or other visual elements such as iframes or data visualizations with short pieces of text.

Display size options on desktop screens are:

Size

Information Details template

Visual Story template

X-Small

1/3 of content area

1/3 of content area

Small

50% of content area

1/3 of content area

Medium

50% of content area

50% of content area

Large

100% of content area

2/3 of content area

X-large

100% of content area

100% of content area

The size of the image also adjusts relative to the size of the screen. In other words, the actual size will vary based on whether it’s being viewed on a phone, tablet, or desktop. On phones, generally the image will take up 100% of the content area width, regardless of the display size.

Alignment lets you choose whether the visualization is aligned to the left or right side of the page.

If you want to wrap text around the image, check the box in the Wrapping field, then click on the “Add rich text” button, and enter the text you want to wrap around the image. The text will only wrap if there is room, so it’s best to choose a medium or smaller Display size.

Side-by-side images

You can add multiple extra small, small, or medium images and have them display side-by-side across the width of the content area.

To do this, within one section, click on the “Add image” button for each image you want to display side by side. Set your Display size for each image at x-small, small, or medium, and make sure you check the box in the Wrapping field so each image allows another to wrap around it. Three extra small images can sit side-by-side, while 2 small or medium images can sit side-by-side on the Information Details template.

If you need help with images and text wrapping, sign up for Office Hours request support through ServiceNow.

Was this article helpful?

Last updated