Image element

Misty Flowers

January 02, 2018 19:33

The Image element displays a single image from Resources and automatically fills the width of its container, including options for alt text, caption, link behavior, and format (single, list, grid, or slideshow). Add it from the Standard tab of the Element Library.

💡Quick answers

Selecting an image to display? Click Browse in Image element settings and pick the image from Resources.
Where is alt text added or overridden? In the Image tab of element settings, enter custom text in the Alt text field. For purely decorative images, check Decorative Image (no alt text needed). The AI Alt Text Generator drafts text automatically when an image is uploaded.
Can an image be made clickable? Yes. In the Link to tab, check Link Resource and choose Popup (lightbox), Internal Page (with Select Page), or External URL. Check Open in a New Window to open in a new tab.
Displaying the image title or description? In the All tab, set Display Resource to filename or title, choose above or below position, and toggle Description to show the resource description.
Is it possible to show multiple images in one Image element? Yes. Switch the format to List, Grid, or Slideshow. Settings work the same as the Resource element.

What are Elements?

Elements are the fundamental building blocks of your Composer pages. Learn more about how elements work in the article, "Understanding elements" and read about each of the 5 tabs in the element library: Standard, Module, Layout, Social, and Shared.

The Image element displays a single image from Resources and is an ideal element to use because any image inside of an Image element will automatically fill the width of the container the element is displayed in. Moving to a wider space means the image will stretch to fill without any adjustment. Returning to a smaller space automatically resizes the image to the new constraints.

To insert an Image element onto your Composer page, open up your Element library to the "Standard" elements and select "Image."

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

Image element settings

In addition to the common element settings, the Image element includes the following configuration options.

Title: The Image element title appears above the image on your web page. Use the toggle switch to the right of the title to turn the display on or off. When toggled off, the image element's title will still exist for internal organization but will be hidden on the live website.
Browse: Use this button to search for a specific image within Resources and select it to display in the element.

All

Display Resource: Choose to display the filename or the title of the image, or none.
Display Title: Choose to display the title of this image either above or below the resource. Select None to ensure neither the filename nor the image title appears on the page.
Description: Display the description of the resource in the element display.

Image

Alt text: Alt text is a written description of the file for screen readers and other assistive technology, and it is required on images by current ADA standards. With the AI Alt Text Generator, a description will be created automatically when you upload an image, which you can review and edit. Enter custom alt text here to override the alt text set in Resources.
- Decorative Image (no alt text needed): Select this option for images that are purely decorative and do not provide essential information.
Caption: Select "Default Description" to display the text from the “Description” field for the image in Resources, or "Custom" to use a custom caption.

Advanced

Ignore URL Parameters: If this option is selected, the resource displayed in the element by default will remain even if user-selected criteria would normally override it.

Link to

Link Resource: Select this checkbox to allow users to click on an image and be taken to one of the following options.
- Popup: Choose this option to open the resource in a lightbox, with the rest of the screen dimmed.
- Internal Page: This option will link the image to a site page, which you can choose using the "Select Page" button that appears.
- External URL: Link the image to an external web page. Enter the URL (starting with http:// or https://) in the field below.
Open in a New Window (Internal Page or External URL only): Select this checkbox to have the link open in a new window or tab.

Design

Scroll down to view the Design controls. This is a great place to add content or buttons into the "Header Content" and "Footer Content" areas that will display tightly with each element.

List, Grid, and Slideshow formats

Note that the Image element can also be used in a List, Grid, or Slideshow format, which functions the same as the Resource element. Refer to the Resource element article for more information about these settings.