Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Display every nth article with an offset
Hi.
I’ve been thinking about this for long enough that it’s taking over my day, and I’m sure someone here is smart enough to point me in the right direction.
I have would like to output articles, ideally with article_custom as I want to use the built-in offset attribute, but only show every nth article. In this example, every fourth article:
Article 1 = yes
Article 2 = no
Article 3 = no
Article 4 = no
Article 5 = yes
Article 6 = no
Article 7 = no
Article 8 = no
Article 9 = yes
Article 10 = no
Article 11 = no
Article 12 = no
Article 13 = yes
Article 14 = no
Article 15 = no
Article 16 = noThe reason for this is that the markup I’m using is column-based, but the appearance is faux rows (think Pinterest), so readers will scan from left to right, with the most recent articles being at the top. Each column (A, B, C and D) will have a number of articles inside it. Assuming each column has the oldest articles lower down, and the article number increments with newer articles, the grid will look something like this:
+----+----+----+----+
| A | B | C | D |
+----+----+----+----+
| 16 | 15 | 14 | 13 |
| 12 | 11 | 10 | 9 |
| 8 | 7 | 6 | 5 |
| 4 | 3 | 2 | 1 |
+----+----+----+----+…if that makes sense. Now, each column will have its own article_custom loop going on, or some other method to extract the articles, but I’m not sure how I might go about the only displaying every nth article part of the equation.
As always, any and all pointers are greatly appreciated. Thank you in advance.
Edit: The most inelegant way I can think of right now is using multiple, concurrent instances of article_custom in a page to each output a single article with the offset attribute incrementing each time. Not pretty, and I haven’t yet checked how much memory it’s going to chew through having 16 (or more) article_custom instances on one page, though I suspect it’s going to be scary.
Last edited by gaekwad (2013-06-21 15:45:53)
Offline
#2 2013-06-21 16:41:05
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,304
Re: Display every nth article with an offset
All that is actually done by the browsers, once you’ve a posted desc in the article tag, a surrounding HTML container with a width of “individual article container x 4” and a CSS float on each of these individual article containers.
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: Display every nth article with an offset
I second uli, CSS should suffice. Have you tried article{float:left} and article:nth-of-type(4n + 1){clear:both}? Otherwise, etc_query is there if you need a true table:
<txp:etc_query data='<txp:article_custom />' query="//article[position() mod 4 = 1]" break="tr">
<td>{.}</td><td>{following-sibling::article[1]}</td><td>{following-sibling::article[2]}</td><td>{following-sibling::article[3]}</td>
</txp:etc_query>Offline
#4 2013-06-21 22:48:23
- gomedia
- Plugin Author
- Registered: 2008-06-01
- Posts: 1,373
Re: Display every nth article with an offset
More food for thought: Create a grid layout using adi_calc
Offline
#5 2013-06-22 06:13:27
- milosevic
- Member
- From: Madrid, Spain
- Registered: 2005-09-19
- Posts: 390
Re: Display every nth article with an offset
I think you can do all that stuff simpler: only one query <txp:article_custom… and using CSS table display properties display:table-cell.
<txp:article_custom ... sort="desc"... >
<div class="mycells"><txp:title/></div>
</txp:article_custom>where CSS
.mycells {width:25%; display:table-cell}This make articles layout as table cells, making rows of four elements where all four cells share the same height (all of them are taller than the tallest cell in the row).
CSS display table properties info: http://quirksmode.org/css/css2/display.html#table
Last edited by milosevic (2013-06-22 06:18:29)
<txp:rocks/>
Offline
Re: Display every nth article with an offset
milosevic wrote:
This make articles layout as table cells, making rows of four elements
Don’t you have to wrap them in some table-row displayed element? In my tests all divs are aligned in one row, though the first four have different width.
Offline
Re: Display every nth article with an offset
Hi, everyone – wow, thanks for your all your input so far. I never fail to be impressed by the brains around here.
Something that I perhaps didn’t make clear enough was the variable height of each article. That is to say, the columns are all 25% of a responsive width, but the content of each column (the articles) are of varying length/size. I don’t know I’m missing some CSS knowledge, but I’m comfortable with floats, divs, etc, I just don’t know if there’s that kind of granularity available in CSS (I am very ready to be proven wrong).
I have a feeling adi_calc will do what I want to do; either way I will report back.
Thank you again, I am very grateful.
Edit: this is what I mean by the Pinterest formatting (image, work safe)
Last edited by gaekwad (2013-06-22 12:11:51)
Offline
Re: Display every nth article with an offset
gaekwad wrote:
I have a feeling
adi_calcwill do what I want to do; either way I will report back.
Assuming your articles are wrapped in <article> tag, that’s roughly equivalent to
<style>
article {float:left; width:25%}
article:nth-of-type(4n + 1) {clear:both; font-weight:bold}
article:nth-of-type(-n + 4) {color:red}
</style>Offline
Re: Display every nth article with an offset
gaekwad wrote:
Edit: this is what I mean by the Pinterest formatting (image, work safe)
Ah, ok, that’s another story, makes me think of flexboxl.
Offline
Re: Display every nth article with an offset
etc wrote:
Ah, ok, that’s another story, makes me think of flexboxl.
Yes! That’s exactly what I thought, too. Well, Nerd Pete thought that, Fabulous Pete was all about the Pinterest.
For my v1 launch I’ve gone for a slew of article statements with offset to fill each column until I can get my head around the alternatives. The memory usage on localhost isn’t going to be the same as the live site with lorem ipsum articles, but I’m going to keep it on watch. I have no doubt Textpattern will get the job done.
Thank you Oleg, Uli, Adi and Jorge.
Offline
Re: Display every nth article with an offset
Don’t thank me yet. ;)
<txp:etc_query data='<txp:article_custom sort="Posted desc" limit="16" />'>
<div>{article[position() mod 4 = 1]}</div>
<div>{article[position() mod 4 = 2]}</div>
<div>{article[position() mod 4 = 3]}</div>
<div>{article[position() mod 4 = 0]}</div>
</txp:etc_query>should divide them in four columns more quickly (only one article_custom call), though could eat some memory, to test.
Offline
Re: Display every nth article with an offset
etc wrote:
Don’t thank me yet. ;)
(with apologies for the animation)
Offline