I need some assistance with looping expression engine entries. I've hit a brick wall with a website i've been working on. Basically the site has 6 latest projects at the bottom with next and prev icons to the left and right. When you reach the end of the projects there is a back to start of projects button that brings the user back to the start of the projects... well, the client doesn't want this anymore and just wants the entries have an infinite loop!
Is this possible with EE, is there an add-on for looping entries I could use?
My code is:
{exp:channel:next_entry category_group="1" category="{categories}{category_id}|{/categories}"}
<a class="rightNav" href="{id_path='projects-test/view'}" style="color:#000;"><<</a>
{/exp:channel:next_entry}
{embed="projects-test/related" stop_before="{entry_date format="%Y-%m-%d %H:%i"}" category_id="{categories show_group="1" limit="1"}{category_id}{/categories}"}
{exp:channel:prev_entry category_group="1" category="{categories}{category_id}|{/categories}"}
<a class="leftNav" href="{id_path='projects-test/view'}" style="color:#000;">>></a>
{/exp:channel:prev_entry}
{/exp:channel:entries}
Related template code:
{exp:channel:entries channel="project" limit="6" category_group="1" stop_before="{embed:stop_before}" related_categories_mode="yes" custom_fields="yes"}
{if count == "1"}<ul id="filmStrip">{/if}
<li>
{exp:imgsizer:size src="{project_image}" height="68px" width="137px"}
<img src="{sized}" height="{height}" width="{width}" alt=""/>
{/exp:imgsizer:size}
<p class="thumbTitle">{title}</p>
</li>
{if count == total_results}</ul>{/if}
{/exp:channel:entries}
This plugin may do the trick for you.
Usage probably looks like this:
{exp:bbr_prevnext_entry current_entry_id="{entry_id}" category="{categories}{category_id}|{/categories}" channel_name="project" orderby="entry_date" sort="desc" return_fields="entry_id" cycle="yes"}
<a class="rightNav" href="/projects-test/view/{next_entry_id}" style="color:#000;"><<</a>
{/exp:bbr_prevnext_entry}
{embed="projects-test/related" stop_before="{entry_date format="%Y-%m-%d %H:%i"}" category_id="{categories show_group="1" limit="1"}{category_id}{/categories}"}
{exp:bbr_prevnext_entry current_entry_id="{entry_id}" category="{categories}{category_id}|{/categories}" channel_name="project" orderby="entry_date" sort="desc" return_fields="entry_id" cycle="yes"}
<a class="leftNav" href="/projects-test/view/{prev_entry_id}" style="color:#000;">>></a>
{/exp:bbr_prevnext_entry}
Related
I would like to have an if/then argument for 2 classes (from the css) for a menu item. One where the menu item is blue if it is NOT the active page, and one where the menu item is red if it IS the active page. I have figured out the active page portion, now I am trying to figure out the if it is not active portion. I hope that makes sense. I have included a code snippit below.
<ul class="menu ul">
<li><a class="Blue <?php if($page =='home'){echo 'active';}?>" href="../index.php" >Home</a></li>
I have tried multiple variations, however I cannot figure it out. Thanks for your help!
Oleksandr is correct: It's better to have your links styles blue by default and overwrite it with the active class.
If you would want to give a hyperlink either one class or the other based on a simple condition, I would recommend this syntax:
<ul class="menu ul">
<li>
<a class="<?= $page == 'home' ? 'active' : 'Blue' ?>" href="../index.php" >Home</a>
</li>
</ul>
The example above uses the ternary operator and the echo shortcut syntax, and simply echoes one of two values based on the outcome of the condition.
as far as I understood you want to add different classes to link depending on $page variable.
for this i would recommend you to just use else statement
<ul class="menu ul">
<li><a class="<?php if($page =='home'){echo 'Blue';}else{echo 'Red';} ?>" href="../index.php" >Home</a></li>`
However it would be much better to check state of $page somewhere up (to not make spagetti code). And then echo only class in the a element.
<?php if($page =='home'){$menu_class='Blue';}else{$menu_class= 'Red';};?>
<ul class="menu ul">
<li><a class="<?php echo $menu_class; ?>" href="../index.php" >Home</a></li></pre>
I had an old template and I updated MODX core and extras from 2.2 to 2.6.5.
After the update the output has become very strange.
here's my code for accordion:
<li [[+wf.classes]]>
[[+wf.classnames:contains=`livello2`:eq=`livello2`:then=`<a class="goto_scheda" title="[[+wf.pagetitle]]">[[%cat.vai_scheda? &topic=`catalogo` &namespace=`plastitalia`]]</a>`:else=``]]
<a [[+wf.classnames:contains=`livello1`:eq=`livello1`:then=`class="link_tassonomia"`:else=``]] href="[[+wf.link]]" title="[[+wf.pagetitle]]">[[+wf.pagetitle]]</a>
[[+wf.wrapper]]
</li>
and this is the output:
<ul class="sottomenu_catalogo">
<li class="first livello2">
first livello2
<a first="" livello2="" href="/catalogo/packaging/category/product-ml-50" title="Product ml 50">Product ml 50</a>
</li>
<li class="livello2">
livello2
<a livello2="" href="/catalogo/packaging/category/product-ml-80" title="Product ml 80">Product ml 80</a>
</li>
</ul>
Is there someone that has some idea about how to fix this?
I was missing the :or operator so, for some strange reason wayfinder was printing the condition as class.
<li [[+wf.classes]]>
[[+wf.classnames:contains=`livello2`:or:eq=`livello2`:then=`<a class="goto_scheda" title="[[+wf.pagetitle]]">[[%cat.vai_scheda? &topic=`catalogo` &namespace=`plastitalia`]]</a>`:else=``]]
<a [[+wf.classnames:contains=`livello1`:or:eq=`livello1`:then=`class="link_tassonomia"`:else=``]] href="[[+wf.link]]" title="[[+wf.pagetitle]]">[[+wf.pagetitle]]</a>
[[+wf.wrapper]]
</li>
To create an editable pane in C5 I use the following between div tags so the user can simply use the content editor to add text. This works quite well:
<div class="myWrapper">
<?php
$a = new Area('WelcomeText');
$a->display($c);
?>
</div>
But what do I do when the mark-up is a little complicated? I would like to get user to update the 2 images and respective links themselves. Eg picture: http://i48.tinypic.com/4jma8p.png
What is the easiest way for non-code literate users to do this?
<ul class="Gal_2">
<li class="Frst">
<a href="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG2.jpg" rel="group">
<img src="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG2.jpg" width="224" height="150" alt="Island Rab" align="left" />
</a>
</li>
<li>
<a href="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG1.jpg" rel="group">
<img src="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG1.jpg" width="224" height="150" alt="Island Rab - Lopar beach" align="right" />
</a>
</li>
</ul>
Thanks in advance...
PC
Create a custom block with the free Designer Content addon: http://www.concrete5.org/marketplace/addons/designer-content
The block you create will have two image fields that link to other pages, and then use "static html" fields to surround the images with your <ul> and <li> tags.
This is actually a perfect use case for Designer Content, so it should be fairly self-explanatory. But if you run into problems, post a message to the support forum (or just email me directly at concrete#jordanlev.com).
Does anyone know how can i check if href is equal to current page link in smarty? I want to add a class "active" to a link from a menu.
My code goes something like this
<div id="navigation-menu">
Home
How it Works
Prices
</div>
Think you can do something like:
<div id="navigation-menu">
<a href="index.php"{if $smarty.get.page eq ''} class="active"{/if}>Home</a>
<a href="index.php?page=how_it_works"{if $smarty.get.page eq 'how_it_works'} class="active"{/if}>How it Works</a>
<a href="index.php?page=prices"{if $smarty.get.page eq 'prices'} class="active"{/if}>Prices</a>
</div>
But not sure, don't know smarty.
OK, I have set up channel for the client to add projects. The way it works is simple:
I have a category page that displays all of the projects from the chosen category.
I then have a title_permalink page that displays a project, on this page there are 6 most recent related projects that are from that category, each linking to a projects/view page. On this page it displays the project and again, the SAME 6 most recent related projects.
I need to change the 6 recent related projects to be 6 PREVIOUS projects (from the category) dependant on which project has been chosen? For example, I have 20 projects sorted by date entered, I click on number 11 which was entered on Friday at 09:30. I need the view page to display the PREVIOUS 6 projects (by date&time) dependant on which project page you are on.
I have searched high and low but haven't found any help. I'm not asking someone to give me the answer. I just need pointed in the right direction as to the right solution for this.
The code for my project (title_permalink) page is:
<div id="projectView">
{exp:channel:entries channel="project"}
{exp:imgsizer:size src="{project_image}" width="980px" height="450px"}
<img src="{sized}" width="{width}" height="{height}"/>
{/exp:imgsizer:size}
<div id="projectView_overlay"></div>
<div id="projectView_content">
<h3>{title}</h3>
<p class="projectView_floatLeft"><b>Client:</b> {project_client} – <b>Value:</b> £{project_value} – <b>Duration:</b> {project_duration} weeks – <b>Architect:</b> {project_architect}</p>
<p class="projectView_floatRight" style="color:#fff; font-size: 12.5px; font-weight:bold; margin-bottom: 5px;">{categories}<< Back to<br />{category_name}{/categories}</p>
</div>
{/exp:channel:entries}
<br style="clear:both"/>
</div><!--END PROJECT VIEW-->
<ul id="filmStrip">
{exp:channel:entries start_on="{entry_date format="%Y-%m-%d %H:%i"}" channel="project" limit="6" category_group="1" related_categories_mode="yes" custom_fields="yes"}
<li>
{exp:imgsizer:size src="{project_image}" height="68px" width="137px"}
<img src="{sized}" height="{height}" width="{width}" alt=""/>
{/exp:imgsizer:size}
<p class="thumbTitle">{title}</p>
</li>
{/exp:channel:entries}
</ul><!--END FILM STRIP-->
Thanks for any help!
There is a parameter for the channels tag called start_on=[DATE]. I suggest you grab the entry date from the project you want to pull entries before, then use that date in your related entry tag. Note, you are using a variable {exp:channel:entries} to populate another channel:entries tag so it will always pull the projects you want - you are not hardcoding it.
{exp:channel:entries} // This tag gets your single project data
//output your project details here
{exp:channel:entries start_on="{entry_date format="%Y-%m-%d %H:%i"}" channel="project" limit="6" category_group="1" related_categories_mode="yes" custom_fields="yes"} // this tag grabs the last six projects relative to the single project being displayed
{make your links to the projects here}
{/exp:channel:entries}
{/exp:channel:entries}
You need to use the format YYYY-MM-DD HH:MM, as above.
The one flaw in Dan's answer is that he's nesting two channel:entries tags. That can lead to disaster. You need to embed the "related" template. Also, I think you want stop_before, not start_on. Try this modified code:
<div id="projectView">
{exp:channel:entries channel="project"}
{exp:imgsizer:size src="{project_image}" width="980px" height="450px"}
<img src="{sized}" width="{width}" height="{height}"/>
{/exp:imgsizer:size}
<div id="projectView_overlay"></div>
<div id="projectView_content">
<h3>{title}</h3>
<p class="projectView_floatLeft"><b>Client:</b> {project_client} – <b>Value:</b> £{project_value} – <b>Duration:</b> {project_duration} weeks – <b>Architect:</b> {project_architect}</p>
<p class="projectView_floatRight" style="color:#fff; font-size: 12.5px; font-weight:bold; margin-bottom: 5px;">{categories}<< Back to<br />{category_name}{/categories}</p>
</div>
<br style="clear:both"/>
</div><!--END PROJECT VIEW-->
{embed="projects/related" stop_before="{entry_date format="%Y-%m-%d %H:%i"}"}
{/exp:channel:entries}
And projects/related looks like:
{exp:channel:entries channel="project" limit="6" category_group="1" stop_before="{embed:stop_before}" related_categories_mode="yes" custom_fields="yes"}
{if count == "1"}<ul id="filmStrip">{/if}
<li>
{exp:imgsizer:size src="{project_image}" height="68px" width="137px"}
<img src="{sized}" height="{height}" width="{width}" alt=""/>
{/exp:imgsizer:size}
<p class="thumbTitle">{title}</p>
</li>
{if count == total_results}</ul>{/if}
{/exp:channel:entries}