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.
John BrunswickahmugHi John, thanks for your reply. But I am sorry I am a newbie in WebCenter so I am not so familiar with how to create a new CP template. Would you please kindly give me some hints? Thanks a lot!
ahmug I suspect that the new version may have slightly different packaging. I would recommend creating a new CP template and then using the above code. I am at Salesforce.com now and will not be updating it to the 11.1.1.8 release, but I hope this helps. Thanks!
Hey Ahmug, I would suggest creating a new CP template from the code above with 11.1.1.8. I have not tried it, but would suspect the packaging format may have changed. Please feel free to leverage the above code, but I am at Salesforce.com now and will not be updating to the newer WebCenter version. Hope that helps. Thanks!
Hi John, we are using webcenter portal 11.1.1.8 version, finished step in UCM and proceed to step in WebCenter but it displayed error message "Unable to upload the asset as the archive does not contain an asset that belongs to this portal" when I uploaded file "WebCenter_Image_Gallery.ear" to the system. Would you please help? Thanks.
Hi John , Its really wonderful blog ,I am using JDev 11.1.1.7 I am developing a WebCenter Portal POC. I have an URL issue in rendering Site Studio data file image on WebCenter Portal page The below is the snippet for that image source which is the WebCenter Content Repository <af:image source="#{node.propertyMap['TXT_IMG_RD_UCMSITE:ImageED'].url}" id="i33" /> where "'TXT_IMG_RD_UCMSITE" is my Region Def and "ImageED'" is my Image Element Def in the Site Studio Data file respectively ,where as if I print the source url of the image in the output text it gives an URL where I can access that image from the browser with its URL ,but in the Portal App it is not rendered Please kindly help me in fixing the issue. While I am able to reneder the Plain Text element definition of the same site studio data file except the images and WYSIWYG type of Element Def's in the data files. Best Regards, Dhananjaya
John Brunswick Hi john hi john can help me to provide a reference on how to change the default template of spaces in accordance with the desired requiement / same as the template you show above Since I did not find any reference to this problem thanks in advance Hito
@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.
@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.
@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 .
@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
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=""/> <af:resource type="javascript" source=""/> <af:resource type="javascript" source=""/> <af:resource type="css" source=""/> Thanks Raj
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!
@sama Glad to hear it is sorted :-) Yes - if you are using navigation models that checkbox is definitely important!
@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 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@John 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
@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 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 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
@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@sama 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 ???
@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
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 @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="{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
@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
@John Brunswick Thanks a lot John , You are wonderful !! its work now i used this link : {node.propertyMap['dID'].value}&dDocName=OWCVM03_#{fn:toLowerCase(node.id.uid)}&allowInterrupt=1&ext=.jpg" and my problem is now solved :) :)
@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 ??
@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
@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
@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
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&dDocname=#{node.propertyMap['dDocTitle'].value}&dID=#{node.propertyMap['dID'].value}&Rendition=Thumbnail&RevisionSelectionMethod=Specific&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......)
@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">"/>
@sajeertk use #{node.url.downloadUrl} or #{node.url} http://docs.oracle.com/cd/E21764_01/webcenter.1111/e10148/jpsdg_content_presenter.htm#JPSDG7552 fix to double login
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
@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
@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 Thanks for your instant reply. All JS are fine (code:200) based on Firebug. Does it matter if I set image path like this: .......href="http://myserver.com/get/#{fn:toLowerCase(node.id.uid)}">
@al.nobi Hey Al, That means that the JavaScript is not handling the client event. The following lines in the Content Presenter Template $(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
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 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
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.
... 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.
Hi John. I also get a 404 on the .ear file download. http://www.johnbrunswick.com/downloads/WebCenter_Image_Gallery.ear Cheers A.
@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
[…] 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 […]