Composer offers three main ways to display images on a page: the Image element (single image), the Resource element (galleries and multiple images), and inline images inside a Content element for text wrapping. Images placed in layout columns resize automatically to fit their space.
💡Quick answers
- Which element is best for a single image? The Image element, found in the Standard tab of the Element Library; it automatically fills the width of its column.
- What display formats does the Resource element support for images? List, Grid, Slideshow, and Single; use Grid for rows of thumbnails and Slideshow for a click-through gallery.
- Adding an inline image to a Content element? Click the Image icon in the editor toolbar, select the image from Resources, then double-click the inserted image to adjust size, alignment, and alt text in Image Properties.
- Do images automatically resize when the page layout changes? Yes; images in layout columns or Image elements resize automatically to fit their new space.
- Best practice before inserting images into a Content element? Add your text first, then insert images; this produces the smoothest combination of text and images in the editor.
Whether you need to change the size of a photo, scale an image to fit a specific space, or simply adjust the dimensions of your content, Composer offers several ways to manage your media.
This article covers how to resize images automatically using Page Layouts, as well as how to manually shrink or stretch images within a Content Element. Before you insert or upload your files, explore the options below to ensure your images are responsive and perfectly proportioned for every screen size.
In this article
- Image element for single images
- Resource elements for multiples or galleries
- Resize an image manually in a Content element
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."
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.
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."
Resize an image manually in a Content element
Placing an inline image into a Content element provides the ability to wrap text around the image.
-
Place your cursor in the location where you wish to insert the image and select the "Image" icon.
Important Note: Add text before inserting images into Composer for the smoothest combination.
- Use the Resources picker to choose or upload your resource.
- The image will display in the Content element.
Important Note: Don't see the small black box in the bottom right corner? Try expanding your browser window or scrolling to the edge of the image. - 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.
- Click “OK” to save.
Comments
Please Sign in to leave a comment if you don't see the comment box below.