Featured Image blocks

What are Featured Image blocks?

Featured image blocks are one of two main ways to display images on a page. These blocks will adjust to the size of the content section they are placed into, meaning they adjust well for mobile devices. Featured image blocks also contain two different styles of adding headings, captions, and links to photos. This means they can be very useful for a variety of applications.

Examples of Featured Image Blocks

Please be aware that many of the layouts displayed below talk about the column layouts of SiteMasonry pages. On mobile, columns stack, creating a different experience. Keep this in mind when designing your pages!

This is a 16:9 ratio image in a 50% column with no additional settings. Images uploaded via Featured Image will require alt text in order to save them. They also must be below 2 MB in size.

Display Style

As you can see from the following two examples of featured images, there are key visual differences between the "caption below" and "text overlaid" styles that are available. Headlines, captions, links, and photo credits all look different between the two, not to mention the space considerations. It is important to note that elements displayed here are optional, so you do not need to include any or all of them.

Caption Below Headline

Caption goes here

Photo credit:
Photo credit
Photo Credit
Text Overlaid Headline
Text Overlaid Headline

Caption for the image

Photo credit:
Photo credit
Photo credit

Same Image, Smaller Space

Because featured images are sized per the width of the column they are put into, the same image as above will look much smaller in a 25% column. This means that images that look good in certain layouts might not look as good in other.

Please note, though, that on mobile, these images will both turn into full width images, as all columns stack on mobile. This can also make images look grainy on mobile devices.