Page 1 of 2
Reopened Conditioning issue related to carousel bootstrap
Posted: Sun Dec 14, 2014 10:49 am
by luya
Hello,
I am in process of updating my current website implementing bootstrap mixed purecss. The issue is related to the carousel bootsrap as displaed on the following code with highlighted section
Code: Select all
<div class="container-fluid">
<div class="carousel slide pure-g" id="myCarousel">
<div class="carousel-inner center">
{foreach from=$items item='entry'}
<!-- .news-article (wrapping each article) -->
{if $entry@first}
<div class="item active">
{else}
<div class="item">
{/if}
<div class="pure-u-1-3 l-box">
<a href='{$entry->moreurl}' title='{$entry->title|cms_escape:htmlall}' class="slider">
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="640,420,c" noembed='0' quality='80' src="{$entry->file_location}/{$entry->fieldsbyname.Images->value}" alt="{$entry->title}"}
{/if}
<div class="carousel-caption">
<strong>{$entry->category}</strong>
<h2>{$entry->title|cms_escape}</h2>
</div>
</a>
</div>
</div>
<!-- .news-article //-->
{/foreach}
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
<!-- .news-summary //-->
</div>
</div>
I would like to set a condition for the first active item when
div class="item active" is assigned otherwise
div class="item" as illustrated with
Code: Select all
{if $entry.foreach.first}
<div class="item active">
{else}
<div class="item">
{/if}
You can view my template on :
http://cwmag.ca/template.html with a failed generated carousel.
What am I missinig and what are the suggestions?
Thank you for the help.
Edit: fixed the right code
Re: Conditioning issue related on carousel bootstrap
Posted: Sun Dec 14, 2014 10:56 am
by Jo Morg
You have smarty incorrect syntax:
{if $entry.foreach.first} -> {if $entry@first}
http://www.smarty.net/docs/en/language. ... oreach.tpl
Re: Conditioning issue related on carousel bootstrap
Posted: Sun Dec 14, 2014 11:08 am
by luya
Thank you. That was the element I was looking for.
Re: Reopened Conditioning issue related Con carousel bootstr
Posted: Fri Dec 19, 2014 5:02 am
by luya
Following the resolved issues, the page has a problem with caption within the bootstrap carousel. Normal html works well but porting into smarty causes superposed texts. What is the suggestion to solve the problem? Example is on
http://cwmag.ca with CMS Made Simple™ 1.11.11 “San Cristobal”.
Re: Reopened Conditioning issue related Con carousel bootstr
Posted: Fri Dec 19, 2014 10:23 am
by Masweb
Look first for errors in your code
http://validator.w3.org/check?uri=http% ... ne&group=0
I think the problem is de unclosed tag on line 58.
Re: Reopened Conditioning issue related Con carousel bootstr
Posted: Wed Dec 24, 2014 6:00 am
by luya
Errors are resolved on most part except the carousel part. Because of the way bootstrap version works, I have trouble to properly set up on the attached link above. Here is the revised code
Code: Select all
{foreach from=$items item='entry'}
<!-- .news-article (wrapping each article) -->
{if $entry@iteration is div by 2}
<div class="item active">
<div class="pure-u-1-3 l-box">
<a href='{$entry->moreurl}' title='{$entry->title|cms_escape:htmlall}' class="slider">
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="420,420,c" noembed='0' quality='85' src="{$entry->file_location}/{$entry->fieldsbyname.Images->value}" alt="{$entry->title}" class="pure-img"}
{/if}
<div class="carousel-caption">
<p>{cms_selflink page=$entry->category}</p>
<h3>{$entry->title|cms_escape}</h3>
</div>
</a>
</div>
</div>
{else}
<div class="item">
<div class="pure-u-1-3 l-box">
<a href='{$entry->moreurl}' title='{$entry->title|cms_escape:htmlall}' class="slider">
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="420,420,c" noembed='0' quality='85' src="{$entry->file_location}/{$entry->fieldsbyname.Images->value}" alt="{$entry->title}" class="pure-img"}
{/if}
</a>
</div>
</div>
{/if}
<!-- .news-article //-->
{/foreach}
The issue is to display the title only once at every second slide. I thought @iteration will work but something is missing. Help will be appreciated.
Re: Reopened Conditioning issue related Con carousel bootstr
Posted: Wed Dec 24, 2014 10:14 am
by Masweb
<a href='{$entry->moreurl}' title='{$entry->title|cms_escape:htmlall}' class="slider">
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="420,420,c" noembed='0' quality='85' src="{$entry->file_location}/{$entry->fieldsbyname.Images->value}" alt="{$entry->title}" class="pure-img"}
{/if}
<div class="carousel-caption">
<p>{cms_selflink page=$entry->category}</p>
<h3>{$entry->title|cms_escape}</h3>
</div>
</a>
Remove the {cms_selflink page=$entry->category} because this is a link in a link.
Re: Reopened Conditioning issue related Con carousel bootstr
Posted: Wed Dec 24, 2014 11:19 am
by velden
The code you pasted is not used on the website you linked to is it?
I'd need to see what the output of that template is.
BTW, though it might work and maybe it requires even less resources from the server, I don't like the redundant code.
Consider:
Code: Select all
{foreach from=$items item='entry'}
<!-- .news-article (wrapping each article) -->
{if $entry@iteration is div by 2}{$isEven=true}{else}{$isEven=false}{/if}
<div class="item{if $isEven} active{/if}">
<div class="pure-u-1-3 l-box">
<a href='{$entry->moreurl}' title='{$entry->title|cms_escape:htmlall}' class="slider">
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="420,420,c" noembed='0' quality='85' src="{$entry->file_location}/{$entry->fieldsbyname.Images->value}" alt="{$entry->title}" class="pure-img"}
{/if}
{if $isEven}<div class="carousel-caption">
<p>{cms_selflink page=$entry->category}</p>
<h3>{$entry->title|cms_escape}</h3>
</div>{/if}
</a>
</div>
</div>
<!-- .news-article //-->
{/foreach}
Re: Reopened Conditioning issue related Con carousel bootstr
Posted: Wed Dec 24, 2014 6:54 pm
by luya
Only on this template while the website uses a different version. Here is the output using above code
Here the javascript for the carousel
Code: Select all
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<1;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
Re: Reopened Conditioning issue related Con carousel bootstr
Posted: Wed Dec 24, 2014 8:53 pm
by velden
That output is of no use to me. I'd need a webpage to look at.
Re: Reopened Conditioning issue related Con carousel bootstr
Posted: Thu Dec 25, 2014 7:39 pm
by luya
velden wrote:That output is of no use to me. I'd need a webpage to look at.
Here is the requested template. I commented some section because the template was split into blocks from header to footer via content and sidebar for flexibility (something a CMS really needs).
The carousel part is fine with plain html but adapting to smarty code was difficult especially the caption part.
I was unable to attach the codes due to denial of txt and html format for possible vector attach. Here the code below. Thank you for the help.
Code: Select all
{strip}
{process_pagedata}{* Adds page specific metadata to the page *}
{MleCMS action='init'}
{cms_lang_info assign='nls'}
<!doctype html>
<!-- Microdata markup added by Google Structured Data Markup Helper. -->
<__html lang="{$nls->htmlarea()}">
{* header content block *}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
{metadata} <!-- Adds Global Metadata to the page -->
<title>{title} | {sitename}</title> <!-- Title of the page | Site name from Global Settings -->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
{cms_stylesheet} <!-- Adds attached stylesheets to the page -->
</head>
</__body>
<header role="banner">
<div class="container-fluid pure-g">
<div id="hgroup" class="pure-u-1 pure-u-md-1-3">
<a href='{root_url}' title='{sitename}'>
<img src='{uploads_url}/images/cwlogo-m.png' alt='{sitename}' class="pure-img" /></a>
<!-- .logo //-->
<!-- Site name from Global Settings -->
<strong class="slogan">For the Woman of <span class="green">Style</span> & Success</strong>
</div>
<div class="social-group pure-u-1 pure-u-md-2-3">
{global_content name='banners'}
{* global_content name='social_network' *}
</div>
</div>
</header>
{* end header content block *}
{* navigation bar *}
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
{menu number_of_levels="3" start_level="2" template="cwmag_menu.tpl"}<!-- Show all the menu buttons -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{* content block *}
{* Commented carousel news module and display its functionality}
{* news summarytemplate="diversity :: news-slides-carousel" number="6" idlist="50,49,45,31,48,22" *}
{capture assign=submitted_images}{$entry->file_location}/{$entry->fieldsbyname.Images->value}
{/capture}
<div class="container-fluid">
<div class="carousel slide pure-g" id="myCarousel">
<div c lass="carousel-inner center">
{foreach from=$items item='entry'}
<!-- .news-article (wrapping each article) -->
{if $entry@iteration is div by 2}{$isEven=true}{else}{$isEven=false}{/if}
<div class="item{if $isEven} active{/if}"
<div class="pure-u-1-3 l-box">
<a href='{$entry->moreurl}' title='{$entry->title|cms_escape:htmlall}' class="slider">
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="420,420,c" noembed='0' quality='85' src="{$entry->file_location}/{$entry->fieldsbyname.Images->value}" alt="{$entry->title}" class="pure-img"}
{/if}
{if $isEven}<div class="carousel-caption">
<p>{$entry->category}</p>
<h3>{$entry->title|cms_escape}</h3>
</div>{/if}
</a>
</div>
</div>
<!-- .news-article //-->
{/foreach}
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
<!-- .news-summary //-->
</div>
</div>
<div class="container-fluid content">
<div class="pure-g">
{news sortasc="false" category="*Society" summarytemplate="diversity : news-summary-grid" detailpage="society" number="1"}
{news sortasc="false" category="*Media" summarytemplate="diversity : news-summary-grid" detailpage="media" number="1"}
{news sortasc="false" category="*Fashion" summarytemplate="diversity : news-summary-grid" detailpage="fashion" start="1" number="1"}
{news sortasc="false" category="*Beauty" summarytemplate="diversity : news-summary-grid" detailpage="beauty" start="1" number="1"}
{news sortasc="false" category="*Entertainment" summarytemplate="diversity : news-summary-grid" detailpage="entertainment" number="1"}
{news sortasc="false" category="*Fitness" summarytemplate="diversity : news-summary-grid" detailpage="fitness" number="1"}
{news sortasc="false" category="*Events" summarytemplate="diversity events" number="3"}
</div>
{* end content block *}
{* sidebar content block *}
<aside class="container-fluid l-box sidebar">
{global_content name='videostream'}
<div class="pure-u-1 pure-u-md-1-3 l-box">
{global_content name='facebook'}
</div>
{global_content name='subscription'}
</aside>
{* end sidebar content block *}
{* footer content block*}
<footer class="activewall-footer">
<div class="container-fluid pure-g">
<section class="pure-u-1 pure-u-md-1-3 l-box">
<a href="#">Canadian Woman Magazine</a>
</section>
<section class="pure-u-1 pure-u-md-2-3 l-box">
<a href="#">Bios</a> - <a href="#">Contact us</a> - <a href="#">Media Kit</a> -
<a href="#">Writer's guideline</a>
<p>@2014 Canadian Woman Magazine</p>
</section>
</div>
</footer>
{* end footer content block *}
<a href="#" class="back-to-top"><span class="glyphicon glyphicon glyphicon-chevron-up" aria-hidden="true"></span> Back to Top</a>
<!-- Latest compiled and minified JavaScript -->
<!--[if lt IE 9]>
<__script__ src="//html5shiv.googlecode.com/svn/trunk/html5.js"></__script>
<![endif]-->
<__script__ async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></__script>
<__script__ src="https://code.jquery.com/jquery-1.11.2.min.js"></__script>
<__script__ src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></__script>
<__script__ type="text/javascript">
$('#myCarousel').carousel({
interval: 5000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<1;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</__script>
<__body>
</__html>
{/strip}
Re: Reopened Conditioning issue related to carousel bootstra
Posted: Thu Dec 25, 2014 10:22 pm
by velden
Luya, I (we) need to see what's actually sent to the browser. Don't you have an url to a page with the problem?
Re: Reopened Conditioning issue related to carousel bootstra
Posted: Fri Dec 26, 2014 5:40 am
by luya
velden wrote:Luya, I (we) need to see what's actually sent to the browser. Don't you have an url to a page with the problem?
It is
http://www.cwmag.ca/template.html as displayed on the first post of the topic.
Re: Reopened Conditioning issue related to carousel bootstra
Posted: Fri Dec 26, 2014 2:26 pm
by velden
I see, I started reading from 'reopened' and missed that template.html url. Sorry for that.
First there is an error in your JS:
Code: Select all
SyntaxError: missing ; before statement
...#myCarousel').carousel({interval: 5000})$('.carousel .item').each(fun...
------------------------------------------^
template.html (line 270, col 43)
I would start to fix that before looking further. Hard to debug with errors in code.
Re: Reopened Conditioning issue related to carousel bootstra
Posted: Fri Dec 26, 2014 8:51 pm
by luya
velden wrote:
First there is an error in your JS:
Code: Select all
SyntaxError: missing ; before statement
...#myCarousel').carousel({interval: 5000})$('.carousel .item').each(fun...
------------------------------------------^
template.html (line 270, col 43)
Good catch, fixed. I also remove the {strip} tag so you can view the webpage source better and the html validator is almost clean other than an attribute from iframe part "allowtransparency" provided by a third party plugin. The carousel captions still overlap to each other. If the code needs simplications, suggestion welcome.
In addition, is there a better to implement dynamic "scroll to top".
Thank you for the help.