Creating LDP Image Galleries in XSL

Overview

This page reviews the basic process for creating new Image Gallery Assets, how to create additional outputs for the galleries in the XSL, where to place the corresponding files, and how to allow a desired selection of a gallery output for a particular page.

Live Delivery Platform

The Live Delivery Platform (LDP) in OU Campus enables a rich set of Web 2.0 applications and extends the dynamic interactive capabilities of the website. LDP helps foster a dynamic website experience by allowing visitors to take advantage of popular interactive applications. With LDP, visitors have more access to the information they want, and administrators can easily gather more live data on how their site visitors interact with the various applications. LDP is accessed and managed through the secure OU Campus interface. Some applications may require initial intervention by administrators.

Image Galleries

Image Gallery Assets allow users to create and manage image galleries. Users can upload images into the gallery; provide a title, caption, and description; and drag and drop images to modify the order. OU Campus automatically generates thumbnails based on user-defined settings. These assets will not render in the WYSIWYG Editor, but they will show on Preview. Image Galleries can only be edited and used on the site in which they were created.

In order to use image galleries with OU Campus, LDP must be active and configured properly. The Support site offers details on how to activate LDP from within Setup > Account and Setup > Sites. A path will need to be defined for the location to which the files for the galleries should be uploaded.

In addition to general administrator configuration, XSLs, CSS files, JavaScript files, and page templates generally need to be configured in order for the galleries to function as desired.

Creating an Image Gallery

Image galleries can be created by Level 4 users and higher, as long as the necessary access permissions have been set. When creating an image gallery, the user can determine the size of the thumbnails, upload images, and define additional properties for the images.

To create a new image gallery, navigate to Content > Assets.

  1. Click on New and then Image Gallery
  2. Name the image gallery. 
  3. Click Save
  4. Add an optional Description if desired. 
  5. Add Tags and separate them with a comma. A minimum of two tags is suggested. This will help filter the assets later in order to find the desired asset to add to the page. 
  6. Set the Maximum Thumbnail Size, if different than the defaulted 100x100. It is advised that any changes be made in the dialog boxes and not by dragging the dashed lines. If changes are made, be sure to click Set Size
  7. Determine the desired Thumbnail aspect ratioOriginal will keep the image's ratio, which means if a rectangular image is uploaded, the thumbnail will also be rectangular, even if the thumbnail size is set to square dimensions. Crop will crop the outside edges of the longest side to meet the dimensions of the defined thumbnail size. If hanges are made, be sure to click Set Size
  8. Define who has access to edit the gallery. 
  9. Upload and edit images, give them titles, descriptions, and captions. 

 

A new image gallery has now been created. At any time the settings can be changed, and pictures can be added, deleted, or modified.

The new Asset will now be available via the WYSIWYG Editor's Insert/Edit Asset icon, the Source Editor, or per an editable region, depending on the configuration of the page being edited.

Adding Images

To add new images, click the New button found under Images. When New is clicked, a box will appear allowing a local image to be selected. Keep in mind that the image is to be selected from the computer, and it is not possible to browse for images already uploaded to the site.

Select one image at a time. When the desired image is located and selected, a pop-up with the image will appear. This will be the same window that appears when editing an image. Make any desired edits, and then use the Upload As… button to complete the selection. 

After uploading the new image, enter in the image's title, description, and caption. Depending on the output configuration of the gallery, it is possible that the caption may be used to pass a URL so that a visitor can click the image and be redirected to a corresponding page. Repeat this configuration process for all desired images.

Once images are uploaded, change the order of the images by dragging them to the desired order using the gray box with the four lines. It is possible to delete images using the “X” in the upper-right hand portion of the image's box.

Modifying Settings

To modify the thumbnail size, open the asset, and either drag the thumbnail border to the desired size, or enter the desired sizes into the text boxes. It is strongly advised that the text boxes be used. Be sure to click Set Size AND Save for the new settings to take effect.

The thumbnail's aspect ratio defaults to Original, which means that the image will not be cropped. Take note that differently sized or shaped images may appear differently than each other. The dimensions of the thumbnail will be relative to the original aspect ratio and will be no larger than the shortest side.

To ensure that all image thumbnails are consistently sized and shaped, elect to crop the image. This ensures all images are formatted to the dimensions defined. Take note that this will create a crop from the middle of the image, which may cut out elements of the image for the thumbnail.

Remember to click Save for the change to take effect within the Asset.

Important Notes

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.

If the dimensions of the thumbnail are greater than 150 pixels wide, when rolling over the image in the preview area, the image will show up behind the Title, Description, and Caption text. Only 300 total pixels will show, even if the image settings extend greater than that, but the image will render as defined on the page. It is valuable to maintain reasonable dimensions for the thumbnails.

XML Structure

Once the gallery asset is created and dropped into a PCF file, the asset creates the following XML structure:

<document>
   <content>
      <gallery asset_id="3757" created="2011-08-04T19:36:37.474Z" modified="2011-10-17T15:23:38.414Z">
         <name>New Gallery</name>
         <thumbnailWidth>200</thumbnailWidth>
         <thumbnailHeight>200</thumbnailHeight>
         <forceCrop></forceCrop>
         <images>
         <image status="existing" created="2011-10-14T16:20:16.430Z" url="http://gallenauniversity.com/public_html/_resources/images/ldp/.private_ldp/a3757/production/master/d019ecd9-88a5-43ab-b59c-5d0ab743b231.jpeg" modified="2011-10-14T17:34:16.890Z">
         <storedName>d019ecd9-88a5-43ab-b59c-5d0ab743b231.jpeg</storedName>
         <friendlyName>1_2.jpg</friendlyName>
         <thumbnail url="http://gallenauniversity.com/public_html/_resources/images/ldp/.private_ldp/a3757/production/thumb/d019ecd9-88a5-43ab-b59c-5d0ab743b231.jpeg">
         <width>200</width>
         <height>70</height>
         </thumbnail>
               <title>Graduation</title>
               <description>Celebrate Success</description>
               <caption>Celebrate Success</caption>
          </image>
          <image status="existing" created="2011-10-14T16:20:25.565Z" url="http://gallenauniversity.com/public_html/_resources/images/ldp/.private_ldp/a3757/production/master/0921a665-0e31-49fe-8ff9-187ab7aa641d.jpeg" modified="2011-10-14T17:34:16.909Z">
          <storedName>0921a665-0e31-49fe-8ff9-187ab7aa641d.jpeg</storedName>
          <friendlyName>2_2.jpg</friendlyName>
          <thumbnail url="http://gallenauniversity.com/public_html/_resources/images/ldp/.private_ldp/a3757/production/thumb/0921a665-0e31-49fe-8ff9-187ab7aa641d.jpeg">
           <width>200</width>
           <height>70</height>
           </thumbnail>
               <title>Grad Programs</title>
               <description>Expand your skills</description>
               <caption>Become a master</caption>
            </image>
            <image status="existing" created="2011-10-14T16:20:32.968Z" url="http://gallenauniversity.com/public_html/_resources/images/ldp/.private_ldp/a3757/production/master/0ea3383a-1744-43cd-879b-62a26b0578ba.jpeg" modified="2011-10-17T15:23:38.414Z">
            <storedName>0ea3383a-1744-43cd-879b-62a26b0578ba.jpeg</storedName>
            <friendlyName>3_2.jpg</friendlyName>
            <thumbnail url="http://gallenauniversity.com/public_html/_resources/images/ldp/.private_ldp/a3757/production/thumb/0ea3383a-1744-43cd-879b-62a26b0578ba.jpeg">
             <width>200</width>
             <height>70</height>
             </thumbnail>
             <title>Faculty</title>
             <description>The best in their fields</description>
             <caption>Learning from experts</caption>
            </image>
         </images>
      </gallery>
      </content>
</document>

Each image and its details are stored in an image node. Every image node contains the following information:

  • Image status
  • Created date
  • Image path
  • Stored file name (UUID)
  • Friendly file name
  • Thumbnail path
  • Thumbnail width
  • Thumbnail height
  • Title
  • Description
  • Caption

XSL Template

The XSL template for the above XML structure would be as follows:

<!--?xml version="1.0" encoding="iso-8859-1"?-->
<!DOCTYPE xsl:stylesheet SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd" >
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
     <head>
          <title>sdfsdfsdf</title>
     </head>
     <body>
          <xsl:apply-templates select="//content/node()"/>
     </body>
</html>
</xsl:template>

<xsl:template match="comment()|node()|@*|text()" >
  <xsl:copy>
  <xsl:copy-of select="@*"/>
     <xsl:apply-templates/>
  </xsl:copy>
</xsl:template>
 
<xsl:template match="name | thumbnailWidth | thumbnailHeight | forceCrop" ></xsl:template>
    
<xsl:template match="gallery">
     <xsl:apply-templates />
</xsl:template>          
<xsl:template match="images">
     <xsl:apply-templates />
</xsl:template>
<xsl:template match="//images/image">
     <image><xsl:value-of select="./@url"/></image>
     <title><xsl:value-of select="./title/node()"/></title>
     <description><xsl:value-of select="./description/node()"/></description>
     <caption><xsl:value-of select="./caption/node()"/></caption>
     <thumbnail><xsl:value-of select="./thumbnail/@url"/></thumbnail>
     <thumbnail_width><xsl:value-of select="./thumbnail/width/node()"/></thumbnail_width>
     <thumbnail_height><xsl:value-of select="./thumbnail/height/node()"/></thumbnail_height>
</xsl:template>    
</xsl:stylesheet>