tag:help-archives.hannonhill.com,2010-02-09:/discussions/xslt-formats/6151-image-galleryCascade CMS: Discussion 2015-08-19T19:10:20Ztag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-05T17:19:14Z2015-08-05T17:19:14ZImage Gallery<div><p>Hi Fernado,</p>
<p>Since <gallery_set> can have multiple <gallery>
children, you'll need to write a template to process these
<gallery> elements. Inside <gallery_set>, you just need
to call <xsl:apply-templates select="gallery"/>.</p>
<p>Wing</p></div>Wing Ming Chantag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-05T20:55:27Z2015-08-05T20:55:27ZImage Gallery<div><p>I think I am pretty close to it. I came up with this:</p>
<p><br>
<a class="example-image-link"></a> <a href="/xsl:attribute">/xsl:attribute</a> <img class="example-image thumbnail-gallery"> <a href="/xsl:attribute">/xsl:attribute</a> <a href="/xsl:template">/xsl:template</a></p>
<p>and the apply template is this :</p>
<p><br></p>
<div class="row"></div>
<a href="/xsl:if">/xsl:if</a>
<p>But for some reason, it is not reading the src and the href in
it. Can I get some help with it? Thanks!</p></div>Fernandotag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-06T12:04:58Z2015-08-06T12:04:58ZImage Gallery<div><p>Fernando,</p>
<p>In the template that matches <code>gallery</code>, the gallery
node is the context node. Inside this context, you don't mention
<code>gallery_set</code> nor <code>gallery</code>, because they are
invisible (that is, you can only look downward to children, not
upward to ancestors). Try changing the XPath expression to
<code>linkurl/path</code> and <code>image/path</code>.</p>
<p>Wing</p></div>Wing Ming Chantag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-12T14:09:03Z2015-08-12T14:09:03ZImage Gallery<div><p>Awesome thanks! I believe I have it working now. The problem I
am running into is whenever the user is not using the gallery, the
format is still trying to look for an image so it renders a page
with a broken link of an image (screenshot attached above).</p>
<p>So in other words I need to write some kind of code that
whenever the user is not using the gallery the format wont be
trying to render some image. Any ideas?</p>
<p>Thanks!</p></div>Fernandotag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-12T14:12:32Z2015-08-12T14:12:57ZImage Gallery<div><p>You need to use <code><xsl:if test="gallery"></code> to
test if there are gallery elements before you apply the
templates.</p>
<p>Wing</p></div>Wing Ming Chantag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-12T15:42:12Z2015-08-12T15:42:12ZImage Gallery<div><p>What do you mean exactly?</p>
<p>Something like this?</p>
<p><br></p>
<div class="row">
<div><a href="/xsl:if">/xsl:if</a></div>
</div>
<a href="/xsl:if">/xsl:if</a></div>Fernandotag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-12T15:53:39Z2015-08-12T15:54:41ZImage Gallery<div><p>I would test gallery_set and gallery at the same time:<br></p>
<pre>
<xsl:if test="gallery_set and gallery_set/gallery">
<div class="row">
<div id="gallery-content">
<xsl:apply-templates mode="galleryHead" select="gallery_set"/>
</div>
</div>
</xsl:if>
</pre>
<p>Wing</p></div>Wing Ming Chantag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-12T16:32:40Z2015-08-12T16:32:40ZImage Gallery<div><p>Hi,</p>
<p>Just a minor suggestion, but if you move the containers that
wrap your <code>gallery_set</code> into a template and pass in a
parameter for the "grid class(es)", you can simplify things quite a
bit and reduce the redundant HTML:</p>
<pre>
<code><xsl:template match="gallery_set">
<xsl:param name="gridClass"/>
<xsl:variable name="images" select="gallery[image/path != '/']" />
<xsl:if test="count($images) > 0">
<div class="row">
<div id="gallery-content">
<xsl:apply-templates select="$images">
<xsl:with-param name="gridClass"><xsl:value-of select="$gridClass"/></xsl:with-param>
</xsl:apply-templates>
</div>
</div>
</xsl:if>
</xsl:template>
<xsl:template match="image">
<xsl:param name="gridClass">
<div class="${gridClass}">
<div class="thumbnail">
<a href="{linkurl/path}" class="example-image-link" data-lightbox="example-set">
<img class="example-image" src="{image/path}" />
</a>
</div>
<div class="caption">
<small><xsl:copy-of select="captiontext"/></small>
</div>
</div>
</xsl:template></code>
</pre>
<p>You would then replace those <code><xsl:if></code>
statements you have with:</p>
<pre>
<code><xsl:apply-templates select="gallery_set">
<!-- for "galleryBig" -->
<!-- <xsl:with-param name="gridClass">col-md-4 col-sm-4</xsl:with-param> -->
<!-- for "galleryHead" -->
<xsl:with-param name="gridClass">col-md-6 col-sm-6</xsl:with-param>
</xsl:apply-templates></code>
</pre>
<p>Alternatively, you could add an <code><xsl:choose></code>
to your template and pass something textual like <code>head</code>
or <code>big</code> and have your template determine the class(es)
to use. I like the former since it's the most flexible.</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/375731042015-08-14T15:06:16Z2015-08-14T15:06:16ZImage Gallery<div><p>Ryan,</p>
<p>Thanks for the suggestion I appreciate it. I am not quite
certain if I am following what you ask to and for some reason it is
no rendering the image. When looking into the html it show like
nothing is writing to point at an image or the a href tag for the
link. This is what I come up with. Let me know what you think</p>
<p>Thanks for all of the help!</p></div>Fernandotag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-17T14:38:19Z2015-08-17T14:38:19ZImage Gallery<div><p>Just wanted to follow up and see if you have gotten a chance to
look over my format?</p>
<p>Thanks!</p></div>Fernandotag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-17T14:54:20Z2015-08-17T14:54:20ZImage Gallery<div><p>Hi Fernando,</p>
<p>It looks like you are close. When you have a moment, try the
following and let me know how the changes work out:</p>
<pre>
<code><xsl:template match="gallery_set">
<xsl:param name="gridClass"/>
<xsl:variable name="images" select="gallery/image[path != '']"/>
<xsl:if test="count($images) &gt; 0">
<div class="row">
<div id="gallery-content">
<xsl:apply-templates select="$images">
<xsl:with-param name="gridClass">
<xsl:value-of select="$gridClass"/>
</xsl:with-param>
</xsl:apply-templates>
</div>
</div>
</xsl:if>
</xsl:template>
<xsl:template match="image">
<xsl:param name="gridClass"/>
<div class="{$gridClass}">
<div class="thumbnail">
<a class="example-image-link" data-lightbox="example-set" href="{../linkurl/link}">
<img class="example-image" src="{link}">
</img>
</a>
</div>
<div class="caption">
<small>
<xsl:value-of select="gallery_set/gallery/captiontext"/>
</small>
</div>
</div>
</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/375731042015-08-17T15:08:37Z2015-08-17T15:08:37ZImage Gallery<div><p>It worked!! Thank you very much! So I can see the difference in
the code that made it work, can I ask for my own learning purpose
how did that difference made the code work?</p>
<p>Thanks for all of the help.</p></div>Fernandotag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-17T16:25:33Z2015-08-17T16:25:33ZImage Gallery<div><p>Thank you for following up, Fernando, I am glad to hear the
changes did the trick.</p>
<blockquote>
<p>can I ask for my own learning purpose how did that difference
made the code work?</p>
</blockquote>
<p>The main issue was the XPath used to access <code>linkurl</code>
and the image. Specifically, at that point you are within the
<code>image</code> element, not <code>gallery_set/gallery</code>.
For <code>linkurl</code>, you need to go up one level first.</p>
<p>Along those lines, I just noticed you will need to adjust the
XPath used to get the caption from
<code>gallery_set/gallery/captiontext</code> to
<code>../captiontext</code>; similar to what I did for
<code>linkurl</code>.</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 Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-19T13:48:51Z2015-08-19T13:48:51ZImage Gallery<div><p>I have a div id called gallery content that is giving the image
a gray background. And when I am not using the gallery option I see
a gray background from that id.</p>
<p>"</p>
<div class="row">
<div><a href="/xsl:with-param">/xsl:with-param</a> <a href="/xsl:apply-templates">/xsl:apply-templates</a></div>
</div>
<a href="/xsl:if">/xsl:if</a> <a href="/xsl:template">/xsl:template</a><br>
<br>
<div class="{$gridClass}">
<div class="thumbnail"><a href="{../linkurl/link}" class="example-image-link"><img src="{link}" class="example-image"> </a></div>
<div class="caption"></div>
</div>
<a href="/xsl:template">/xsl:template</a>"
<p>What I think is happening is "" removes the <a>and the <img>
tags but the id="gallery-content" is still showing up in the page.
Should I try move "</a></p>
<div>" to ""? and maybe the if statement will
grab that as well? Thanks for all of the help!</div></div>Fernandotag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-19T15:53:17Z2015-08-19T15:53:17ZImage Gallery<div><p>Hi Fernando,</p>
<p>The <code><xsl:if></code> will need to remain where it's
at. Looks like my code had a small typo in it where it's filtering
for chosen images. When you have a moment change the following
line:</p>
<pre>
<code><xsl:variable name="images" select="gallery/image[path != '']"/></code>
</pre>
<p>to:</p>
<pre>
<code><xsl:variable name="images" select="gallery/image[path != '/']"/></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/375731042015-08-19T18:31:51Z2015-08-19T18:31:51ZImage Gallery<div><p>It worked! Thanks for all of the help!</p></div>Fernandotag:help-archives.hannonhill.com,2010-02-09:Comment/375731042015-08-19T19:10:18Z2015-08-19T19:10:18ZImage Gallery<div><p>Thank you for following up, Fernando, I am glad to hear the
proposed change 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