Easy way to add a div after every third post in an article container?

Hello all, and thank you - I haven't posted before, but I've trawled through tonnes of pages for issues I've been having elsewhere in the construction of my site and you've all been fantastically useful

Now I'm here because I'm stumped on something relatively simple. I'm creating a portfolio page for my personal website where I want to list the copywriting work I've done in a grid format. You can see for yourself how this is breaking with my current articles row TPL. However, I've done a little poking in the CSS and sorting the formatting out seems as simple as adding "<div class="clear"> </div>" after every third entry (see fixed but functionless version here)

The problem is, I haven't a clue how to get articles to write those divs after every third post it calls, so I was hoping someone here may know Or alternatively, if I'm going about this all wrong, don't hesitate to say!

you can use the property &tpl_n3=`thirdTpl` with the getResources-call

CSS only (breaks in IE8 and earlier)

Welcome to your first post kupocake!

If you are aiming to clear this float in old IE versions too (<9), than you should take a slightly different approach.

@Bruno: Thanks I totally missed tpl_nN.

@kupocake: Even though I prefer Brunos way to handle this, there is another way you could to do that.

You can get the number of appearance of each item on each articles page with [[+idx]] (1 for the first one, 2 for the second one and so on...). Use the :mod output filter to find out if [[+idx]] divided by three is 0 or not.

http://rtfm.modx.com/revolution/2.x/making-sites-with-modx/customizing-content/input-and-output-filters-(output-modifiers)
http://www.php.net/manual/en/language.operators.arithmetic.php





Adding non-semantic Markup is not my cup of tea, how about adding a clear class to every element following every third element?



This will automatically clear every article item following an article that can be divided by three without a remainder.

Regards,

pepebe [ed. note: pepebe last edited this post 12 years, 8 months ago.]

I would prefer the tpl_nN - method, for performance - reasons.
Could be a bit faster, than using math and conditional output-filters.

If you don't like duplicate code, try this:

&tpl = `rowTpl`
&tpl_n3 = `thirdRowTpl`

in your chunk rowTpl:


in your chunk thirdRowTpl:


may be is needed for a unique footprint for each chunk-call, not sure.

That is an awesome example Bruno.

Thanks all, I'll try one of these in a bit

Quote from: Bruno17 at Jan 28, 2014, 10:47 AM

I would prefer the tpl_nN - method, for performance - reasons.
Could be a bit faster, than using math and conditional output-filters.

If you don't like duplicate code, try this:

&tpl = `rowTpl`
&tpl_n3 = `thirdRowTpl`

in your chunk rowTpl:

<div class="articles-item [[+clearclass]]">
    Insert article markup here
</div>

in your chunk thirdRowTpl:

[[$rowTpl? &clearclass=`clear` &id=`[[+id]]`]]

may be

&id=`[[+id]]`

is needed for a unique footprint for each chunk-call, not sure.

Ok, so I've added "&tpl_n3=`portfolio-thirdRowTpl`" (reflecting how my thirdRowTpl is named) to the "Other listing Parameters" in the Portfolio article container's Advanced Settings tab, as well as sticking the code chunks where you've suggested... It looks like the formatting is working, but the third entry on the top row is now invisible (it's there in the source, wrapped in <div class="articles-item clear">)? Was there something I didn't do?

Edit:

I was wrapping each row in "<div class="articles-item [[+clearclass]]">" (which is how I interpret the above) - just dumped it at the end instead, and everything seems to be working fine

Will I need to create "sixthRowTpl" if I want 9 of these per page? Also, Will thirdRowTpl work for every new page as the portfolio expands beyond the 9 items on each page?

Thank you [ed. note: kupocake last edited this post 12 years, 8 months ago.]

Will I need to create "sixthRowTpl" if I want 9 of these per page?

&tpl_nN does work on every Nth row

so

&tpl_n3

does work on row 3,6,9,12......

Quote from: Bruno17 at Jan 31, 2014, 11:31 AM

Will I need to create "sixthRowTpl" if I want 9 of these per page?

&tpl_nN does work on every Nth row

so

&tpl_n3

does work on row 3,6,9,12......

Awesome, thanks again