Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2013-06-21 15:32:44

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 3,581
GitHub

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 = no

The 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,242

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

#3 2013-06-21 17:17:47

etc
Developer
Registered: 2010-11-11
Posts: 4,432
Website GitHub

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,357
Website

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: 389

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

#6 2013-06-22 11:08:22

etc
Developer
Registered: 2010-11-11
Posts: 4,432
Website GitHub

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

#7 2013-06-22 11:29:41

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 3,581
GitHub

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

#8 2013-06-22 12:19:39

etc
Developer
Registered: 2010-11-11
Posts: 4,432
Website GitHub

Re: Display every nth article with an offset

gaekwad wrote:

I have a feeling adi_calc will 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

#9 2013-06-22 12:24:04

etc
Developer
Registered: 2010-11-11
Posts: 4,432
Website GitHub

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

#10 2013-06-22 12:28:41

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 3,581
GitHub

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

#11 2013-06-22 12:40:53

etc
Developer
Registered: 2010-11-11
Posts: 4,432
Website GitHub

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

#12 2013-06-22 12:44:26

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 3,581
GitHub

Re: Display every nth article with an offset

etc wrote:

Don’t thank me yet. ;)

(with apologies for the animation)

Offline

Board footer

Powered by FluxBB