Facebook Pixel About Galleries | Western Kentucky University Skip to main content

Galleries


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.

Gallery Options Panel

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;.

    Options:
    • style=carousel/grid;
    • columns=1-6;
    • thumbnails=true/false;

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.

Page Layout
1 Column 2 Column Main 3 Column Main Side Column
Gallery Columns
1 Not Recommended Not Recommended Not Recommended Not Recommended
2 Not Recommended Not Recommended Not Recommended 275x275
3 400x400 300x300 200x200 175x175
4 300x300 225x225 150x150 140x140
5 250x250 180x180 125x125 115x115
6 200x200 150x150 100x100 Not Recommended

 

Images Panel

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. 

Toggle to control view of 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.

A screenshot of the panel Panel

 


 

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:

  1. Navigate to the asset list view by selecting Content > Assets from the global navigation bar.
  2. Hover on the Image Gallery Asset's row and select Edit.
  3. 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.
  4. 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.

 


Some of the links on this page may require additional software to view.

 Last Modified 4/26/18