Creating an Image Gallery

Overview

Once LDP has been enabled for an account, new image galleries can be created. After being created, galleries can be placed inside editable regions on pages in OU Campus. Under normal circumstances, the supporting files (XSL, CSS, and JavaScript files) needed to appropriately render the gallery will be pre-configured on the site. Some implementations may even have multiple output types to display the image gallery on the page in different ways.

Creating an Image Gallery Asset is a little different than creating other assets, as it is a two-step process. The first step is to create the asset; when creating a new Image Gallery, users will first fill out basic information, just like other asset types. The second step is to upload images into the asset, sort them, add captions, titles, and descriptions if desired, and then finally save and publish the asset. At this point, the asset can be inserted on a page. 

Basic Steps

  1. Navigate to the Assets screen and click the New button.
  2. From the New Asset modal, select Image Gallery. Alternatively, the drop-down arrow can be selected on the New button, and the Image Gallery item selected from the menu.
    New AssetNew Asset Menu
  3. On the New Image Gallery screen, fill out the information in the Asset InfoAccess Settings, and Gallery Options panels. When initially configuring the Gallery Options or when editing them at a later time, either the Set button can be used to commit the changes or the Save button can be used.
  4. Click Create. The Images panel becomes available.
  5. Add the images to the asset, including the metadata details. Depending on how the image gallery is displayed on the page, the title, description, caption, and/or link fields will appear with the images in the gallery.
  6. Click Save.
  7. Click Publish to publish the asset.

While an asset can be inserted on a page before the asset has been published, the asset must be published in order for it to render properly on any subscribing pages. 

New Image Gallery Screen

The New Image Gallery screen includes the following panels:

  • Asset Info: Allows users to name the asset, add a description, and add tags to the asset. the Lock to Site checkbox is also present in this panel, though Image Gallery Assets are always locked to the site in which they were created.
  • Access Settings: Allows users to configure who can edit the asset (through the Access Group drop-down menu), and who can place the asset on a page (through the Available To drop-down menu). Level 9 and 10 administrators can choose any group that is configured in the site; lower-level users can only choose from groups to which they belong.
  • Gallery Options: Allows  users to configure the thumbnail options and add any extra XML in the Advanced field.
  • Images: Available after the asset has been initially created. Allows users to add images to the gallery, reorder them, and add metadata such as title, description, caption, and link.

New Image Gallery Screen

The Asset Info and Access Settings panels are common to all assets and more information about them can be found on the Creating Assets page.

Gallery Options Panel

The Gallery Options panel includes the following:

Maximum Thumbnail Size: Allows users to customize the maximum thumbnail dimensions at which the thumbnails display. A user inputs a numerical value into the width (W) and height (H) to define dimensions. The width and height can both contain a maximum value of 500 pixels.

Thumbnail Preview: Provides an example gray box placeholder of the size and aspect ratio that is chosen for the thumbnail previews. The provided example includes a dotted-line edge that can be used to adjust the dimensions of the thumbnail.

Thumbnail Aspect Ratio: Used to choose the between using the aspect ratio of the image's original dimensions or cropping the image. The options are as follows:

  • Original: Resizes the images so that the longest dimension of an image meets the maximum thumbnail dimensions, all while preserving the original aspect ratio of the images. For example, if an 800x600 image is uploaded with a maximum thumbnail size of 100x100, the image will be appear as 100x75 in the thumbnail.
  • Crop: Resizes the images so that the shortest dimension of an image meets the maximum thumbnail dimensions, then cropping the thumbnail size from the center of the image. For example, if an 800x600 image is uploaded with a maximum thumbnail size of 100x100, the image will first be resized to 133x100 and a 100x100 square will be cropped from the center of the resized image.

Advanced: The Advanced field populates the <advanced> node of the image gallery XML, and can be used to define extra XML as necessary and can be used in conjunction with XSL to extend the capabilities of the gallery.

Gallery Options Panel

Images Panel

Once the asset is created, the Images panel is available for adding images. Images can be uploaded from the local computer by clicking Add and selecting the files or by simply dragging and dropping onto the panel. After images are added, users can add metadata for each image. This metadata will be used by the various gallery display types available in the site and rendered along with the image gallery on the published page. Users also have the option to show or hide the metadata fields by clicking the Full View and Compact View buttons, respectively, in the top right of the panel.

Images Panel

When an image is added to the Images panel, a thumbnail of each image is displayed with the following:

  • Title: The displayed name of the image.
  • Description: Allows users to enter a brief description about the image; not always used.
  • Caption: Allows users to enter a caption for the image; not always used.
  • Link: Users have the option to also include an HTML link by manually entering the web address in the text field. If used, clicking the image on the published page will take users to the defined link.

Adding, Deleting, and Otherwise Modifying Images

During the initial image gallery creation, images can be removed by clicking the X in the top right of each image box. Additional images can be added at any time by clicking the Add button or dragging and dropping images into the Images panel.

After the gallery has been created and published, users can add or remove images from the gallery in the same manner described above. Metadata for existing images can be edited as well. Once the images have been added, deleted, or edited, users need to save the gallery asset and republish it for the changes to be reflected on the live site.

Reordering Images

The order that the images are placed within the gallery, by default, determines the order within the gallery or slider. Some types of galleries may have a configuration option that includes the ability to randomize the order. Otherwise, to change the order of an image:

  1. Hover over the image.
  2. Click and drag it into the new location.
  3. Repeat as necessary with other images.
  4. Click Save.
  5. Publish the asset.