Image Gallery Options

Overview

LDP Image Galleries are centrally managed assets that can be used across sites within an account, within a site on multiple pages, and even on a page with different styling for each gallery type. This can be accomplished with the same image gallery asset, and using different gallery types configured in the XSL. The gallery types are options presented to a user, usually in the form of a page parameter. 

The basic sequence of events is that an asset is created, then a page subscribes to an asset, and the page will have already had a page parameter is selected for the gallery type. The XML node structure of the asset replaces asset tag upon transformation. The templates for a site should include a properties/parameter that creates the options from which a user can choose. In the corresponding XSL, an XSL conditional includes the calls to the resource files (CSS and JS) for each option and based on the selection through a PCF's page parameters, the appropriate gallery styling is used for the page transformation. When an LDP gallery node is found the appropriate template is called and this outputs the necessary HTML for that gallery type.

Image Gallery Graphic

 

Image Gallery Assets, Editable Regions, and Templates

An Image Gallery Asset can be added to a page within an existing editable region, or a new editable region can be created whereby only an asset can be inserted on a page. The two methods are compared and contrasted below.

Within Existing Editable Regions

The user utilizes the Insert/Edit Asset icon on the WYSIWYG toolbar and is able to insert a gallery anywhere into the editable region. Note that the Insert/Edit Asset tool must be available in the WYSIWYG toolbar (as it can be omitted from custom-created toolbars). For a PCF, this requires an additional XSL declaration with the JavaScript necessary to render the desired gallery type. This can be added to the XSL files that are being utilized with the PCFs in which the gallery is desired. For example, a new image-gallery.xsl can be created that includes the necessary styling calls, and the standard page XSL(s) can call the new XSL. For a non-PCF file, only the JavaScript is required.

Gallery-Only Editable Regions 

An alternative is to create an editable region where only an Image Gallery Asset can be inserted. This should be done on a page-by-page basis rather than adding it to a template. In other words, a PCF can be updated to have a specific editable region for the gallery placement. This produces an editable region that only permits the selection of a gallery and has no other editable content. This requires that the <editor> tag for the editable region include wysiwyg="galleries".  Additionally, for PCF files, this requires an additional XSL declaration with the JavaScript necessary to render the desired gallery type be added to the XSL files that are being utilized with the PCFs in which the gallery is desired. For non-PCF files, only the JavaScript and new editable region are required.

Page Parameter Options 

Another way to implement a choice of image galleries is to include the galleryType page parameter, which presents the options for easy user-selection. For example:

<parameter
name="galleryType"
type="select"
group="Everyone"
prompt="Gallery Type"
alt="Please select the type of gallery you would like this page to use."> <option value="1" selected="true">Orbit Slider</option> <option value="2" selected="false">Pretty Photo Thumbnails</option> </parameter>

As with the above editable region methods, it is required that the corresponding XSL declarations be coded as the value specified by the option choice gets passed to the XSL, which uses an XSL conditional, such as an <xsl:choose>, and a function to call the correct scripts in order to provide the transformation for the desired image gallery. For example, for a flex slider, the flexslider.css and the flex-caption.css provides the styling for the images and script is populated to the footer code for the output, and the jQuery flexslider.js script is also used to define the actions for the element.