Home → Velocity Formats →

Creating a responsive gallery using Velocity.

• Edit

matthew.wren

26 Aug, 2013 07:51 PM

We just underwent a responsive redesign of our web site and I created a responsive gallery locally on my computer [see attachment] and want to implement it into our site using Velocity. I want to become more familiar with Velocity and this seems like it may be a good place to start learning.

I created head-tags that contain the css and footer-tags for the javascript to be included on any page that this gallery will be used. I tried thinking what the best method to use to populate the gallery and I think using an index block and a script format to pull the images from a folder might be the easiest to manage (if there's a more intuitive way than this I am all ear).

I've seen this done before with XSLT but is there an advantage of making this script with Velocity? Either way, I don't know quite know where to start.

//side note
Out of curiosity, is something like this possible with a brick? It was recently announced and I don't know how much it is capable of doing yet. It would be great to just add a gallery using any WYSIWYG.

• slider-gallery.zip 2.26 MB

1. 1 Posted by matthew.wren on 19 Sep, 2013 01:05 PM

   

   just checking in on this one.

   • Edit

2. 2 Posted by Ryan Griffith on 19 Sep, 2013 01:42 PM

   

   Hi Matthew,

   Your solution to use an Index Block would probably be the simplest to maintain and easiest for your end users, this would allow you to easily create/delete images for the slider (ie the "slides").

   As for whether to use XSLT or Velocity, this is really up to what you prefer to use since this should be doable in both types of Formats. If you needed to add additional JavaScript, Velocity may be a bit easier since it's less restrictive on the produced content (ie valid XML) and using code sections is a bit simpler.

   Out of curiosity, is something like this possible with a brick? It was recently announced and I don't know how much it is capable of doing yet. It would be great to just add a gallery using any WYSIWYG.

   You could probably do something similar using Velocity. Theoretically, you could enter something like {slider blockID="INDEX_BLOCK_ID"} and use Velocity to generate the content. Your code could grab the value of the blockID parameter and use the new Locator Tool to find the associated block and loop over it's content.

   Please let me know if you have any questions.

   Thanks!

   • Edit

3. 3 Posted by matthew.wren on 20 Sep, 2013 01:02 PM

   

   I haven't used Velocity yet so I don't know what a good jumping off point is. Where would I start and what tools would I need to use to pull this off?

   • Edit

4. 4 Posted by matthew.wren on 02 Oct, 2013 02:07 PM

   

   I know you're busy but just wondering about this. I still like to try more Velocity because it seems to be easier to manage but I'm not familiar with it.

   • Edit

5. 5 Posted by Ryan Griffith on 02 Oct, 2013 05:45 PM

   

   Not a problem, Matthew.

   So let's assume you have an Index Block set up to index a Folder of images and these images have a summary metadata field available for a slide caption. The following Velocity should generate the HTML from the sample you provided above:

   #set ( $slides = $_XPathTool.selectNodes($contentRoot, "//system-file"))
   #if ($slides.size() > 0)
   <!-- HTML for Gallery -->
   <div class="callbacks_container">  
     <ul class="rslides" id="slider4">
     #foreach ($slide in $slides)
       <li>
         <img src="${slide.getChild("link").value}" alt="${_EscapeTool.xml($slide.getChild("summary").value)}">
       </li>
      #end
     </ul>
   </div>
   <!-- END HTML for Gallery -->
   #end
   

   Note: this assumes you are already including the required CSS and JS for the slider within the page.

   Please let me know if you have any questions.

   Thanks!

   • Edit

6. 6 Posted by matthew.wren on 09 Oct, 2013 01:04 PM

   

   I believe I have everything in place to test out the gallery but when I apply everything to a page I get an error dealing with an unclosed img attribute. There wasn't a `/>` in the img attribute so I added it and it still comes up with this error. Is this error occuring in the Velocity script?

   • Screen_Shot_2013-10-09_at_9.01.32_AM.png 41.3 KB
   • Edit

7. 7 Posted by Ryan Griffith on 09 Oct, 2013 01:48 PM

   

   Hm, it could possibly be an issue with the alt attribute. Try removing the attribute from the image tag and see if you still get the error message.

   • Edit

8. 8 Posted by matthew.wren on 10 Oct, 2013 03:47 PM

   

   That did the trick! Thanks! It seems to work really well now and is really easy to use on just about any page I can think of. I am noticing one little thing about it that I'm hoping is just a little fix.

   We have 4 DEFAULT Regions on our template and I've been putting the gallery in the one right after the page's content that's outputted by a format. Someone wants their gallery at the top of the page so when I put the gallery in the first DEFAULT region and the format to display the content of the WYSIWYG in the next one.

   For some reason this causes the content below it to disappear.

   Also I remember mentioning something about possibly being able to embed a gallery into anywhere on the page using WYSIWYG. Is this possible/feasible? could provide a lot more flexibility depending on what the client wants.

   • first.png 733 KB
   • first-configs.png 110 KB
   • second.png 718 KB
   • second-config.png 109 KB
   • Edit

9. 9 Posted by matthew.wren on 16 Oct, 2013 01:34 PM

   

   That did the trick! works almost like a charm! There's just one thing I'm noticing and I can't tell if it because of the gallery.

   On many pages we have a format that pulls the main content in the first DEFAULT Region so I've been putting the gallery in the DEFAULT2 regions and that's no problem. The problem comes in when I try putting the gallery in the FIRST region. I'll put in the DEFAULT region and it works but when I put the format that pulls the page's content in the other DEFAULT regions it won't display the content.

   Think this problem is from the gallery?

   • Edit

10. 10 Posted by Ryan Griffith on 16 Oct, 2013 01:54 PM

    

    Hi Matthew,

    It sounds as though you are not applying a Calling Page Index Block along with your page content Format. With the DEFAULT region, you can leave out this Index Block because we assume leaving out a block within the region means you want the calling page data. When you move to a different region, you will need to apply an Index Block so the Format has access to the calling page's data.

    Please let me know if you have any questions.

    Thanks!

    • Edit

11. 11 Posted by matthew.wren on 16 Oct, 2013 02:41 PM

    

    OH I understand. That makes a lot of sense. I created a Calling Page Index Block but it still outputs a bit of XML into the main content area. Should I alter my index block?

    • Screen-Shot-2013-10-16-at-10.31.jpg 134 KB
    • Screen_Shot_2013-10-16_at_10.35.01_AM.png 56.1 KB
    • Edit

12. 12 Posted by Ryan Griffith on 16 Oct, 2013 03:25 PM

    

    You will need to alter the Format that generates your main content because the XML applied to the Format has changed due to the Index Block.

    • Edit

13. Ryan Griffith closed this discussion on 22 Oct, 2013 08:47 PM.

14. matthew.wren re-opened this discussion on 24 Jul, 2014 03:51 PM

15. 13 Posted by matthew.wren on 24 Jul, 2014 03:51 PM

    

    I have another question about this gallery. I'm trying to see how well it would work as its own data definition field because I know a lot of our users will be intimidated by having to go into the outputs to select a folder.

    I created a region in the template that calls the xml of the page and the format is currently the same as the one listed above so it won't work yet.

    #set ( $slides = $_XPathTool.selectNodes($contentRoot, "//system-file"))
    #if ($slides.size() > 0)
    <!-- HTML for Gallery -->
    <div class="callbacks_container">
      <ul class="rslides" id="slider4">
      #foreach ($slide in $slides)
        <li>
          <img src="${slide.getChild("link").value}" />
        </li>
       #end
      </ul>
    </div>
    <!-- END HTML for Gallery -->
    #end
    

    Here's the xml of the test page I have

    <system-data-structure>
        <title>New Page</title>
        <new-item>
            <item-title>subtitle</item-title>
            <graphic type="file">
                <content/>
                <path>/about/presidents-office/images/baillie_100.jpg</path>
                <link>site://www.scranton.edu/about/presidents-office/images/baillie_100.jpg</link>
                <site>www.scranton.edu</site>
                <name>baillie_100.jpg</name>
            </graphic>
            <caption>caption</caption>
            <alignment>Left</alignment>
            <text>
                <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget&#160;</span>
            </text>
            <gallery>
                <image type="file">
                    <content/>
                    <path>/_new-page-features/images/slides/slide-1.png</path>
                    <link>site://www.scranton.edu/_new-page-features/images/slides/slide-1.png</link>
                    <site>www.scranton.edu</site>
                    <name>slide-1.png</name>
                </image>
                <image type="file">
                    <content/>
                    <path>/_new-page-features/images/slides/slide-2.png</path>
                    <link>site://www.scranton.edu/_new-page-features/images/slides/slide-2.png</link>
                    <site>www.scranton.edu</site>
                    <name>slide-2.png</name>
                </image>
            </gallery>
        </new-item>
        <supplemental-content>
            <type>None</type>
            <tabs>
                <tab>
                    <title>Tab 1</title>
                    <content>
                        <p>
                            <span>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</span>
                        </p>
                    </content>
                </tab>
                <tab>
                    <title>Tab 2</title>
                    <content>
                        <p>
                            <span>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley j&#195;&#173;cama salsify.</span>
                        </p>
                    </content>
                </tab>
                <tab>
                    <title>Another Tab</title>
                    <content>
                        <span>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</span>
                    </content>
                </tab>
            </tabs>
            <accordion>
                <item>
                    <title>Accordion 1</title>
                    <content>
                        <p>Accordion 1</p>
                    </content>
                </item>
                <item>
                    <title>Accordion 2</title>
                    <content>
                        <p>Accordion 2</p>
                    </content>
                </item>
                <item>
                    <title>Another Accordion </title>
                    <content>
                        <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
                    </content>
                </item>
            </accordion>
        </supplemental-content>
    </system-data-structure>
    

    I'm just wondering if it is a simple change to the Velocity to locate those image files from the XML.

    • Edit

16. 14 Posted by Ryan Griffith on 24 Jul, 2014 06:31 PM

    

    Hi Matthew,

    You are correct, it should just be a matter of adjusting the XPath you use to obtain the "slides." In this case, you would change:

    #set ( $slides = $_XPathTool.selectNodes($contentRoot, "//system-file"))
    

    To something like:

    #set ( $slides = $_XPathTool.selectNodes($contentRoot, "//system-file"))
    

    • Edit

17. 15 Posted by Ryan Griffith on 24 Jul, 2014 06:33 PM

    

    My apologies, accidentally hit submit while I was typing my response.

    As I was saying, you would change:

    #set ( $slides = $_XPathTool.selectNodes($contentRoot, "//system-file"))
    

    To the following:

    #set ( $slides = $_XPathTool.selectNodes($contentRoot, "//gallery/image[path != '/']"))
    

    Note: because we're dealing with choosers, you'll want to add a path check to ensure a file was selected.

    Please let me know if you have any questions.

    Thanks!

    • Edit

18. 16 Posted by matthew.wren on 24 Jul, 2014 07:01 PM

    

    Oh yeah! that worked out great! So I was testing it out and I realized something something. If you look at the XML there's a section called new-item and it contains a few fields including a WYSIWYG. My intentions are to get this gallery to be at the bottom of each of these sections but the way it is created now it will only be placed on the bottom of the the entire site (because I created a region that's below this default content).

    I was going to add this into the format so it'd display along with that content but it is written in XSLT... would that snippet be very difficult to convert over to that language? also would it cause any other issues by implementing in that part of the page?

    • Edit

19. 17 Posted by Ryan Griffith on 24 Jul, 2014 08:42 PM

    

    Hi Matthew,

    You would most likely want to remove one of the regions if you are planning to combine the two elements.

    That being said, you would just need to loop over each new-item element and move your current code into that loop. Note: you will need to adjust your XPath that obtains all of the galleries to only get the gallery for the current new-item.

    Please let me know if you have any questions.

    Thanks!

    • Edit

20. 18 Posted by matthew.wren on 29 Jul, 2014 01:29 PM

    

    I can see how to insert the image into the source of the img tag in Velocity but what about XSLT?

    XML
    

    <system-data-structure>
        <title>New Page</title>
        <new-item>
            <item-title>subtitle</item-title>
            <graphic type="file">
                <content/>
                <path>/about/presidents-office/images/baillie_100.jpg</path>
                <link>site://www.scranton.edu/about/presidents-office/images/baillie_100.jpg</link>
                <site>www.scranton.edu</site>
                <name>baillie_100.jpg</name>
            </graphic>
            <caption>caption</caption>
            <alignment>Left</alignment>
            <text>
                <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget&#160;</span>
            </text>
            <gallery>
                <image type="file">
                    <content/>
                    <path>/_new-page-features/images/slides/slide-1.png</path>
                    <link>site://www.scranton.edu/_new-page-features/images/slides/slide-1.png</link>
                    <site>www.scranton.edu</site>
                    <name>slide-1.png</name>
                </image>
                <image type="file">
                    <content/>
                    <path>/_new-page-features/images/slides/slide-2.png</path>
                    <link>site://www.scranton.edu/_new-page-features/images/slides/slide-2.png</link>
                    <site>www.scranton.edu</site>
                    <name>slide-2.png</name>
                </image>
            </gallery>
        </new-item>
        <new-item>
            <item-title>subtitle two</item-title>
            <graphic>
                <path>/</path>
            </graphic>
            <caption/>
            <alignment>Right</alignment>
            <text/>
            <gallery>
                <image type="file">
                    <content/>
                    <path>/_new-page-features/images/slides/slide-1.png</path>
                    <link>site://www.scranton.edu/_new-page-features/images/slides/slide-1.png</link>
                    <site>www.scranton.edu</site>
                    <name>slide-1.png</name>
                </image>
                <image type="file">
                    <content/>
                    <path>/_new-page-features/images/slides/slide-2.png</path>
                    <link>site://www.scranton.edu/_new-page-features/images/slides/slide-2.png</link>
                    <site>www.scranton.edu</site>
                    <name>slide-2.png</name>
                </image>
            </gallery>
        </new-item>
        <supplemental-content>
            <type>None</type>
            <tabs>
                <tab>
                    <title>Tab 1</title>
                    <content>
                        <p>
                            <span>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</span>
                        </p>
                    </content>
                </tab>
                <tab>
                    <title>Tab 2</title>
                    <content>
                        <p>
                            <span>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley j&#195;&#173;cama salsify.</span>
                        </p>
                    </content>
                </tab>
                <tab>
                    <title>Another Tab</title>
                    <content>
                        <span>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</span>
                    </content>
                </tab>
            </tabs>
            <accordion>
                <item>
                    <title>Accordion 1</title>
                    <content>
                        <p>Accordion 1</p>
                    </content>
                </item>
                <item>
                    <title>Accordion 2</title>
                    <content>
                        <p>Accordion 2</p>
                    </content>
                </item>
                <item>
                    <title>Another Accordion </title>
                    <content>
                        <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
                    </content>
                </item>
            </accordion>
        </supplemental-content>
    </system-data-structure>
    

    XSLT
    

    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <xsl:output indent="yes" method="xml"/>
      <!-- Find the first configuration, and copy the template content -->
      <xsl:template match="/system-data-structure">
        <h1><xsl:value-of select="title"/></h1>
            <xsl:apply-templates select="new-item"/>
    
    
    
    
    </xsl:template>
      <xsl:template match="new-item">
        <div class="NewBox">
            <xsl:if test="graphic/path != '/'">
            <div class="photoBox" style="float:{alignment}; margin-{alignment}:0px;">
                <xsl:for-each select="graphic">
                <img alt="{name}" src="{path}"/>
                </xsl:for-each>
                <xsl:if test="caption != ''">
                    <div class="caption"><xsl:value-of select="caption"/></div>
                </xsl:if>
            </div>
            </xsl:if>
            <div class="body">
                <xsl:if test="item-title != ''">
                <h2><xsl:value-of select="item-title"/></h2>
                </xsl:if>
                <xsl:copy-of select="text"/>
            </div>
    <!-- HTML for Gallery -->
    <div class="callbacks_container">
      <ul class="rslides" id="slider4">
      <xsl:for-each select="/gallery/image">
          <li>
          <img src="{path}"/>
        </li>
      </xsl:for-each>
      </ul>
    </div>
    <!-- END HTML for Gallery -->
        </div>
      </xsl:template>
    </xsl:stylesheet>
    

    • Edit

21. 19 Posted by Ryan Griffith on 29 Jul, 2014 07:42 PM

    

    Hi Matthew,

    You would use the same logic that exists for the graphic field:

    <div class="callbacks_container">
      <xsl:if test="count(gallery/image[path != '/']) &gt; 0">
        <ul class="rslides" id="slider4">
          <xsl:for-each select="gallery/image[path != '/']">
            <li>
              <img src="{path}"/>
            </li>
          </xsl:for-each>
        </ul>
      </xsl:if>
    </div>
    

    Alternatively, you could separate the gallery image output into a different template:

    <xsl:template match="new-item">
      ...
      <div class="callbacks_container">
        <xsl:if test="count(gallery/image[path != '/']) &gt; 0">
          <ul class="rslides" id="slider4">
            <xsl:apply-templates select="gallery/image[path != '/']"/>
          </ul>
        </xsl:if>
      </div>
      ...
    </xsl:template>
    
    <xsl:template match="image">
      <li>
        <img src="{path}"/>
      </li>
    </xsl:template>
    

    Please let me know if you have any questions.

    Thanks!

    • Edit

22. 20 Posted by matthew.wren on 07 Aug, 2014 12:53 PM

    

    This worked perfectly! thank you so much Ryan!

    • Edit

23. 21 Posted by Ryan Griffith on 07 Aug, 2014 02:17 PM

    

    Not a problem at all, Matthew, I am glad to hear the new XSLT did the trick.

    I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

    Have a great day!

    • Edit

24. Ryan Griffith closed this discussion on 07 Aug, 2014 02:17 PM.