Home → XSLT Formats →

Image Gallery

• Edit

Fernando

05 Aug, 2015 02:38 PM

I am trying to create an image gallery to my XSLT format and I think I got one image to work but when I try to do multiple images the format puts both url codes into the same img and a tag. Here is my data definition and my format.

• format.txt 8.39 KB
• xml.txt 6.34 KB

1. 1 Posted by Wing Ming Chan on 05 Aug, 2015 05:19 PM

   

   Hi Fernado,

   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"/>.

   Wing

   • Edit

2. 2 Posted by Fernando on 05 Aug, 2015 08:55 PM

   

   I think I am pretty close to it. I came up with this:

   <xsl:template match="gallery" mode="galleryHead">
           <a class="example-image-link" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
               <xsl:attribute name="href">
                   <xsl:value-of select="gallery_set/gallery/linkurl/path"/>
               </xsl:attribute>
               <img class="example-image thumbnail-gallery">
                   <xsl:attribute name="src">
                       <xsl:value-of select="gallery_set/gallery/image/path"/>
                   </xsl:attribute>
               </img>
           </a>
       </xsl:template>

   and the apply template is this :

   <xsl:if test="gallery_set">
                           <div class="row">
                               <xsl:apply-templates mode="galleryHead" select="gallery_set"/>
                           </div>
                       </xsl:if>

   But for some reason, it is not reading the src and the href in it. Can I get some help with it? Thanks!

   • Edit

3. 3 Posted by Wing Ming Chan on 06 Aug, 2015 12:04 PM

   

   Fernando,

   In the template that matches gallery, the gallery node is the context node. Inside this context, you don't mention gallery_set nor gallery, because they are invisible (that is, you can only look downward to children, not upward to ancestors). Try changing the XPath expression to linkurl/path and image/path.

   Wing

   • Edit

4. 4 Posted by Fernando on 12 Aug, 2015 02:09 PM

   

   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).

   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?

   Thanks!

   • xslt-format.rtf 8.79 KB
   • xml.rtf 8.68 KB
   • Screen_Shot_2015-08-12_at_9.07.22_AM.png 6.72 KB
   • Edit

5. 5 Posted by Wing Ming Chan on 12 Aug, 2015 02:12 PM

   

   You need to use <xsl:if test="gallery"> to test if there are gallery elements before you apply the templates.

   Wing

   • Edit

6. 6 Posted by Fernando on 12 Aug, 2015 03:42 PM

   

   What do you mean exactly?

   Something like this?

   <xsl:if test="gallery_set">
                           <div class="row">
                               <div id="gallery-content">
                                   <xsl:if test="gallery">
                                       <xsl:apply-templates mode="galleryHead" select="gallery_set"/>
                                   </xsl:if>
                               </div>
                           </div>
                       </xsl:if>

   • Edit

7. 7 Posted by Wing Ming Chan on 12 Aug, 2015 03:53 PM

   

   I would test gallery_set and gallery at the same time:
   

   <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>
   

   Wing

   • Edit

8. 8 Posted by Ryan Griffith on 12 Aug, 2015 04:32 PM

   

   Hi,

   Just a minor suggestion, but if you move the containers that wrap your gallery_set 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:

   <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>
   

   You would then replace those <xsl:if> statements you have with:

   <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>
   

   Alternatively, you could add an <xsl:choose> to your template and pass something textual like head or big and have your template determine the class(es) to use. I like the former since it's the most flexible.

   Please let me know if you have any questions.

   Thanks!

   • Edit

9. 9 Posted by Fernando on 14 Aug, 2015 03:06 PM

   

   Ryan,

   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

   Thanks for all of the help!

   • format.rtf 8.12 KB
   • xml.rtf 8.68 KB
   • Screen_Shot_2015-08-14_at_10.05.24_AM.png 91.4 KB
   • Edit

10. 10 Posted by Fernando on 17 Aug, 2015 02:38 PM

    

    Just wanted to follow up and see if you have gotten a chance to look over my format?

    Thanks!

    • Edit

11. 11 Posted by Ryan Griffith on 17 Aug, 2015 02:54 PM

    

    Hi Fernando,

    It looks like you are close. When you have a moment, try the following and let me know how the changes work out:

    <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>
    

    Please let me know if you have any questions.

    Thanks!

    • Edit

12. 12 Posted by Fernando on 17 Aug, 2015 03:08 PM

    

    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?

    Thanks for all of the help.

    • Edit

13. 13 Posted by Ryan Griffith on 17 Aug, 2015 04:25 PM

    

    Thank you for following up, Fernando, I am glad to hear the changes did the trick.

    can I ask for my own learning purpose how did that difference made the code work?

    The main issue was the XPath used to access linkurl and the image. Specifically, at that point you are within the image element, not gallery_set/gallery. For linkurl, you need to go up one level first.

    Along those lines, I just noticed you will need to adjust the XPath used to get the caption from gallery_set/gallery/captiontext to ../captiontext; similar to what I did for linkurl.

    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

14. Ryan Griffith closed this discussion on 17 Aug, 2015 04:25 PM.

15. Fernando re-opened this discussion on 19 Aug, 2015 01:48 PM

16. 14 Posted by Fernando on 19 Aug, 2015 01:48 PM

    

    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.

    "<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="../captiontext"/>
                </small>
            </div>
        </div>
    </xsl:template>"

    What I think is happening is "<xsl:if test="count($images) &gt; 0">" removes the <a> and the <img> tags but the id="gallery-content" is still showing up in the page. Should I try move "<div id="gallery-content">" to "<xsl:template match="image">"? and maybe the if statement will grab that as well? Thanks for all of the help!

    • xml.rtf 4.85 KB
    • xslt-format.rtf 7.67 KB
    • Screen_Shot_2015-08-19_at_8.47.31_AM.png 227 KB
    • Edit

17. 15 Posted by Ryan Griffith on 19 Aug, 2015 03:53 PM

    

    Hi Fernando,

    The <xsl:if> 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:

    <xsl:variable name="images" select="gallery/image[path != '']"/>
    

    to:

    <xsl:variable name="images" select="gallery/image[path != '/']"/>
    

    Please let me know if you have any questions.

    Thanks!

    • Edit

18. 16 Posted by Fernando on 19 Aug, 2015 06:31 PM

    

    It worked! Thanks for all of the help!

    • Edit

19. 17 Posted by Ryan Griffith on 19 Aug, 2015 07:10 PM

    

    Thank you for following up, Fernando, I am glad to hear the proposed change 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

20. Ryan Griffith closed this discussion on 19 Aug, 2015 07:10 PM.