CMS Tip: Make Images Align Left, Right, or Side by Side

Posted on 6/16/2016 3:37:17 PM

This is part of a series of tips for web maintainers. The Web Team posts hints and tips about the CMS, MyIUP, IUP Mobile, and the interactive map each week.

Image styles on the format tab

Use the available image styles to improve your page layout in responsive sites by making them align and controlling the size they display at different screen sizes.

For those working on converted sites, there are many new options and combinations when using images in your layout, and there are several styles to help. These can be found and applied in the Toolbar.

First and Foremost

Make your images responsive by selecting the Responsive option. It is a must for converted sites, but if your site hasn't been converted yet, you can still apply the style. It won't do anything on an unconverted site, but it will be one less thing to update when it is converted.

Placement of an Image

If your image isn't going to display at full width, it can be justified to the left or the right. Text will flow properly around the image.

Size of an Image

Is your image going to span the full width of the page on all views (desktop, tablet, phone), or just on smaller screens? There are styles available that will take a large image and "shrink" it so that it only displays at half or a third of the width of the page.

See the Align and Size an Image with Styles how-to for details.

Shown below: two images side by side, on a desktop/large and phone/small.

Two Side by Side Images Full View

Desktop view: Two images side by side.

Two Side by Side Images Phone View

Responsive/mobile device view: Two images side by side.

Jessie Groll