OU Campus Live Delivery Platform's (LDP) Image Gallery

Home  >  OU Campus Self-Help  >  Assets  >  Image Gallery

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.

Creating an Image Gallery

Navigate to the asset list view by selecting Content > Assets from the global navigation bar.

navigate to assets
Figure 1. Navigate to Assets

Click the New button.

select new
Figure 2. Select New

Select Image Gallery from the menu to display the Image Gallery Asset screen.

image gallery asset screen
Figure 3. 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. Note: In the Asset Info section, to lock the image gallery to your site only, check Lock to site. In the Access Settings section, select your access group to limit the ability to edit (add/remove images) the image gallery to only within those in your site group. To limit the ability for those to use your image gallery, select your group.

asset panels
Figure 4. Asset Panels

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
Figure 5. Gallery Options Panel

The Gallery Options 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 further edit the element, such as the size or number of columns and rows displayed.

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.

Images Panel

A user can add images to an Image Gallery Asset using the Images panel. Users can add images either by clicking the Add button or simply dragging the file from its location on your desktop to the Images panel. Users can also toggle between two different views using the Full View and Compact View buttons in the Images Panel header.

images panel
Figure 6. Images 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: Allows users to enter a brief description of the image.
  • Caption: The description that will display when a user hovers on an image.
  • Link: Users have the option to also include an HTML link by manually entering the web address in the text field.
added images panel
Figure 7. Added Images 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.

Publishing Image Gallery Asset Overview

In order for the image gallery asset to appear on a published page of an OU Campus site, it must first be published. Once a page has subscribed to the asset, republishing the asset updates the page and republishes all subscribing pages.

select publish
Figure 8. Select Publish

When a user attempts to publish an asset, the Publish Asset dialog is displayed with the following elements:

    • Final Check: If enabled, this tab allows users to enter a Version Description to help users identify appropriate versions when making a comparison or a revert to the asset. There is a 256 character limit.
    • Schedule: Scheduling the asset for publish will not update the asset right away on any pages it is being used.
    • Cancel: Cancel the publish.
    • Publish Now: Publish the asset and all subscribing pages to the production server.
publish asset screen
Figure 9. Publish Asset Screen

When an asset is published, the content of the asset is saved to the database and is added to the versioning system. All pages containing the asset are updated using the latest of the file on the staging server. The current version of the page will not be published to prevent premature changes to the production server. In addition, publishing assets does not have an affect on pages that are checked out to other users or are in the workflow system until the pages are checked back in.

Publishing an Image Gallery

An asset can be published by an administrator either from the Asset Actions toolbar or from the Asset list view. It is important to remember that the ability to perform a publish on assets will become unavailable if the asset is currently assigned to or checked out to another user. To publish an asset from the Asset list view:

        1. Navigate to the Asset list view by selecting Content > Assets from the global navigation bar.
        2. Hover over the target asset's row and select Publish from the list of available actions. The asset does not have to be checked-out in order to publish.
          publish from list
          Figure 10. Publish From List
        3. Once the Publish Asset dialog is displayed, input an optional version description and click Publish Now.

It is important to remember that in order to publish an asset from the Assets Actions toolbar the asset must first be checked-out. To publish an asset from the Asset Actions toolbar:

        1. Navigate to the Asset list view by selecting Content > Assets from the global navigation bar. Select the light bulb icon to check the asset out.
        2. Click the asset's linked name or choose any action to be taken to one of the various screens that contain the Asset Actions toolbar.
        3. From the Asset Actions toolbar, select Publish. Asset Actions Toolbar.
          asset actions toolbar
          Figure 11. Asset Actions Toolbar
        4. Once the Publish Asset dialog is displayed, an administrator can input an optional version description and click Publish Now.

Inserting Assets Overview

Once the Image Gallery asset is created, content contributors can use them. Assets are inserted via the WYSIWYG Editor.

Inserting an Asset with the WYSIWYG Editor

Most often, the image gallery asset will be available to insert on a page while editing in the WYSIWYG Editor. Content editing might also be configured so that when clicking on an editable region button, the user is only presented with an asset chooser. Once a page has subscribed to the asset, any changes in the asset will update the page and republish it. The republishing of pages subscribed to assets can be throttled by administrators with the configuration of the publish threshold setting.

        1. While in the WYSIWYG Editor, place the cursor where the asset will be entered.
        2. Then find and click on the Insert Asset icon in the toolbar.
          wysiwyg editor asset icon
          Figure 12. WYSIWYG Editor Asset Icon
        3. From the Asset Browser, choose the asset from the list of available assets. Optionally, a user can filter the list by tag, type, or site. Assets from all sites within an account are shown, unless otherwise restricted except for Managed Form Assets, which are site specific, are also only shown in the site in which they were created.
          asset browser
          Figure 13. Asset Browser
        4. Click on Select Asset.

The asset will be entered into the page where the cursor was placed. If the asset is a Text Only Asset, or a Web Content Asset with no block level HTML code (such as p or div tags), the asset will preview with the content inside of a wrapper.

If the asset is a Web Content Asset with block level HTML code, a Source Code Asset, an Image Gallery Asset, or a Managed Form Asset, it cannot be previewed in the WYSIWYG Editor, but it will still have a wrapper. Note that even though the asset is not displayed in the WYSIWYG Editor, most will still render in the page preview. Source Code Assets will not always render with preview.

To delete an asset from a page in the WYSIWYG Editor, click anywhere on the asset wrapping and press the Delete key.

Proper Credit for this documentation goes to Western Kentucky University Information Technology (OU Campus – Self Help web site