Article summary

Summary
Discusses how to create an Adobe Experience Manager gallery component that retrieves digital assets from the Experience Manager DAM. An example use case for this gallery component is a travel company that makes use of it within a Digital Marketing campaign.
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
JQuery, CSS, HTML
Version Experience Manager 5.5, 5.6

Introduction

You can create an interactive gallery component that lets your AEM users engage with your Experience Manager web site by viewing and clicking on images. When a user clicks on a thumbnail version of an image, a larger view of the image appears. In this use case, the component retrieves images from the Experience Manager Digital Asset Management (DAM) repository.

The Experience Manager DAM is a digital asset management tool that is fully integrated with the Experience Manager platform and enables your enterprise to share and distribute digital assets. Users across an organization can manage, store, and access images, videos, documents, audio clips, and rich media such as Flash files for use on the web, in print, and for digital distribution. For more information, see CQ Digital Asset Management.

Assume, for example, that you are developing a visual gallery component for a travel company interested in creating an online digital marketing campaign. The component lets visitors to the web site obtain an engaging experience by viewing different cruise images.

TravelComponent

Notice that this Experience Manager gallery component lets users scroll through cruise images. Once selected, the image populates the background of the Experience Manager page. Furthermore, users can browse different cruise categories. This development article guides you through how to build this Experience Manager gallery component.

Create an application folder structure

Your first step is to create an application folder structure that contains templates, components, and pages by using CRXDE Lite.  

CQAppSetup

This list describes each application folder:

  • Application name: Contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: Contains components that your application uses.
  • page: Contains page components. A page component is a script such as a JSP file.
  • global: Contains global components that your application uses (common may be a substitute for global).
  • templates: Contains templates that you can base page components on.
  • src: Contains source code that comprises an OSGi component (this example does not use an OSGi component).
  • install: Contains a compiled OSGi bundles container.

Create an application folder structure in CRXDE Lite by performing these tasks:

  1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter appDam.
  5. Repeat steps 1-4 for each folder specified in the previous illustration.
  6. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made. 

Create a template for the Gallery component 

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates

To create a template, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).

3. Right-click the template folder (within your application), select Create, Create Template.

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateGallery
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter appDam/components/page/templateGallery.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

6. Click Next for Allowed Parents.

7. Select OK on Allowed Children.

Create a render component that is based on templateGallery 

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).

3. Right-click /appDam/twitterGallery/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateGallery
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the templateGallery.jsp located at: /apps/appDam/components/page/templateGallery/templateGallery.jsp.

8. Enter the following JSP code.  

<html>
<head>
<title>AEM Gallery</title>
</head>
<body>
<h1>AEM Gallery!!!</h1>
<h2>This page will become a custom CQ gallery that retrieves assets from the AEM DAM</h2>
</body>
</html>

Upload the digital assets to the Experience Manager DAM 

Upload images that you use in your Experience Manager gallery component into the Experience Manager DAM. There are two files for each image: a thumbnail image and a large image. The pixel size of a thumbnail image is 180 (height) by 140 (width). Likewise, the pixel size of a large image is 1600 (height) by 1100 (width).

The images are organized into four categories:

  • Alaskan Cruise - contains images that promote an Alaskan cruise. The file name of these images are 1.jpg, 2.jpg, 3,jpg, 4, jpg, and 5.jpg.
  • Bahamas Cruise - contains images that promote a Bahamas cruise. The file name of these images are bh1.jpg, bh2.jpg, bh3,jpg, bh4, jpg, and bh5.jpg.
  • Caribbean Cruise - contains images that promote a Caribbean cruise. The file name of these images are cc1.jpg, cc2.jpg, cc3,jpg, cc4, jpg, and cc5.jpg.
  • Hawaiian Cruise - contains images that promote a Hawaiian cruise. The file name of these images are hc1.jpg, hc2.jpg, hc3,jpg, hc4, jpg, and hc5.jpg.

In each category, there are five images. That is, five thumbnail images and five large images. The larger images are stored in the following DAM location:

/content/dam/travel

Likewise, thumbnail images are stored in the following DAM location:

/content/dam/travel/thumbs

After you upload an image into the Experience Manager DAM, you can use it in a custom component. The following illustration shows the /content/dam/travel location.

AdobeDAM

To upload an image to the AEM DAM, perform these tasks:

1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).

3. In the Digital Assets folder, navigate to the location where you want to add digital assets.

4. Click New, New File to add digital assets.

5. Click Browse to locate the file and click Select. You can continue to upload multiple files. If you decide that you do not want to upload an asset, click Clear to delete it. (Internet Explorer users need to select files one by one by using the file dialog in order to upload multiple assets at the same time.)

6. Click Upload to upload the selected assets. 

Note:

If you are following along with this development article, you can use your own images to replace the travel images. Ensure that you set the pixel size of the thumbnail images and large images to the pixel size specified in this section. Also, place the images in the DAM location specified in this section.  

Add the JQuery Gallery API to a CQ:ClientLibraryFolder node 

You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.

In addition to the JQuery framework file, add the JQuery thumbnails navigation gallery library. This library enables you to create a widget that lets users scroll through thumbnail images and once a user clicks on an image, the image populates the background of the page.  

You can download the thumbnails navigation gallery JQuery library from the following URL:

http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/

Note:

The achive file has additional image files to upload to the DAM. Add these files to the content/dam/travel location: down.png, loader.gif, up.png, and pattern.png.

Download and extract the archive file. The custom gallery component uses these files from the archive file:

  • style.css
  • cufon-yui.js
  • Quicksand_Book_400.font.js

To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.

To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node. 

Name Type Value
dependencies  String[]  cq.jquery 
categories  String[]  jquerysamples 

The dependencies property informs AEM to include the CSS files and JQuery libraries in the page. The categories property informs which clientlibs must be included.

After you create the Clientlibs folder, add the stlye.css file, the JQuery library files, and two map text files. 

Text files
You have to add two text files to the clientlibs folder. These text files map to the JS files and the CSS file. The names of the text files are: css.txt and js.txt. The css.txt file contains the CSS file name: style.css. Likewise, the js.txt file contains the JS file names: jquery-1.6.3.min.js, cufon-yui.js, and Quicksand_Book_400.font.js.

Add the files to the ClientLibs folder

  1. Right-click /apps/appDam/components then select New, Node.
  2. Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
  3. Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
  4. On your file system, navigate to the folder where the JQuery JS files are located. Drag and drop the JS files to the clientlibs node by using CRXDE.
  5. On your file system, navigate where you placed the CSS files. Drag and drop the CSS files to the clientlibs folder by using CRXDE.
  6. Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.
  7. Add a TXT file to the clientlibs node named css.txt. Add the content specified in this section.

Modify the templateGallery component to use the JQuery thumbnail gallery API

Modify the templateGallery to use the JQuery thumbnail gallery API and reference the digital assets that you uploaded to the DAM. To reference a digital asset located in the DAM from your JSP, use the following URL:

/content/dam/travel/1.jpg

This URL references a large image named 1.jpg that is used to populate the background of the page. To reference the thumbnail image, use the following URL:

/content/dam/travel/thumbs/1.jpg

The following code represents the templateGallery.jsp file that contains JQuery thumbnail application logic.

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<html>
    <head>
        <title>CQ Thumbnails Navigation Gallery with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Thumbnails Navigation Gallery with jQuery and CSS3" />
        <meta name="keywords" content="jquery, thumbnails, gallery, menu, navigation, full page, background, image, photo, portfolio, photography"/>
        <script type="text/javascript">
            Cufon.replace('span,p,h1',{
                textShadow: '0px 0px 1px #ffffff'
            });
        </script>
        <style>
            span.reference{
                font-family:Arial;
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:11px;
            }
            span.reference a{
                color:#aaa;
                text-decoration:none;
                margin-right:20px;
            }
            span.reference a:hover{
                color:#ddd;
            }
        </style>
    </head>

    <body>
        <div id="st_main" class="st_main">
            <img src="/content/dam/travel/2.jpg" alt="" class="st_preview" style="display:none;"/>
            <div class="st_overlay"></div>
            <h1>CQ Image Component</h1>
            <div id="st_loading" class="st_loading"><span>Loading...</span></div>
            <ul id="st_nav" class="st_navigation">
                <li class="album">
                    <span class="st_link">Alaskan Cruise<span class="st_arrow_down"></span></span>
                    <div class="st_wrapper st_thumbs_wrapper">
                        <div class="st_thumbs">
                            <img src="/content/dam/travel/thumbs/1.jpg" alt="/content/dam/travel/1.jpg"/>
                            <img src="/content/dam/travel/thumbs/2.jpg" alt="/content/dam/travel/2.jpg"/>
                            <img src="/content/dam/travel/thumbs/3.jpg" alt="/content/dam/travel/3.jpg"/>
                            <img src="/content/dam/travel/thumbs/4.jpg" alt="/content/dam/travel/4.jpg"/>
                            <img src="/content/dam/travel/thumbs/5.jpg" alt="/content/dam/travel/5.jpg"/>
                            <img src="/content/dam/travel/thumbs/1.jpg" alt="/content/dam/travel/1.jpg"/>
                            <img src="/content/dam/travel/thumbs/2.jpg" alt="/content/dam/travel/2.jpg"/>
                            <img src="/content/dam/travel/thumbs/3.jpg" alt="/content/dam/travel/3.jpg"/>
                            <img src="/content/dam/travel/thumbs/4.jpg" alt="/content/dam/travel/4.jpg"/>
                            <img src="/content/dam/travel/thumbs/5.jpg" alt="/content/dam/travel/5.jpg"/>
                            <img src="/content/dam/travel/thumbs/1.jpg" alt="/content/dam/travel/1.jpg"/>
                            <img src="/content/dam/travel/thumbs/2.jpg" alt="/content/dam/travel/2.jpg"/>
                        </div>
                    </div>
                </li>
                <li class="album">
                    <span class="st_link">Bahamas Cruise<span class="st_arrow_down"></span></span>
                    <div class="st_wrapper st_thumbs_wrapper">
                        <div class="st_thumbs">
                          <img src="/content/dam/travel/thumbs/bh1.jpg" alt="/content/dam/travel/bh1.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh2.jpg" alt="/content/dam/travel/bh2.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh3.jpg" alt="/content/dam/travel/bh3.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh4.jpg" alt="/content/dam/travel/bh4.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh5.jpg" alt="/content/dam/travel/bh5.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh1.jpg" alt="/content/dam/travel/bh1.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh2.jpg" alt="/content/dam/travel/bh2.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh3.jpg" alt="/content/dam/travel/bh3.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh4.jpg" alt="/content/dam/travel/bh4.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh5.jpg" alt="/content/dam/travel/bh5.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh1.jpg" alt="/content/dam/travel/bh1.jpg"/>
                            <img src="/content/dam/travel/thumbs/bh2.jpg" alt="/content/dam/travel/bh2.jpg"/>
                        </div>
                    </div>
                </li>
                <li class="album">
                    <span class="st_link">Caribbean Cruise<span class="st_arrow_down"></span></span>
                    <div class="st_wrapper st_thumbs_wrapper">
                        <div class="st_thumbs">
                            <img src="/content/dam/travel/thumbs/cc1.jpg" alt="/content/dam/travel/cc1.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc2.jpg" alt="/content/dam/travel/cc2.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc3.jpg" alt="/content/dam/travel/cc3.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc1.jpg" alt="/content/dam/travel/cc3.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc4.jpg" alt="/content/dam/travel/cc4.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc5.jpg" alt="/content/dam/travel/cc5.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc1.jpg" alt="/content/dam/travel/cc1.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc2.jpg" alt="/content/dam/travel/cc2.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc3.jpg" alt="/content/dam/travel/cc3.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc4.jpg" alt="/content/dam/travel/cc4.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc5.jpg" alt="/content/dam/travel/cc5.jpg"/>
                            <img src="/content/dam/travel/thumbs/cc1.jpg" alt="/content/dam/travel/cc1.jpg"/>
                        </div>
                    </div>
                </li>
                <li class="album">
                    <span class="st_link">Hawaiian Cruise<span class="st_arrow_down"></span></span>
                    <div class="st_wrapper st_thumbs_wrapper">
                        <div class="st_thumbs">
                            <img src="/content/dam/travel/thumbs/hc1.jpg" alt="/content/dam/travel/hc1.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc2.jpg" alt="/content/dam/travel/hc2.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc3.jpg" alt="/content/dam/travel/hc3.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc5.jpg" alt="/content/dam/travel/hc5.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc1.jpg" alt="/content/dam/travel/hc1.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc2.jpg" alt="/content/dam/travel/hc2.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc3.jpg" alt="/content/dam/travel/hc3.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc5.jpg" alt="/content/dam/travel/hc5.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc1.jpg" alt="/content/dam/travel/hc1.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc2.jpg" alt="/content/dam/travel/hc2.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc3.jpg" alt="/content/dam/travel/hc3.jpg"/>
                            <img src="/content/dam/travel/thumbs/hc5.jpg" alt="/content/dam/travel/hc5.jpg"/>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="st_link">About the CQ gallery custom component<span class="st_arrow_down"></span></span>
                    <div class="st_about st_thumbs_wrapper">
                        <div class="st_subcontent">
                            <p>
                                This is an sample CQ custom image gallery component that retrieves digital assets from the Adobe CQ DAM. Such a component
                                could be used by a Travel company interested in creating an online Digital Marketing campaign 
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        
        <!-- The JavaScript -->
        <script type="text/javascript">
            $(function() {
                //the loading image
                var $loader     = $('#st_loading');
                //the ul element 
                var $list       = $('#st_nav');
                //the current image being shown
                var $currImage  = $('#st_main').children('img:first');
                
                //let's load the current image 
                //and just then display the navigation menu
                $('<img>').load(function(){
                    $loader.hide();
                    $currImage.fadeIn(3000);
                    //slide out the menu
                    setTimeout(function(){
                        $list.animate({'left':'0px'},500);
                    },
                    1000);
                }).attr('src',$currImage.attr('src'));
                
                //calculates the width of the div element 
                //where the thumbs are going to be displayed
                buildThumbs();
                
                function buildThumbs(){
                    $list.children('li.album').each(function(){
                        var $elem           = $(this);
                        var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
                        var $thumbs         = $thumbs_wrapper.children(':first');
                        //each thumb has 180px and we add 3 of margin
                        var finalW          = $thumbs.find('img').length * 183;
                        $thumbs.css('width',finalW + 'px');
                        //make this element scrollable
                        makeScrollable($thumbs_wrapper,$thumbs);
                    });
                }
                
                //clicking on the menu items (up and down arrow)
                //makes the thumbs div appear, and hides the current 
                //opened menu (if any)
                $list.find('.st_arrow_down').live('click',function(){
                    var $this = $(this);
                    hideThumbs();
                    $this.addClass('st_arrow_up').removeClass('st_arrow_down');
                    var $elem = $this.closest('li');
                    $elem.addClass('current').animate({'height':'170px'},200);
                    var $thumbs_wrapper = $this.parent().next();
                    $thumbs_wrapper.show(200);
                });
                $list.find('.st_arrow_up').live('click',function(){
                    var $this = $(this);
                    $this.addClass('st_arrow_down').removeClass('st_arrow_up');
                    hideThumbs();
                });
                
                //clicking on a thumb, replaces the large image
                $list.find('.st_thumbs img').bind('click',function(){
                    var $this = $(this);
                    $loader.show();
                    $('<img class="st_preview"/>').load(function(){
                        var $this = $(this);
                        var $currImage = $('#st_main').children('img:first');
                        $this.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){
                            $(this).remove();
                        });
                    }).attr('src',$this.attr('alt'));
                }).bind('mouseenter',function(){
                    $(this).stop().animate({'opacity':'1'});
                }).bind('mouseleave',function(){
                    $(this).stop().animate({'opacity':'0.7'});
                });
                
                //function to hide the current opened menu
                function hideThumbs(){
                    $list.find('li.current')
                         .animate({'height':'50px'},400,function(){
                            $(this).removeClass('current');
                         })
                         .find('.st_thumbs_wrapper')
                         .hide(200)
                         .andSelf()
                         .find('.st_link span')
                         .addClass('st_arrow_down')
                         .removeClass('st_arrow_up');
                }

                //makes the thumbs div scrollable
                //on mouse move the div scrolls automatically
                function makeScrollable($outer, $inner){
                    var extra           = 800;
                    //Get menu width
                    var divWidth = $outer.width();
                    //Remove scrollbars
                    $outer.css({
                        overflow: 'hidden'
                    });
                    //Find last image in container
                    var lastElem = $inner.find('img:last');
                    $outer.scrollLeft(0);
                    //When user move mouse over menu
                    $outer.unbind('mousemove').bind('mousemove',function(e){
                        var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
                        var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
                        $outer.scrollLeft(left);
                    });
                }
            });
        </script>
    </body>
</html>

Modify the templateGallery file

  1. To view the CQ welcome page, enter the URL: http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite (If you are using AEM 5.6, click Tool in the left menu).
  3. Double-click apps/appDam/components/page/templateGallery/templateGallery.jsp.
  4. Replace the JSP code with the new code shown in this section.
  5. Click Save All.

Create an AEM web page that displays the custom image gallery component

The final task is to create a site that contains a page that is based on the templateGallery (the template created earlier in this development article). When the user selects opens a category, scrolls through the images retrieved from the DAM, and clicks on an image, the larger version of the image populates the page background. 

 

TravelComponent2

Create a web page that displays the custom image gallery component:

  1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.
    Select Websites. (If you are using AEM 5.6, click Tools from the menu on the left.)
  2. From the left hand pane, select Websites.
  3. Select New Page.
  4. Specify the title of the page in the Title field.
  5. Specify the name of the page in the Name field.
  6. Select templateGallery from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.
  7. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser. You should see a page similar to the previous illustration.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy