Mitkees & Webcenter

Into the charm of Oracle Webcenter and ADF

Create image gallery in webcenter portal using content presenter templates

Best way to  develop Image gallery for  webcenter portal

1- Create a folder in UCM

2- Upload your Images under  this folder

3- create a content presenter template that use css & jquery .. I used fancy box component for the image gallery.

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:af="" xmlns:dt="" xmlns:f="" xmlns:c="" xmlns:fn="" xmlns:ui="">

<af:resource type="css" source="/../fancybox/jquery.fancybox.css"/>
<af:resource type="javascript" source="/../fancybox/jquery.fancybox.js"/>
<af:resource type="javascript" source="/../fancybox/jquery.fancybox.pack.js"/>
<af:resource type="javascript" source="/../fancybox/jquery.mousewheel-3.0.4.pack.js"/>
<af:resource type="css">
#content {
width: 400px;
margin: 40px auto 0 auto;
padding: 0 60px 30px 60px;
border: solid 1px #cbcbcb;
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;

h1 {
margin: 30px 0 15px 0;
font-size: 30px;
font-weight: bold;
font-family: Arial;

h1 span {
font-size: 50%;
letter-spacing: -0.05em;

hr {
border: none;
height: 1px; line-height: 1px;
background: #E5E5E5;
margin-bottom: 20px;
padding: 0;

p {
margin: 0;
padding: 7px 0;

a {
outline: none;
} {
border: 1px solid #BBB;
padding: 2px;
margin: 10px 20px 10px 0;
vertical-align: top;

a img.last {
margin-right: 0;

ul {
margin-bottom: 24px;
padding-left: 30px;
<dt:contentListTemplateDef var="nodes">
<af:popup id="cpPopup" eventContext="launcher" contentDelivery="lazyUncached" launcherVar="source">
<af:setPropertyListener type="popupFetch" from="#{node}" to="#{requestScope.oracleCPPopupCurrentNode}"/>
<af:noteWindow id="cpNw">
<dt:contentTemplate node="#{requestScope.oracleCPPopupCurrentNode}" view="oracle.webcenter.content.templates.default.document.details" nodesHint="#{nodes}" id="ctmv1"/>
<af:panelGroupLayout id="images-wrapp" styleClass="images-wrapp">
<af:iterator rows="0" var="node" varStatus="iterator" value="#{nodes}" id="it0">
<af:panelGroupLayout id="imageitem" styleClass="image-item">
<af:outputText escape="false" value="&lt;a class=&quot;grouped_elements&quot; title=&quot;#{node.propertyMap['xComments'] != 'xComments: ' ? node.propertyMap['xComments'].asTextHtml : node.propertyMap['dDocTitle'].value.stringValue}&quot; rel=&quot;group&quot; href=&quot;#{WCAppContext.applicationURL}/../cs/idcplg?IdcService=GET_FILE&amp;dID=#{node.propertyMap['dID'].value}&amp;dDocName=OWCVM03_#{fn:toLowerCase(}&amp;allowInterrupt=1&amp;ext=.jpg&quot;>"/>
<af:image source="#{WCAppContext.applicationURL}/../cs/idcplg?IdcService=GET_FILE&amp;dDocName=#{node.propertyMap['dDocTitle'].value}&amp;dID=#{node.propertyMap['dID'].value}&amp;RevisionSelectionMethod=specific&amp;Rendition=Preview&amp;allowInterrupt=1" styleClass="gallery"/>
<af:outputText escape="false" value="&lt;/a>"/>

5- add content presenter to your page where the content is “content under folder”& template the one created in the step above.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: