Mitkees & Webcenter

Into the charm of Oracle Webcenter and ADF

Tag Archives: content presenter

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.

Content Presenter Taskflow does not render in webcenter Portal Template

My customer asked for new business requirement which to add a js carousel as a banner in the template.

this carousel aim to get images from webcenter content + render some html on it.

while implementing this requirement   it worked great in the edit mode of the template.but it didn’t render at all in view mode on the portal.

I have opened SR with oracle mentioning that the content presenter doesn’t work in templates view mode but it works in edit mode. the reply was content presenter is not designed to work in templates.

but i found a work around that we should not add  content and template in  the taskflow edit wizard itself . Instead we add the content & template  in the content presenter paramters.


DataSource: select * from cmis:document

Data Source Type: Query Expression

Template View ID :my_customCS_viewer

Also you may find more info that may help to meet your requriments in the below links


%d bloggers like this: