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.
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
- 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’
- 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.
[…] FancyBox plugin can help create engaging user experiences and was used in the podcast E2.0 Workbench Podcast 5 – WebCenter Image Gallery with Content Presenter with a hardcoded the MIME type for the image as follows to get around the parameter / dynamic URL […]