E2.0 Workbench Podcast 5 – WebCenter Image Gallery with Content Presenter

June 7, 2011 by John Brunswick | 33 | Enterprise 2.0 Workbench, UCM, WebCenter

Whether within an extranet, intranet or public .com – image galleries are a popular feature on the web. With the release of WebCenter PS3, the Content Presenter capability allows design teams to create rich UIs for use by their business counterparts. In this installment of the Enterprise 2.0 Workbench, we examine on such rich template, which provides dynamic image gallery functionality within WebCenter.

Check out the images below and How it Works, Sample Code and Installing the Sample.

Figure 1 – List view of images selected individually or by way of a query. This will automatically size to the space within the WebCenter page.

Figure 2 – Detail view of a particular image using the magic of Fancybox

Figure 3 – Selection of images by “List of Items” method. The user could also perform a wide range of searches to populate the gallery dynamically.

How it Works

In this example our rich UI example will be making use of the following functionality provided by WebCenter

Powered via Content Presenter
Leverages Tumbnails via IBR
Renders on the screen in an order / format on the basis of available space (easy to fit into existing page and look good!)
JQuery / CSS based on FancyBox for maximum flexibility
Modal display of desired image
Users can add images to the system using Desktop Integration Suite
Comments field from UCM meta data used for image captions, defaults to Document Title when Comments field is empty

I have included both the Content Presenter Template, as well as the UCM assets needed to run this sample below.

Sample Code

Installing the Gallery

Special thanks to Kyle Hatlestad for creating this import bundle!

In UCM

Log into UCM and browse to Administration -> Site Studio Administration -> Backup and Restore.
For Archive Zip File, click Browse and select ‘Image_Viewer_CS_Archive.zip’.
Click ‘Upload Archive’.
On the Archive Information page, in the Actions menu select ‘Restore backup archive contents’

In WebCenter

Log into WebCenter
Head into Administration -> Resources
Under “Look and Layout”, Select “Content Presenter”
Click “Upload” and select the WebCenter_Image_Gallery.ear file
Head to the page you want to add it to and select files that are JPGs with thumbnails. Please note that these files cannot have the dispersion rule applied to them with the current path setup in the template (check disabling UCM disperssion). If your path to the images is different, please update the template.

Posts Related to E2.0 Workbench Podcast 5 – WebCenter Image Gallery with Content Presenter

29 comments 7 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

gudavies 5 pts

The following is an enhacement of the template.

Prereqs:

-Requires static renditions to be accessible, need config.cfg renditions for preview and thumbnail. You can just google that

-Requires dispersion to be turned off, kyle has an article on this

You'd replace the iterator code in the template with the below:

<af:iterator rows="0" var="node" varStatus="iterator" value="#{nodes}" id="it0">

<af:outputText escape="false" value="<a class="grouped_elements" title="#{node.propertyMap['xComments'] != 'xComments: ' ? node.propertyMap['xComments'].asTextHtml : node.propertyMap['dDocTitle'].value.stringValue}" rel="group" href="/cs/groups/#{fn:toLowerCase(node.propertyMap['dSecurityGroup'].value.stringValue)}/documents/#{fn:toLowerCase(node.propertyMap['dDocType'].value.stringValue)}/~extract/#{node.propertyMap['dDocName'].value.stringValue}~1~staticrendition/preview.gif">"/>

<af:image source="//cs/groups/#{fn:toLowerCase(node.propertyMap['dSecurityGroup'].value.stringValue)}/documents/#{fn:toLowerCase(node.propertyMap['dDocType'].value.stringValue)}/~extract/#{node.propertyMap['dDocName'].value.stringValue}~1~staticrendition/thumbnail.png" styleClass="gallery"/>

<af:outputText escape="false" value="</a>"/>

</af:iterator>

This allows any security group, or document type on checkin, also uses relative urls.It standardizes the thumbnail and enlarged size. The only remaining issue with this code, is if you put the image inside a space rather than any contribution folder, it requires the auth and account value to be dynamically set in the file path. I haven't worked out how to do string manipulation to make this dynamic. So this code only supports sourcing the presenter from any contribution folders.Also the folder must only contain images. If your images are in folders with mixed content or sub folders, you need to use a list rather than point presenter to a folder.

For convenience I've made a blog post about this as well:http://spiderwebcenter.blogspot.com.au/2012/02/enhancements-to-content-presenter-image.html

Feel free to further comment so maybe we can get the string manipulation for accounts to work. That way images could be sourced from any folder!