For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
luya
Forum Members
Posts: 91 Joined: Wed Jan 23, 2013 1:34 am
Post
by luya Sun Dec 14, 2014 10:49 am
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
Last edited by
luya on Thu Dec 25, 2014 7:41 pm, edited 3 times in total.
luya
Forum Members
Posts: 91 Joined: Wed Jan 23, 2013 1:34 am
Post
by luya Sun Dec 14, 2014 11:08 am
Thank you. That was the element I was looking for.
luya
Forum Members
Posts: 91 Joined: Wed Jan 23, 2013 1:34 am
Post
by luya Fri Dec 19, 2014 5:02 am
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”.
luya
Forum Members
Posts: 91 Joined: Wed Jan 23, 2013 1:34 am
Post
by luya Wed Dec 24, 2014 6:00 am
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.
Masweb
Forum Members
Posts: 173 Joined: Sat May 09, 2009 4:26 pm
Post
by Masweb Wed Dec 24, 2014 10:14 am
<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.
velden
Dev Team Member
Posts: 3497 Joined: Mon Nov 28, 2011 9:29 am
Post
by velden Wed Dec 24, 2014 11:19 am
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}
luya
Forum Members
Posts: 91 Joined: Wed Jan 23, 2013 1:34 am
Post
by luya Wed Dec 24, 2014 6:54 pm
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));
}
});
Last edited by
luya on Thu Dec 25, 2014 7:40 pm, edited 1 time in total.
velden
Dev Team Member
Posts: 3497 Joined: Mon Nov 28, 2011 9:29 am
Post
by velden Wed Dec 24, 2014 8:53 pm
That output is of no use to me. I'd need a webpage to look at.
luya
Forum Members
Posts: 91 Joined: Wed Jan 23, 2013 1:34 am
Post
by luya Thu Dec 25, 2014 7:39 pm
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}
velden
Dev Team Member
Posts: 3497 Joined: Mon Nov 28, 2011 9:29 am
Post
by velden Thu Dec 25, 2014 10:22 pm
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?
luya
Forum Members
Posts: 91 Joined: Wed Jan 23, 2013 1:34 am
Post
by luya Fri Dec 26, 2014 5:40 am
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.
velden
Dev Team Member
Posts: 3497 Joined: Mon Nov 28, 2011 9:29 am
Post
by velden Fri Dec 26, 2014 2:26 pm
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.
luya
Forum Members
Posts: 91 Joined: Wed Jan 23, 2013 1:34 am
Post
by luya Fri Dec 26, 2014 8:51 pm
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.
