tag:help-archives.hannonhill.com,2010-02-09:/discussions/velocity-formats/5353-creating-a-responsive-gallery-using-velocityCascade CMS: Discussion 2014-08-07T14:17:09Ztag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-09-19T13:05:13Z2013-10-10T19:32:19ZCreating a responsive gallery using Velocity.<div><p>just checking in on this one.</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-09-19T13:42:59Z2013-09-19T13:42:59ZCreating a responsive gallery using Velocity.<div><p>Hi Matthew,</p>
<p>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").</p>
<p>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.</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>You could probably do something similar using Velocity.
Theoretically, you could enter something like <code>{slider
blockID="INDEX_BLOCK_ID"}</code> and use Velocity to generate the
content. Your code could grab the value of the
<strong>blockID</strong> parameter and use the new Locator Tool to
find the associated block and loop over it's content.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-09-20T13:02:13Z2013-10-10T19:32:19ZCreating a responsive gallery using Velocity.<div><p>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?</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-10-02T14:07:55Z2013-10-10T19:32:23ZCreating a responsive gallery using Velocity.<div><p>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.</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-10-02T17:45:08Z2013-10-02T17:45:08ZCreating a responsive gallery using Velocity.<div><p>Not a problem, Matthew.</p>
<p>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:</p>
<pre>
<code>#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</code>
</pre>
<p>Note: this assumes you are already including the required CSS
and JS for the slider within the page.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-10-09T13:04:54Z2013-10-10T19:32:23ZCreating a responsive gallery using Velocity.<div><p>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 <code>/></code> in the
img attribute so I added it and it still comes up with this error.
Is this error occuring in the Velocity script?</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-10-09T13:48:01Z2013-10-09T13:48:01ZCreating a responsive gallery using Velocity.<div><p>Hm, it could possibly be an issue with the <strong>alt</strong>
attribute. Try removing the attribute from the image tag and see if
you still get the error message.</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-10-10T15:47:14Z2013-10-22T21:26:08ZCreating a responsive gallery using Velocity.<div><p>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.</p>
<p>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.</p>
<p>For some reason this causes the content below it to
disappear.</p>
<p>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.</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-10-16T13:34:08Z2013-10-16T13:34:09ZCreating a responsive gallery using Velocity.<div><p>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.</p>
<p>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.</p>
<p>Think this problem is from the gallery?</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-10-16T13:54:07Z2013-10-16T13:54:07ZCreating a responsive gallery using Velocity.<div><p>Hi Matthew,</p>
<p>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.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-10-16T14:41:59Z2013-10-16T14:42:01ZCreating a responsive gallery using Velocity.<div><p>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?</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082013-10-16T15:25:51Z2013-10-16T15:25:51ZCreating a responsive gallery using Velocity.<div><p>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.</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/284480082014-07-24T15:51:50Z2014-07-24T15:51:50ZCreating a responsive gallery using Velocity.<div><p>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.</p>
<p>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.</p>
<pre>
<code>#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</code>
</pre>
<p>Here's the xml of the test page I have</p>
<pre>
<code><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></code>
</pre>
<p>I'm just wondering if it is a simple change to the Velocity to
locate those image files from the XML.</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082014-07-24T18:31:52Z2014-07-24T18:31:52ZCreating a responsive gallery using Velocity.<div><p>Hi Matthew,</p>
<p>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:</p>
<pre>
<code>#set ( $slides = $_XPathTool.selectNodes($contentRoot, "//system-file"))</code>
</pre>
<p>To something like:</p>
<pre>
<code>#set ( $slides = $_XPathTool.selectNodes($contentRoot, "//system-file"))</code>
</pre></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/284480082014-07-24T18:33:45Z2014-07-24T18:33:45ZCreating a responsive gallery using Velocity.<div><p>My apologies, accidentally hit submit while I was typing my
response.</p>
<p>As I was saying, you would change:</p>
<pre>
<code>#set ( $slides = $_XPathTool.selectNodes($contentRoot, "//system-file"))</code>
</pre>
<p>To the following:</p>
<pre>
<code>#set ( $slides = $_XPathTool.selectNodes($contentRoot, "//gallery/image[path != '/']"))</code>
</pre>
<p>Note: because we're dealing with choosers, you'll want to add a
<code>path</code> check to ensure a file was selected.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/284480082014-07-24T19:01:31Z2014-07-24T19:01:31ZCreating a responsive gallery using Velocity.<div><p>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 <code>new-item</code> 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).</p>
<p>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?</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082014-07-24T20:42:56Z2014-07-24T20:42:56ZCreating a responsive gallery using Velocity.<div><p>Hi Matthew,</p>
<p>You would most likely want to remove one of the regions if you
are planning to combine the two elements.</p>
<p>That being said, you would just need to loop over each
<code>new-item</code> 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
<code>new-item</code>.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/284480082014-07-29T13:29:54Z2014-07-29T13:29:54ZCreating a responsive gallery using Velocity.<div><p>I can see how to insert the image into the source of the
<code>img</code> tag in Velocity but what about XSLT?</p>
<p>XML<br></p>
<pre>
<code><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></code>
</pre>
<p>XSLT<br></p>
<pre>
<code><?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"/><br><br>
<br></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></code>
</pre></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082014-07-29T19:42:14Z2014-07-29T19:42:14ZCreating a responsive gallery using Velocity.<div><p>Hi Matthew,</p>
<p>You would use the same logic that exists for the
<strong>graphic</strong> field:</p>
<pre>
<code><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></code>
</pre>
<p>Alternatively, you could separate the gallery image output into
a different template:</p>
<pre>
<code><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></code>
</pre>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/284480082014-08-07T12:53:09Z2014-08-07T12:53:09ZCreating a responsive gallery using Velocity.<div><p>This worked perfectly! thank you so much Ryan!</p></div>matthew.wrentag:help-archives.hannonhill.com,2010-02-09:Comment/284480082014-08-07T14:17:09Z2014-08-07T14:17:09ZCreating a responsive gallery using Velocity.<div><p>Not a problem at all, Matthew, I am glad to hear the new XSLT
did the trick.</p>
<p>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.</p>
<p>Have a great day!</p></div>Ryan Griffith