Display images in Composer

In this Article

This article outlines how to display images on a Composer page. There are different options for you to try as you customize your pages on your website. Before inserting your images, make sure you try out these options for adding structure and organization to your page.

  • Adding Layout elements enables you to place Image elements wherever you'd like them to be with the added security of mobile responsiveness and screen size optimization.
  • Use the Page Layout and Appearance menu to customize your page and your Image elements will automatically resize to their new spaces.

Image element for single images

The Image element displays a single image from Resources. To add an Image element, open your Element library to the "Standard" elements and select "Image."

element library selecting the Image element from the standard elements tab.png

Browse to select your photo. Adjust the Image element settings. The image will then display on the composer page. Images will automatically fill the width of the column the element is displayed in. Moving to a different sized space means the image will shrink or stretch to fill automatically. 

two images differing in width stretching to fit the constraints.png

Resource elements for multiples or galleries

The Resource element and Image element are essentially the same element yet with different default settings.  Consider which format you'd like to choose after selecting "Resource element" from your element library:

  • The element will automatically be in "List" format which displays a column of the file names without thumbnails.
  • Adjust the format to "Grid" to display photos in rows and columns within the designated space of the element.
  • Many love the "Slideshow" format which will allow your visitors to click through a Gallery of images or documents, even.
  • Change your mind about selecting multiples? Choose "Single" to go back to the characteristics of the "Image element."

the different formats of a resource element.png

Content elements for inline images

Placing an inline image into a Content element provides the ability to wrap text around the image.

  1. Place your cursor in the location where you wish to insert the image and select the "Image" icon.

    Note: Add text before inserting images into Composer for the smoothest combination.

    Insert image into the editor.png
  2. Use the Resources picker to choose or upload your resource.
    resource picker window.png

  3. The image will display in the Content element. Expand out the window if you don't see the small black box in the bottom right corner of the image so that you can drag and resize the image.
    inline image displaying in between blocks of text in a content element.png
  4. Double-click on the image to bring up the Image Properties window. Here, you can edit the image selected as well as modify the size, alt text, alignment, and other Advanced properties.
    insert image, open properties, advanced, padding.gif

  5. Click “OK” to save.

Was this article helpful?
2 out of 6 found this helpful



Please Sign in to leave a comment if you don't see the comment box below.