Screencast 5 – WebCenter Image Gallery with Content Presenter

46
7 Flares 7 Flares ×
Subscribe to this Podcast on iTunes

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

  1. Powered via Content Presenter
  2. Leverages Tumbnails via IBR
  3. Renders on the screen in an order / format on the basis of available space (easy to fit into existing page and look good!)
  4. JQuery / CSS based on FancyBox for maximum flexibility
  5. Modal display of desired image
  6. Users can add images to the system using Desktop Integration Suite
  7. 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
  1. Log into UCM and browse to Administration -> Site Studio Administration -> Backup and Restore.
  2. For Archive Zip File, click Browse and select ‘Image_Viewer_CS_Archive.zip’.
  3. Click ‘Upload Archive’.
  4. On the Archive Information page, in the Actions menu select ‘Restore backup archive contents’
In WebCenter
  1. Log into WebCenter
  2. Head into Administration -> Resources
  3. Under “Look and Layout”, Select “Content Presenter”
  4. Click “Upload” and select the WebCenter_Image_Gallery.ear file
  5. 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.

Related Articles

Post comment as twitter logo facebook logo
Sort: Newest | Oldest
rajchwdry 5 pts

Hi Jhon,

 

Thanks a lot for the article .i am new to webcenter.

 

the resources specified in  the template are available as default are do i need to download and install in UCM server

 

   <af:resource type="javascript" source="http://owcdemo03/cs/groups/public/documents/document/mdaw/mdex/~edisp/jquery.min.js"/>    <af:resource type="javascript" source="http://owcdemo03/cs/groups/public/documents/document/jquery.fancybox-1.3.4.js"/>    <af:resource type="javascript" source="http://owcdemo03/cs/groups/public/documents/document/jquery.easing-1.3.pack.js"/>    <af:resource type="css" source="http://owcdemo03/cs/groups/public/documents/document/jquery.fancybox-1.3.4-css.css"/>

 

Thanks

Raj

 

John Brunswick 8 pts moderator

@rajchwdry Hey Raj, Sorry for the delay - you will need to download those files and make them available for the template. Hope that helps! Best, John

rajchwdry 5 pts

 John Brunswick  rajchwdry 

Thanks   Jhon  i downloaded and installed  .

I uploaded the Image_Viewer_CS_Archive.zip to my ucm servers  but i am not able to see the images as shown in the figure 2.

I uploaded the   template(image-viewer.jsff)  to server but still not able to see the images.

Let me know   how to resolve this .

 

John Brunswick 8 pts moderator

 rajchwdry thanks - you will need to simply search for the files, as they are probably not associated with a folder in UCM.  You can setup your own folder and upload some samples in there to try as well.

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!

sajeertk 5 pts

Hi John

I tried this and working fine.... but one issue

when I am using this content presenter in my spaces application, it working fine only if I am logged into UCM otherwise the images are not coming. I am using the URL

http://wc03:16200/cs/idcplg?IdcService=GET_FILE&amp;dDocname=#{node.propertyMap['dDocTitle'].value}&amp;dID=#{node.propertyMap['dID'].value}&amp;Rendition=Thumbnail&amp;RevisionSelectionMethod=Specific&amp;noSaveAs=1

for image source. How can I use IdcService from Spaces using configured UCM connection(something like http://wc01:8888/webcenter/spaces/idcplg?IdcService=GET_FILE......) instead of using UCM server URL directly(something like http://wc03:16200/cs/idcplg?IdcService=GET_FILE......)

John Brunswick 8 pts moderator

sajeertk For your Spaces deployment, are your users trying to view the gallery anonymous or authenticated?

You should be able to use either approach to get the image file. If you go the idcService route, make sure to use the argument to get the "LatestReleased", as that will ensure you pull the latest version of the image (http://download.oracle.com/docs/cd/E14571_01/doc.1111/e11011/c05_core006.htm#BABFDEFH).

You may also want to consider taking a look at using Web Mapped Folders (http://blogs.oracle.com/kyle/entry/web_url_mapped_folders_exposed) for easier management of the images. That would provide a direct web link that is perhaps a bit nicer to access via URL and manage authentication around.

Cheers,

John

sajeertk 5 pts

John Brunswick Thanks John

Yes, only authenticated users will view the gallery.

My doubt was about the URL. What URL should I append before the IdcService request (idcplg?IdcService=GET_FILE&dDocname=#..) if I am using the UCM connection which I configured in Spaces

If I am using this content presenter in my Spaces I want to use the same UCM connection which I have configured with Spaces other than directly connecting to UCM server. My question is about the URL part which I marked with 'Question Mark'

????/idcplg?IdcService=GET_FILE.....

I tried something like http://wc01:8888/webcenter/content/conn/ucm_conn/idcplg?IdcService=GET_FILE&dDocname=...... but it is not working, here ucm_conn is the connection name used in Spaces for UCM connection

Problem faced with the url

http://wc03:16200/cs/idcplg?IdcService=GET_FILE&dDocname is, I need a separate authenticated session for UCM other than my authenticated session for Spaces

sama 5 pts

 sajeertk hello sajeertk ,

i faced the same problem and its solved by using this link

 

href="#{node.url}&dID=#{node.propertyMap['dID'].value}&dDocName=OWCVM03_#{fn:toLowerCase(node.id.uid)}&allowInterrupt=1&ext=.jpg">"/> 

al.nobi 5 pts

Hi John

I followed the steps you mentioned and just changed image path for thumbnails and actual images. Thumbnails look good, but when I click on any of them, image is showing on a new tab, not on slide show widget!

Do you have any idea?

Cheers

Al

al.nobi 5 pts

It actually goes to the next page and shows the full size image.

John Brunswick 8 pts moderator

al.nobi Hey Al,

That means that the JavaScript is not handling the client event.

The following lines in the Content Presenter Template

<script type="text/javascript">$(document).ready(function() {$("a.grouped_elements").fancybox({.... etc etc....

Will add events to hrefs on the page that are of the class grouped_elements

Can you turn on FireBug or Chrome to see if you are getting any JS errors or getting a 404 or 401 error on any of your JS files?

Once you have the JS sorted out, it should load up within the modal window :-)

Cheers,

John

al.nobi 5 pts

John Brunswick

Thanks for your instant reply. All JSs are fine (code:200) according to Firebug.

Does it matter if I set image path like this?:

.......href="http://myserver.com/get/#{fn:toLowerCase(node.id.uid)}">

John Brunswick 8 pts moderator

al.nobi Al,

Is that the code that is showing in the final HTML that is sent to the client (e.g. are you showing me source or the result of an executed page)? If you can send me the final HTML markup that comes back to the client that is the easiest place to look for an issue.

Another good troubleshooting method is to use an example from FancyBox http://fancybox.net/blog to see if you can get a non-dynamic example to work (essentially, a very simple version of the page). If you cannot get the non-dynamic example to work there may be some other issues.

Either way, it is good that you can see the image when clicking, which verifies the image exists - but the click event is not being picked up by the code that allows the image to be displayed in the FancyBox modal window.

Keep me posted and feel free to drop me a line directly.

Cheers,John

al.nobi 5 pts

John Brunswick Can I have your email to send HTML directly there?

Cheers

Al

John Brunswick 8 pts moderator

Hey Al,

Connect with me on http://www.linkedin.com/in/johnbrunswick and I will send you my details to connect and offer insight into why it may not be working.

Cheers,John

gudavies 5 pts

 al.nobi Make sure to test this on an empty page first, maybe other JS on your page conflicts. Try it in composer mode, does it work there but not on the normal page display? If yes it's code conflict.

al.nobi 5 pts

Hi John

Where can I find CP_Editing.htm file?

Cheers

Al

John Brunswick 8 pts moderator

al.nobi Hey Al,

The source of the CP_Editing.htm file ends up providing the code for the Content Presenter template that is located in the http://www.johnbrunswick.com/downloads/sourcecode/WebCenter_Image_Gallery.ear archive in the image-viewer.jsff file.

Sorry for any confusion! I must have been editing the source a bit before finalizing the source for the download package :-)

Cheers,John

atrosson 5 pts

Hi John.

I also get a 404 on the .ear file download. http://www.johnbrunswick.com/downloads/WebCenter_Image_Gallery.ear

Cheers

A.

atrosson 5 pts

... whoops, which I figured out as http://www.johnbrunswick.com/downloads/sourcecode/WebCenter_Image_Gallery.ear

Great tutorial by the wau. Keep it up, looking forward to more :-)

Cheers

A.

SplashFantastic 5 pts

Hi John, I am getting a 404 when trying to download the UCM import bundle (http://www.johnbrunswick.com/downloads/Image_Viewer_CS_Archive.zip).

John Brunswick 8 pts

SplashFantastic Splash,

Thanks for catching this! The link above has been updated to the correct path. Please try - http://www.johnbrunswick.com/downloads/sourcecode/Image_Viewer_CS_Archive.zip

Cheers,

John

gudavies 5 pts

To get it to work I had to append "~edisp/" to the full view url in the template inside the ear bundle.

Great bundle thanks a lot this saved me heaps of time.

sama 5 pts

thanks a lot for this wonderful template, but i have two problems :

1) the comments never appear also if the image has comment in UCM . always the title appear

2) the image always appear in small size , even if the user click on it , it is related to IBR ??

John Brunswick 8 pts moderator

sama Thanks Sama!

1. Can you see what you have in the XML that represents the document in UCM for the comment? You should see a node in the XML that is xComments if you open the image in UCM and within the Content Information tab append "&IsSoap=1". This will return the XML that represents what is stored in UCM. Additionally, I have found the UI for Content Presenter to cache aggressively, so you may want to try restarting your service if the Comment information is not showing up if you have confirmed that it exists in the XML.

URL Example - http://mycontentserver/cs/idcplg?IdcService=DOC_INFO&dID=38633&dDocName=OWCVM03_022433?IsSoap=1

2. Your IBR may be correct regarding IBR. Are the images you are uploading large to start?

Hope that helps!

Cheers,

John

sama 5 pts

John Brunswick

the comment issue is solved :)

its appear now successfully .

but about the images size ,yes i uploading the images in larg size ,

my IBR server is working well ,but the images still appear in their normal size not as thumbnail size , and if i put "Rendition=Thumbnail" in template code so no image will appear :(

what i understand from you template , the images must be converted by IBR server then the thumbnail will displayed , when user click on image the normal size must appear , its right ???

John Brunswick 8 pts moderator

sama Hey Sama,

If you are looking at the content item in UCM, do you have anything under the Renditions tab? The list there holds what Content Presenter will use to display the thumbnails. You may have to check those URLs and update Content Presenter to use one of those URLs with your content ID.

Cheers,

John

sama 5 pts

John Brunswick

thanks alot jhon , now i have a different case , i want the following :

when the user click on the image to its folder from UCM , is it doable ??

how can i pass the value of xCollectionID to my custom content presenter template ?

do you have any idea ??

sama 5 pts

John Brunswick

please john i need your help , why the template is lost its appearance after i click in another page then back to it ??

i need to refresh it then its will turn back to good functionality and appearance .

is there any way to prevent that ??

is there an way to force the page to refresh when invoke it ?

John Brunswick 8 pts moderator

samaJohn Brunswick Hey Sama,

It sounds like your JS / CSS supporting files are not loading, which is not directly related to the template.

If you open FireBug / Chrome's developer tools - do you see any errors related to the JS / CSS files not downloading?

Also, can you be a bit more specific around what in the appearance is changing?

Thanks!

John

sama 5 pts

John Brunswick when i navigate between the pages then turn to the page which contains this content presenter , all the css disappeared :S

its appear only as image without any functionality of this template , when i refresh the page then every thing appear normal , but i cant force the user to refresh the page to let him see the right template !!

sama 5 pts

John Brunswick no errors appear :(

any help is so appreciated ..

sama 5 pts

John Brunswick i can solve thaaaaaaaaaaaaaaaaat !!! its so silmple solution just i check box or redirect in navigation and its work good now :)

John Brunswick 8 pts moderator

sama Glad to hear it is sorted :-) Yes - if you are using navigation models that checkbox is definitely important!

sama 5 pts

 John Brunswick  sama 

hello ,

please i want to know how i can let the link

 

<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="http://owcvm03/cs/groups/public/documents/image/#{fn:toLowerCase(node.id.uid)}.jpg">"/>

 

be dynamically ???

because  i checked images in different locations "folder" with different groups and accounts , so the path will be different

 

 

 

John Brunswick 8 pts moderator

 sama Hey Sama,

 

Take a look at the following which addresses that issue - http://www.johnbrunswick.com/2012/04/webcenter-content-and-sites-dynamic-parameter-image-urls-fancybox-fix/

 

You can then select any number of items from various locations in the content presenter UI and they should render as intended.

 

Hope that helps!

 

Cheers,

John

sama 5 pts

 John Brunswick 

Thanks a lot John , You are wonderful !!

 

its work now i used this link :

http://owcvm03/cs/idcplg?IdcService=GET_FILE&dID=#{node.propertyMap['dID'].value}&dDocName=OWCVM03_#{fn:toLowerCase(node.id.uid)}&allowInterrupt=1&ext=.jpg"

 

and my problem is now solved :) :)

 

John Brunswick 8 pts moderator

 sama Great!  Best wishes with your project.

 

Cheers,

John

sama 5 pts

 John Brunswick 

hello ,

please i need to display CollrctionID under each image , how can i do it ??

i used " <af:outputText value="#{node.propertyMap['xCollectionID'].value}"/> " but its not work !! even i use the exact statment on another Spaces and UCM servers and its work !!

is there any additional configuration i must do ??

John Brunswick 8 pts moderator

 sama Hey Sama,

 

Did you manage to solve this?

 

I have not attempted to use the CollectionID with Content Presenter.  I am on the road this week between a few cities, but can definitely try once I am settled.  Hope that it is not too urgent.

 

Cheers,

John

Trackbacks

  1. [...] 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 [...]