Image Gallery Options
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 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
Gallery-Only Editable Regions
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:
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.