Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Zebra stripes every two articles
Hi all, “how do I” wrap every two articles in a div, and also cycle div’s class to odd/even class so that I can make a zebra stripes of article couples?
e.g. I need to get:
<div class="even">
<div class="article">
<h2>Article title</h2>
<p>Article body</p>
</div>
<div class="article">
<h2>Article title</h2>
<p>Article body</p>
</div>
</div>
<div class="even">
<div class="article">
<h2>Article title</h2>
<p>Article body</p>
</div>
<div class="article">
<h2>Article title</h2>
<p>Article body</p>
</div>
</div>
…Last edited by caruso_g (2011-03-03 16:38:27)
Offline
#2 2011-03-03 16:48:44
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,315
Re: Zebra stripes every two articles
Has none of these two proposals worked for you?
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: Zebra stripes every two articles
zem_nth can be very helpful in these situations. Keep in mind also current CSS selectors, or some JQuery might do the job. But if it has to be in the markup, zem_nth is for you.
Offline
Re: Zebra stripes every two articles
uli wrote:
Has none of these two proposals worked for you?
Hi Uli, thanks for your reply, but I’m already using that solution just to insert the <hr/> tag every two articles and it works smoothly.
The issue, here, is that I need to insert an opened <div class="even"> on articles “1,5,7,n” and a <div class="odd"> one on articles “2,4,6,n”
I finally add the closing </div> every two articles thanks to the linked solution.
Offline
Re: Zebra stripes every two articles
Keep in mind that if it’s to apply styles, you really only need either odd or even classes. Also keep in mind that you may not need either, because you can use :pseudo-class selectors. Lastly keep in mind that you can tear your hair out trying to get this into the markup with Textpattern, or just use a bit of javascript to make your life easier.
Offline
Re: Zebra stripes every two articles
There’s a TXPTip similar to this.
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
Re: Zebra stripes every two articles
nabrown78 wrote:
Lastly keep in mind that you can tear your hair out trying to get this into the markup with Textpattern…
Exactly…
The issue is that I am using images to mimic product features micro-articles related to a specific main product article so I have no access to something like if_last_article since there is no if_last_image. This creates a bug in the code where if features are odd I have no closing div… >:( while on even features it work like a charm.
I need to sleep on it, but I think jQuery is the only viable way, even if I don’t like to make the page loading to heavy for dom manipulation.
Offline
#8 2011-03-04 00:30:29
- gomedia
- Plugin Author
- Registered: 2008-06-01
- Posts: 1,373
Re: Zebra stripes every two articles
Hi Giuseppe,
How about:
<txp:variable name="article_count" value="0" />
<txp:variable name="pair_count" value="0" />
<txp:article>
<txp:adi_calc name="article_count" add="1" />
<txp:if_variable name="article_count" value="1">
<txp:adi_calc name="pair_count" add="1" />
<txp:smd_if field="txpvar:pair_count" operator="divisible" value="2">
<div class="even">
EVEN
<txp:else />
<div class="odd">
ODD
</txp:smd_if>
</txp:if_variable>
<p><txp:title /></p>
<txp:if_variable name="article_count" value="2">
</div>
<txp:variable name="article_count" value="0" />
</txp:if_variable>
</txp:article>You’ll need to install adi_calc & smd_if for this though.
Offline
Re: Zebra stripes every two articles
As nabrown78 mentioned, you can use zem_nth which will simplify your code, but add a plugin.
<div class="myclass <txp:zem_nth step="1" of="2"> odd</txp:zem_nth>">
<div class="article">
<h2>Article title</h2>
<p>Article body</p>
</div>
<div class="article">
<h2>Article title</h2>
<p>Article body</p>
</div>
</div>Offline
Re: Zebra stripes every two articles
Wow Adi, you blowed my mind! :D
Wonderful solution (and now reference…!) but unluckily (apart that it seems printing first div class="odd") it doesn’t print on last div in case of odd number of features.
Btw, I wrote a similar code, but a way lot not as elegant as your solution:
<txp:if_variable name="alphaOmega" value="alpha">
<txp:variable name="alphaOmega" value="omega" />
<txp:else />
<txp:variable name="alphaOmega" value="alpha" />
</txp:if_variable>
<txp:zem_nth step="1" of="4">
<div class="even">
</txp:zem_nth>
<txp:zem_nth step="3" of="4">
<div class="odd">
</txp:zem_nth>
<div class='grid_4 <txp:variable name="alphaOmega" />'>
<h5 id='feature-<txp:image_info type="id" />'><txp:image_info type="alt" /></h5>
<txp:image class="feature grid_1 alpha" wraptag="p" />
<p class="grid_3 features_description">
<txp:image_info type="caption" />
</p>
</div>
<txp:if_variable name="alphaOmega" value="omega">
</div>
</txp:if_variable>To solve the issue I had to add a custom field “oddFeatures” and check for it in the parent form so that it would add the missing closing div in case of odd features. Quick and dirty.
Talking with client, though, we find a better solution. Only even features… Quickier and dirtier.
p.s.
o.t. Adi, what about your great adi_menu next big release? It is working like a charm here! ;)
Offline
Re: Zebra stripes every two articles
OK, so I didn’t realize you wanted this all with one article call. The following should handle all circumstances. ie whatever number of articles are produced will have the container div closed properly.
<txp:zem_nth step="1" of="4"><div class="odd container"></zem_nth>
<txp:zem_nth step="3" of="4"><div class="even container"></zem_nth>
<div class="article">
<h5 id='feature-<txp:image_info type="id" />'><txp:image_info type="alt" /></h5>
<txp:image class="feature grid_1 alpha" wraptag="p" />
<p class="grid_3 features_description">
<txp:image_info type="caption" />
</p>
</div>
<txp:zem_nth step="1" of="2"><txp:if_last_article></div></txp:if_last_article></zem_nth>
<txp:zem_nth step="2" of="2"></div></zem_nth>Last edited by mrdale (2011-03-04 16:37:53)
Offline
Re: Zebra stripes every two articles
mrdale wrote:
OK, so I didn’t realize you wanted this all with one article call. The following should handle all circumstances. ie whatever number of articles are produced will have the container div closed properly.
Unluckily it is not that simple. The page on which “features” will be printed is itself an article and I had to use “images” to mimic pseudo-sub-articles. Each alt is feature’s title, caption is the text, and the images itself is the feature’s icon. So, there is no <txp:if_last_image> tag.
Thank you all for your help anyway.
Feature request: It would be REALLY interesting to get <txp:if_first_image> or <txp:if_last_image> in next TXP version.
Offline