Home → XSLT Formats →

need a bootstrap carousel for news content

• Edit

Eric Hassenplug

15 Jun, 2015 02:30 PM

I am trying to setup a news page with a bootstrap image carousel. I'm attempting to pull the data from a news page in cascade that has a data definition assigned to it. Can you send me a format for generating an image carousel from a page that has a data definition that contains all the information for the news article, title, image path, etc.? I've looked around the knowledge base and examples and did not find anything on Bootstrap image carousels.

1. 1 Posted by Penny on 16 Jun, 2015 01:51 PM

   

   Hi Eric,

   I'd love to help but I am going to need a little bit of information from you.
   Have you picked out the carousel that you would like to use?
   If so, can you send the HTML snippet that needs to be generated.
   Also, is this carousel going to display multiple articles with one image from each article?
   Or is the carousel for one article with multiple images attach to the article?
   Lastly, I will need the XML from the Data Definition of your new article. Can you send me this?

   Please let me know if you would like me to elaborate on any of the above. Thanks!

   • Edit

2. 2 Posted by Hassenplug, Eri... on 16 Jun, 2015 09:34 PM

   

   Hi Penny,

   Thanks for your help. Here is some info about the carousel we are looking for. Yes, we are looking to have multiple articles in the carousel.

   Similar to this page
   https://www.cs.purdue.edu/

   Let me know if you need any more info.

   Thanks,
   Eric

   • news_xml.txt 12.4 KB
   • carousel_html.txt 5.91 KB
   • Edit

3. 3 Posted by Hassenplug, Eri... on 07 Jul, 2015 02:21 PM

   

   Hi Penny,

   I’m close to getting this to work. My problem now is that I need to have an accurate numbering of the slides. The way this works, it will start numbering the slides at various positions. I have an if statement that checks if the article should be in the slider, but this causes it to skip articles which then messes with the position and then it gets out of sync. Any thoughts on how I can accurately number these slides?

   Here is my format:

   <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <!-- XSLT transformation -->
   <!-- Match on the root system-index-block XML node -->
   <xsl:variable name="indexPageName" select="'index'"/>
   <xsl:variable name="count" select="5"/>

   <xsl:template match="/system-index-block">
       <div class="carousel slide" data-ride="carousel" id="features" style="margin-top:130px;">
           <ol class="carousel-indicators">
            <!-- <xsl:apply-templates mode="pagination" select="system-page[name != 'archive'] and system-page[name != $indexPageName]">-->
            <xsl:apply-templates mode="pagination" select="system-page"/>

           </ol>
       <div class="carousel-inner">
           <xsl:apply-templates mode="slides" select="system-page"/>

       </div>
           <a class="left carousel-control" data-slide="prev" href="#features">
               <span class="glyphicon glyphicon-chevron-left" data-mce-mark="1"></span>
           </a>
           <a class="right carousel-control" data-slide="next" href="#features">
               <span class="glyphicon glyphicon-chevron-right" data-mce-mark="1"></span>
           </a>
       </div>
   </xsl:template>

   <!-- Match on the system-page XML node substring-after( ,'eaps/')-->
   <xsl:template match="system-page" mode="slides">

     <xsl:if test="system-data-structure/sliderinclude/value = 'Yes'">
     <xsl:if test="system-data-structure/sliderimage/link != ''">
       <xsl:variable name="itemClass">
           <xsl:choose>
               <xsl:when test="position() = $count">item active</xsl:when>
               <xsl:otherwise>item</xsl:otherwise>
           </xsl:choose>
       </xsl:variable>
       <div class="{$itemClass}">
           <img alt="{title}" class="img-responsive">
           <xsl:attribute name="src">
             <xsl:value-of select="substring-after(system-data-structure/sliderimage/path,'eaps/')"/>
           </xsl:attribute>
           </img>
           <div class="carousel-caption">
           <xsl:if test="title != ''">
                <h3 style="color:#fff">
                    <xsl:value-of select="title"/>
               </h3>
           </xsl:if>
           <p>
               <xsl:value-of select="summary"/>
           </p>

      <xsl:choose>
        <xsl:when test="system-data-structure/external-link != ''">
        <a class="more" href="{system-data-structure/external-link}" title="{title}">Read More »</a>
        </xsl:when>
        <xsl:otherwise>
        <xsl:element name="a">
                <xsl:attribute name="href">
                   <xsl:value-of select="concat(substring-after(path,'eaps/'),'.html')"/>
                </xsl:attribute>
                <xsl:attribute name="class">
                   <xsl:text>more</xsl:text>
                </xsl:attribute>
                 <xsl:attribute name="title">
                  <xsl:value-of select="title"/>
                </xsl:attribute>
                <xsl:text>Read More »</xsl:text>
       </xsl:element>
        </xsl:otherwise>
      </xsl:choose>
           </div>
       </div>
      </xsl:if>
      </xsl:if>
   </xsl:template>

   <xsl:template match="system-page" mode="pagination">
   <xsl:if test="system-data-structure/sliderinclude/value = 'Yes'">
   <xsl:if test="system-data-structure/sliderimage/link != ''">
       <xsl:variable name="itemClass">
           <xsl:if test="position() = $count">active</xsl:if>
       </xsl:variable>
        <li class="{$itemClass}" data-slide-to="{position()-1}" data-target="#features"/>
      </xsl:if>
      </xsl:if>
   </xsl:template>

   </xsl:stylesheet>

   • Edit

4. 4 Posted by Penny on 07 Jul, 2015 03:11 PM

   

   Yes. Instead of selecting everything and then filtering, you should select only what you need. This will also make your XSLT format performance optimized.

   Below, I have rewritten your code to show you how this should be done. Let me know if you find any further issues.

   <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform&quot; version="1.0"> 
   <!-- XSLT transformation --> 
   <!-- Match on the root system-index-block XML node --> 
   <xsl:variable name="indexPageName" select="'index'"/> 
   <xsl:variable name="count" select="5"/>
   
   <xsl:template match="/system-index-block"> 
       <div class="carousel slide" data-ride="carousel" id="features" style="margin-top:130px;"> 
           <ol class="carousel-indicators"> 
            <!-- <xsl:apply-templates mode="pagination" select="system-page[name != 'archive'] and system-page[name != $indexPageName]">--> 
            <xsl:apply-templates mode="pagination" select="system-page[system-data-structure[sliderinclude[value = 'Yes']] and sliderimage[link != '']]"/>
   
           </ol> 
       <div class="carousel-inner"> 
           <xsl:apply-templates mode="slides" select="system-page[system-data-structure[sliderinclude[value = 'Yes']] and sliderimage[link != '']]"/>
   
       </div> 
           <a class="left carousel-control" data-slide="prev" href="#features"> 
               <span class="glyphicon glyphicon-chevron-left" data-mce-mark="1"></span> 
           </a> 
           <a class="right carousel-control" data-slide="next" href="#features"> 
               <span class="glyphicon glyphicon-chevron-right" data-mce-mark="1"></span> 
           </a> 
       </div> 
   </xsl:template>
   
   <!-- Match on the system-page XML node substring-after( ,'eaps/')--> 
   <xsl:template match="system-page" mode="slides">
   
       <xsl:variable name="itemClass"> 
           <xsl:choose> 
               <xsl:when test="position() = $count">item active</xsl:when> 
               <xsl:otherwise>item</xsl:otherwise> 
           </xsl:choose> 
       </xsl:variable> 
       <div class="{$itemClass}"> 
           <img alt="{title}" class="img-responsive"> 
           <xsl:attribute name="src"> 
             <xsl:value-of select="substring-after(system-data-structure/sliderimage/path,'eaps/')"/> 
           </xsl:attribute> 
           </img> 
           <div class="carousel-caption"> 
           <xsl:if test="title != ''"> 
                <h3 style="color:#fff"> 
                    <xsl:value-of select="title"/> 
               </h3> 
           </xsl:if> 
           <p> 
               <xsl:value-of select="summary"/> 
           </p>
   
      <xsl:choose> 
        <xsl:when test="system-data-structure/external-link != ''"> 
        <a class="more" href="{system-data-structure/external-link}" title="{title}">Read More »</a> 
        </xsl:when> 
        <xsl:otherwise> 
        <xsl:element name="a"> 
                <xsl:attribute name="href"> 
                   <xsl:value-of select="concat(substring-after(path,'eaps/'),'.html')"/> 
                </xsl:attribute> 
                <xsl:attribute name="class"> 
                   <xsl:text>more</xsl:text> 
                </xsl:attribute> 
                 <xsl:attribute name="title"> 
                  <xsl:value-of select="title"/> 
                </xsl:attribute> 
                <xsl:text>Read More »</xsl:text> 
       </xsl:element> 
        </xsl:otherwise> 
      </xsl:choose> 
           </div> 
       </div> 
   </xsl:template>
   
   <xsl:template match="system-page" mode="pagination"> 
       <xsl:variable name="itemClass"> 
           <xsl:if test="position() = $count">active</xsl:if> 
       </xsl:variable> 
        <li class="{$itemClass}" data-slide-to="{position()-1}" data-target="#features"/> 
   </xsl:template>
   
   </xsl:stylesheet>
   

   • Edit

5. 5 Posted by Hassenplug, Eri... on 07 Jul, 2015 04:58 PM

   

   That worked great! Thanks for the quick response.

   Thanks,
   Eric

   • Edit

6. Tim closed this discussion on 17 Jul, 2015 02:37 PM.