A picture is worth a thousand words, even in your digital workplace. Images can draw people to your content, reveal essential branding, and add colour and culture. But like getting a painting straight on the wall, it can be tricky to get your images to appear exactly the way you need them to. Today we'll offer some quick tips on how to ensure that your images are right on the first time, every time. If you're new to using CSS in Igloo, consult our introductory CSS Success post for some of the foundations you'll need.

The power of percentages

One of the largest challenges with displaying images is ensuring that they're shown consistently across all screen resolutions and sizes. If you're encountering issues with images being out of place, or out of place on specific devices, the usual culprit is width. By default, images have a fixed width that's specified when you add them, or when you drag the corners to make them larger. They rely on their container resizing, which will reposition them to optimize them for the device. In the code view of the editor, a fixed width will look like this: 

width: 300px;

What we'll do is adjust that width to a percentage, so no matter the screen size, the image will always take up that percentage of the container. 

width: 45%;

Fixed-width images show at a consistent size regardless of device, but using a percentage will ensure that the image is shown in the same position, and the size will adjust to fit the screen. This small change can make sure your images always take up the right amount of space. 

Built-in image controls

The text editor has a number of features already built in but the Display and Alignment options are especially useful for image positioning. The Display option defaults to breaking text to show the image, so text will appear above and below it, but not around it. The Inline option will wrap the text around the image, making it easier to display it in context. 

The Alignment option defaults to the center, but it can push your images to the left or right of their container, and when combined with the Inline option above, will show the image embedded in the text, like the nebula shown on the right. 

Multiple images

Using the Inline and Alignment settings in combination with widths set with percentages can make it easy to place images next to each other. This can be challenging when using different image sizes, and images can be pushed down to the next line if the adjustments aren't precise. Each image will have padding and margin values associated with it from the implemented CSS of your digital workplace, creating space around it. With a fixed width, we'd need to adjust the padding and margin values for each image, and variations could still set them awry. 

Instead, we can help the browser out by giving each image a little wiggle room in the percentages. Here's a line with three images aligned center, displayed inline, and with a width of 30%. 

Equipped with these tools, you'll be able to lay out gallery style posts in HTML widget, wiki articles, or anywhere you desire. For more information about using CSS with Igloo, you can ask a question in the Community area