[solved] Followup about bootstrap carousel issue

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

[velden]

Just make one div 'active' and I guess javascript takes care of the rest.

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

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

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