Live Delivery Platform's (LDP) Image Gallery Assets feature allows users to easily create and manage image galleries in the OU Campus system. Users can upload images into the gallery; provide a title, caption, and description information; and drag and drop images to modify the order. OU Campus will automatically generate thumbnails based on user-defined settings for grid style galleries.
Creating an Image Gallery
Navigate to the asset list view by selecting Content > Assets from the global navigation bar. Click the New button. Select Image Gallery from the menu to display the Image Gallery Asset screen.Fill out the required fields to create the asset. For this particular asset, only the Asset Info panel and Access Settings panel are available until the asset has been created. At this stage in the creation process the ability to add images and change display options for the asset are unavailable. Once all text fields have been filled out, click Create.
The Image Gallery creation screen includes the following elements:
- Preview Menu: Contains the name of the asset, as well as menu items for each panel for quick navigation.
- Gallery Options: Allows users to customize how Image Gallery Assets are displayed within the OU Campus system.
- Images: Allows users to add images to the gallery. Also allows users to edit basic metadata information about each individual image.
Gallery Options Panel
After a user has created an Image Gallery Asset, the Gallery Options panel becomes available.
This panel includes the following elements:
- Maximum Thumbnail Size: Allows users to customize the default dimensions that all gallery thumbnails will display at. A user inputs a numerical value into the width (W) and height (H) to define dimensions or click the Reset button to restore default thumbnail settings. Additionally, selecting the dotted-line edges of the Thumbnail Preview and moving them adjusts the dimensions of the thumbnail.
- Thumbnail Preview: Displays a preview of thumbnails as they would appear in the gallery.
- Thumbnail Aspect Ratio: Allows users to choose between using an image's original dimensions or cropping the image.
- Advanced: Allows users to specify the style of Gallery (Grid or Carousel), items in a grid,
and enable thumbnail style images. Advanced options follow the format Option_Name=Value;.
To ensure that all image thumbnails are consistently sized and shaped, elect to crop the image. This will ensure all images are formatted to the dimensions defined. However, this will create a crop from the middle of the image, and may cut out elements of the image.
Recommended Thumbnail Sizes
Use the table below to determine the optimal thumbail size based upon your page's layout and the number of gallery grid items specified.
|1 Column||2 Column Main||3 Column Main||Side Column|
|1||Not Recommended||Not Recommended||Not Recommended||Not Recommended|
|2||Not Recommended||Not Recommended||Not Recommended||275x275|
Once the asset is created, the Images panels is available for adding images. The Images panel can be shown in full or compact view of the images, which will include the image metadata or not, respectively. Images can be uploaded from the local computer by clicking Add and selecting the files or by simply dragging them onto the panel.
When an image is added to the Images panel, a thumbnail of each image is displayed with the following elements:
- Title: The displayed name of the image.
- Description: Text that will display over the image in carousels.
- Caption: The description that will display when a user hovers on an image.
While a caption is not required by galleries, it is required for accessibility to describe the image to users on screen readers.
- Link: Users have the option to also include an HTML link by manually entering the web address in the text field.
Adding/Deleting Images in a Gallery
After an Image Gallery Asset has been created, images must be added to complete the asset. Image selections can only made locally from the computer. Currently, it is not possible to select images that already uploaded to the site by navigating using a file chooser. PNG files will be converted to JPG files when uploaded, which means that the alpha-channel (transparency) setting will be removed if it is being utilized, and the transparent portions will be black. To add an image to the Images panel:
- Navigate to the asset list view by selecting Content > Assets from the global navigation bar.
- Hover on the Image Gallery Asset's row and select Edit.
- On the Edit screen, navigate to the Images panel and click the Add button or drag an image from an external source (normally a user's desktop) into the Images panel.
- Fill out the necessary metadata fields for each image and click Save.
Once images are uploaded, change the order of the images by selecting the image and dropping it into the Images panel in the order that is desired. Additionally, images can be deleted from the Images panel by selecting the X icon in the corner of each image item.