Display images in Composer

Avatar
Misty Flowers

This article outlines how to display an image on a page in Composer, including uploading the file to Resources and placing an element on the page.

💡 Quick answers

  • Is uploading to Resources enough to put an image on a page? No. Uploading only stores the file. The image appears once an Image or Resource element is added to the page and pointed at that file.
  • Where does an image need to be before it can go on a page? In Resources. Upload the file first, then select it from the Resources picker in an element or in the content editor.
  • What does it mean that elements pull from Resources? An Image or Resource element displays a file from Resources rather than holding its own copy. Changing the resource changes every place it is displayed.
  • Which element is best for a single image? The Image element. It fills the width of its column and resizes automatically when the layout changes.
  • When is a Content element the right choice? When text needs to wrap around an inline image. Add the text first, then insert the image.
  • Where is alt text added? In Resources. Alt text set there follows the image anywhere it is used. The maximum is 125 characters.
  • Where is resizing and layout covered? In the Display images in Composer article, which details how images fit columns and how to resize an inline image.

In this article

How Resources and elements work together

Resources is the Finalsite media library for images, PDFs, videos, and other site files. Pages do not store those files. Instead, elements on the page display files from Resources.

The Image and Resource elements are connected to a resource by selection. Once a resource is selected with Browse, the element displays whatever that resource currently is.

What this means for everyday edits

  • One change updates every placement. Replace resource swaps the file in all instances where it is displayed on the site.
  • Alt text travels with the image. Alt text set in Resources does not need to be re-entered each time the image is placed on a page.
  • Images resize automatically. An image in an Image element fills the width of its column, so moving to a wider or narrower space needs no adjustment.
  • Usage is traceable. Where used lists every location that displays a file.

Choose the right element

Composer offers three main ways to display an image on a page. Image and Resource elements are the recommended starting point; the content editor is best reserved for text wrap.

Goal Use Details
Show one image Image element (Standard tab) Fills the width of its column and resizes automatically. The picker shows only image files.
Show several images or a gallery Resource element Displays resources in List, Grid, Slideshow, or Single format. The default format is List.
Show one video Video element The picker shows only video files.
Wrap text around an image Content element (inline image) The Image button in the editor opens the Resources picker. Size and alignment are set in Image Properties.

The Image element and the Resource element in Single format work the same way. The only difference is that the Image element filters the picker to image files. For column fit, resizing, and alignment after an image is placed, see Display images in Composer. For every element setting, see theImage element and Resource element articles.

⚠️ Important Note

Resource elements on the homepage have fixed settings. Check the Site Instructions before changing anything other than the selected resource or gallery. Do not change the format of a homepage Resource element.

Add an image to a page

Two parts, both required

  • Part 1: Upload the image to Resources. This stores the file in the media library.
  • Part 2: Place an element on the page. This displays the stored file on the page.

An uploaded image does not appear on any page until part 2 is complete.

Complete part 1: Upload the image to Resources

  • Step 1: Click the folder icon (Resources) in the left Composer toolbar.
  • Step 2: Select the folder where the image should be stored.
  • Step 3: Click the green Public Resource button in the top right corner.
  • Step 4: Click Browse or drag and drop the file into the upload box. Wait for the upload to finish.
  • Step 5: Review the title, name, and alt text in the edit screen, then save [confirm save button label].

Resources folder with the green Public Resource button in the top right corner

Files can also be added from a web address, a webcam, Dropbox, or Google Drive. See Upload a resource for each method.

The image is now in Resources only. It is not on a page yet. Continue to part 2 to place it.

Complete part 2: Add an Image element to the page

Before starting, confirm the image is in Resources (part 1).

  • Step 1: Navigate to the page and toggle Compose on.

  • Step 2: Click the blue Add Element button where the image should appear.

  • Step 3: Select Image element on the Standard tab of the Element Library.

  • Step 4: Click the gear icon on the element to open its settings. The element will say Edit Resource Element settings and will be set to Single format for an Image element.
    Image element settings showing the Title field and the Browse button
  • Step 5: Click Browse and select the image from Resources. If you haven't placed your image into Resources yet, you will absolutely have a chance to upload and select it.
  • Step 6: Open the Image tab to keep the alt text from Resources, enter custom alt text, or select Decorative Image.
  • Step 7: Save the element, preview, and publish the page.

Insert an image inline in a Content element

  • Step 1: Enter the text in the Content element first.
  • Step 2: Place the cursor where the image should appear and click the Image icon.
  • Step 3: Choose or upload the image in the Resources picker.
  • Step 4: Double-click the image to open Image Properties, then adjust the size, alt text, and alignment.
  • Step 5: Click OK to save.

Resources picker window for choosing or uploading an image

For manual resizing, padding, and text wrap details, see Display images in Composer.

Update an image after it is placed

Because elements display files from Resources, most updates start in Resources rather than on the page.

Replace a resource

Click the file in Resources to open the Quick Actions Panel, then select Replace resource. See Replace a resource for the full steps.

⚠️ Important Note

Replace resource changes the file in all instances where it is displayed on the site. Check Where used first if the new file should not appear everywhere.

Find where a resource is used

Click the file in Resources and select Where used in the Quick Actions Panel. To review files across the whole library, filter by status: Used or Unused. See Find where resources are used on your site.

Restore a deleted resource

Deleted resources stay in the Recycling bin for 30 days. Select Deleted Resources from the Resources menu, choose the file, and click Restore. The file returns to Resources only. It does not return to any gallery or page placement it had before deletion.

 Real-world scenarios

A school uses the same campus photo in an Image element on the About page and in a Resource element on the Admissions page.

  • Replace the file once in Resources, and both pages show the new photo.
  • Update the alt text once in Resources, and it applies wherever the photo is displayed.

Troubleshoot missing images

Locate an image that is not in the picker

  • Confirm the upload. A file saved on a computer is not available in a picker until it is uploaded to Resources.
  • Check the file type. The Image element picker shows only image files. Use a Resource element for other file types.
  • Use the filter. Search by name, title, or tag to find the file in a large library.
  • Check access. Admin groups set to Not Allowed have no access to Resources by default [confirm whether this affects the picker].
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

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