tag:help-archives.hannonhill.com,2010-02-09:/discussions/xslt-formats/6096-need-a-bootstrap-carousel-for-news-contentCascade CMS: Discussion 2018-10-18T20:37:35Ztag:help-archives.hannonhill.com,2010-02-09:Comment/371287172015-06-15T14:30:08Z2015-06-15T14:30:09Zneed a bootstrap carousel for news content<div><p>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.</p></div>Eric Hassenplugtag:help-archives.hannonhill.com,2010-02-09:Comment/371287172015-06-16T13:51:13Z2015-06-16T13:51:13Zneed a bootstrap carousel for news content<div><p>Hi Eric,</p>
<p>I'd love to help but I am going to need a little bit of
information from you.<br>
Have you picked out the carousel that you would like to use?<br>
If so, can you send the HTML snippet that needs to be
generated.<br>
Also, is this carousel going to display multiple articles with one
image from each article?<br>
Or is the carousel for one article with multiple images attach to
the article?<br>
Lastly, I will need the XML from the Data Definition of your new
article. Can you send me this?</p>
<p>Please let me know if you would like me to elaborate on any of
the above. Thanks!</p></div>Pennytag:help-archives.hannonhill.com,2010-02-09:Comment/371287172015-06-16T21:34:20Z2015-06-16T21:34:20Zneed a bootstrap carousel for news content<div><p>Hi Penny,</p>
<p>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.</p>
<p>Similar to this page<br>
<a href="https://www.cs.purdue.edu/">https://www.cs.purdue.edu/</a></p>
<p>Let me know if you need any more info.</p>
<p>Thanks,<br>
Eric</p></div>Hassenplug, Erictag:help-archives.hannonhill.com,2010-02-09:Comment/371287172015-07-07T14:21:15Z2015-07-07T14:21:16Zneed a bootstrap carousel for news content<div><p>Hi Penny,</p>
<p>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?</p>
<p>Here is my format:</p>
<p><br>
<!-- XSLT transformation --><br>
<!-- Match on the root system-index-block XML node --><br>
<br></p>
<p><br></p>
<div class="carousel slide">
<div class="carousel-indicators"><!--
-->
<pre>
<code> </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></code>
</pre>
<p><a href="/xsl:template">/xsl:template</a></p>
<!-- Match on the system-page XML node substring-after( ,'eaps/')-->
<p><a>xsl:choose</a> item active<a href="/xsl:when">/xsl:when</a> <a>xsl:otherwise</a>item<a href="/xsl:otherwise">/xsl:otherwise</a> <a href="/xsl:choose">/xsl:choose</a> <a href="/xsl:variable">/xsl:variable</a></p>
<div class="{$itemClass}"><img class="img-responsive" alt="{title}"> <a href="/xsl:attribute">/xsl:attribute</a>
<div class="carousel-caption">
<h3></h3>
<a href="/xsl:if">/xsl:if</a>
<p><a>xsl:choose</a> <a href="{system-data-structure/external-link}" class="more" title="{title}">Read More
»</a> <a href="/xsl:when">/xsl:when</a> <a>xsl:otherwise</a> <a href="/xsl:attribute">/xsl:attribute</a> <a>xsl:text</a>more<a href="/xsl:text">/xsl:text</a>
<a href="/xsl:attribute">/xsl:attribute</a> <a href="/xsl:attribute">/xsl:attribute</a> <a>xsl:text</a>Read More »<a href="/xsl:text">/xsl:text</a> <a href="/xsl:element">/xsl:element</a>
<a href="/xsl:otherwise">/xsl:otherwise</a> <a href="/xsl:choose">/xsl:choose</a></p>
</div>
</div>
<a href="/xsl:if">/xsl:if</a> <a href="/xsl:if">/xsl:if</a>
<a href="/xsl:template">/xsl:template</a>
<p><br>
<br>
<br>
active<a href="/xsl:if">/xsl:if</a> <a href="/xsl:variable">/xsl:variable</a></p>
<a href="/xsl:if">/xsl:if</a> <a href="/xsl:if">/xsl:if</a>
<a href="/xsl:template">/xsl:template</a>
<p><a href="/xsl:stylesheet">/xsl:stylesheet</a></p>
</div>
</div></div>Hassenplug, Erictag:help-archives.hannonhill.com,2010-02-09:Comment/371287172015-07-07T15:11:44Z2015-07-07T15:11:44Zneed a bootstrap carousel for news content<div><p>Yes. Instead of selecting everything and then filtering, you
should select only what you need. This will also make your XSLT
format performance optimized.</p>
<p>Below, I have rewritten your code to show you how this should be
done. Let me know if you find any further issues.</p>
<pre>
<code><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></code>
</pre></div>Pennytag:help-archives.hannonhill.com,2010-02-09:Comment/371287172015-07-07T16:58:51Z2015-07-07T16:58:52Zneed a bootstrap carousel for news content<div><p>That worked great! Thanks for the quick response.</p>
<p>Thanks,<br>
Eric</p></div>Hassenplug, Eric