Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

Create an Image Gallery

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

Use an image gallery page to show off a beautiful collection of images. You will need to create an image gallery before you can add it to pages throughout your site.

You may want to house all your image galleries in a folder in the site tree, or you may want to create them under the page they will be added to.

Image gallery organization options in site tree

If you don't want your image gallery to be seen anywhere outside of the page you're creating it for, make sure you check the Hide this page from navigation menus box in the Settings tab.

How to Create a Gallery

  1. Right-click on a parent page in the site tree where you would like to create your gallery.
  2. Select Create Page.
  3. Choose OC Image Gallery as the content type.
  4. Fill in the necessary fields.
  5. In the Add images to gallery field, select Insert links to add images.
  6. To add your first image, select the link icon and browse the files library to the image you want to add. All images used in an OC Image Gallery must be uploaded to your files library. Using this option to find your images ensures that the file path will be fully operational and makes it easier to track which images you've added to the gallery.
    Link icon in add images menu
  7. Select Add More Links to add another image. Add as many as you need, then Save.
  8. Publish or Submit the page. If your gallery is unpublished, you cannot add it to another page.

Ensure you have permission to use all images before adding them to the gallery. 

What to Include on the OC Image Gallery Page

Use the following information to fill out OC Image Gallery page fields:

  • Page name: Completes the unique page URL.
  • Image gallery name: The name of the gallery. This name is displayed at the top of the OC Image Gallery page when viewed independently. This name will not display when a gallery is added to a page. There is a limit of 70 characters.
  • Description of image gallery: A brief overview of the image gallery. The description has a limit of 400 characters.
  • Add images to gallery: The field to add your images to your gallery.
  • WYSIWYG Editor: The WYSIWYG Editor is not immediately visible in the default template. It can be accessed through the WYSIWYG Editor drop-down, by selecting Body Content. This is useful if you want to have your galleries as independent pages and include an introduction. Any WYSIWYG content added here will not display when a gallery is inserted into another page.

Add Images to Gallery Menu Options

Use these fields when adding image links to your image gallery:

  • Link Text: The Link Text is used as the description or caption for the image on your page, so write something illustrative in this field.
  • Description: The Description is used for alt-text. This will auto-fill with the alt text set for the file in the Files Library, or the file name if no alt text is set. Content authors can choose to Override Description.
  • Override Description: Check this box to write your own alt text in the Description field instead of using the alt text or file name from the Files Library. If you override the set alt text, it will no longer automatically update when edited in the Files Library.
  • Link URL: This field shows the file path of the image after adding them.
  • New Window: This is a legacy option and may be removed in the future.
  • Four arrows icon: The arrow icon on the left can rearrange the order of images by clicking and dragging the image.
  • Cogwheel: To delete an image, hover over the inserted image fields to see the cogwheel drop-down option. Clicking on this will allow you to delete an image from the gallery.

the add images to gallery image link fields

Next Steps

  1. Add an image gallery to another page
  2. Manage the Image Gallery settings
  3. Best Practices for Images
Was this article helpful?
0 out of 1 found this helpful