Page 1 of 1
[solved] Followup about bootstrap carousel issue
Posted: Wed Feb 18, 2015 3:12 am
by luya
Following the locked topic and responding to
this post.
The script is originated from
Booply. Bootstrap carousel requires the class "active" to be functional but I am unable to find the right condition in smarty for that issue. Basically, the issue to translate the plain loop in smarty format.
Thanks for the help.
Re: Followup about bootstrap carousel issue
Posted: Wed Feb 18, 2015 8:54 am
by velden
Just make one div 'active' and I guess javascript takes care of the rest.
Re: Followup about bootstrap carousel issue
Posted: Wed Feb 18, 2015 5:33 pm
by luya
Here is an attempt. Somehow the carousel is broken as seen on
http://cwmag.ca/template.html
Code: Select all
{capture assign=submitted_images}{$entry->file_location}/{$entry->fieldsbyname.Images->value}{/capture}
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="row">
{foreach from=$items item='entry'}
<!-- .item from the carousel -->
{if $entry@first}{$isActive=true}{else}{$isActive=false}{/if}
<div class="item {if $isActive} active{/if}">
<div class="col-md-4 l-box">
<a href='{$entry->moreurl}' title='{$entry->title|cms_escape:htmlall}' class="carousel-link">
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="430,420,c" noembed='0' quality='85' src="{$entry->file_location}/{$entry->fieldsbyname.Images->value}" alt="{$entry->title}" class="carousel-img img-responsive"}
{/if}
<div class="caroussel-caption l-box">
<p>{$entry->category}</p>
<h3>{$entry->title|cms_escape}</h3>
</div>
</a>
</div>
</div>
<!-- .item //-->
{/foreach}
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
</div><!-- .carousel //-->
</div>
Re: Followup about bootstrap carousel issue
Posted: Wed Feb 18, 2015 8:06 pm
by velden
Sorry, you need to create valid html and please don't use {trim} or such because I can't read the output well now.
First make sure your html validates.
http://validator.w3.org/
Unless you really want the images embedded like they are now (again very hard to troubleshoot) use the noembed=1 parameter in CGSmartImage.
Further:
You don't use $submitted_images so leave this out:
Code: Select all
{capture assign=submitted_images}{$entry->file_location}/{$entry->fieldsbyname.Images->value}{/capture}
Not wrong but inefficient in this case:
Code: Select all
<!-- .item from the carousel -->
{if $entry@first}{$isActive=true}{else}{$isActive=false}{/if}
<div class="item {if $isActive} active{/if}">
consider:
Code: Select all
<!-- .item from the carousel -->
<div class="item{if $entry@first} active{/if}">
You don't need the nested {}
Code: Select all
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="430,420,c" noembed='0' quality='85' src="{$entry->file_location}/{$entry->fieldsbyname.Images->value}" alt="{$entry->title}" class="carousel-img img-responsive"}
{/if}
Code: Select all
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="430,420,c" noembed=1 quality='85' src1=$entry->file_location src2=$entry->fieldsbyname.Images->value alt=$entry->title class="carousel-img img-responsive"}
{/if}
Re: Followup about bootstrap carousel issue
Posted: Sat Feb 21, 2015 2:52 am
by luya
Thank you for trimming the code. It seems the carousel is running well. I will do further testing for debug purpose.
Edit: after some clean up, the page is now
HTML5 valid aside some warnings.
Now that the carousel is fully functional, the issue is considered solved. Thank you Velden.