Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Use textpattern or a plug-in to create a grid with articles
What I would like to achieve within an article-loop is this:
| x | ROW1 BEGIN DIV | x |
| DIV with two article titles (1&2) | 1st article img | 2nd article img |
| x | END ROW1 BEGIN DIV | x |
| x | ROW2 BEGIN DIV | x |
| DIV with two article titles (3&4) | 3rd article img | 4th article img |
| x | END ROW BEGIN DIV | x |
| x | ROW3 BEGIN DIV | x |
| DIV with two article titles (5&6) | 5th article img | 6th article img |
| x | END ROW3 BEGIN DIV | x |
etc.
My problem is that I can’t calculate how to make this happen. I’ve found a few tutorials. But this one doesn’t have the closing tags for the rows. I’ve been messing with adi_calc for hours and can’t figure this out. I can get the row divs to work, but the two columns associated (also divs) with the images not.
Last edited by nejra (2010-12-23 21:03:37)
Offline
#2 2010-12-23 21:59:23
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: Use textpattern or a plug-in to create a grid with articles
Offline
#3 2010-12-23 23:20:05
- gomedia
- Plugin Author
- Registered: 2008-06-01
- Posts: 1,373
Re: Use textpattern or a plug-in to create a grid with articles
Try this tip: Create a grid layout using adi_calc
Offline
#4 2010-12-24 02:35:20
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: Use textpattern or a plug-in to create a grid with articles
Your idea looks like this in HTML:
<div>
<div>
<h2>Title article 1</h2>
<h2>Title article 2</h2>
</div>
<img src="article-image-1.jpg" />
<img src="article-image-2.jpg" />
</div>
<div>
<div>
<h2>Title article 3</h2>
<h2>Title article 4</h2>
</div>
<img src="article-image-3.jpg" />
<img src="article-image-4.jpg" />
</div>
etc.But, it represents no semantic meaning. You can make it simpler:
<div>
<h2>Title article 1</h2>
<img src="article-image-1.jpg" />
</div>
<div class="even">
<h2>Title article 2</h2>
<img src="article-image-2.jpg" />
</div>
<div>
<h2>Title article 3</h2>
<img src="article-image-3.jpg" />
</div>
<div class="even">
<h2>Title article 4</h2>
<img src="article-image-4.jpg" />
</div>With the plug-in zem_nth or with, for example, jQuery you can give a class “even” to each second div. This class “even” you can style with CSS that it looks like as you wish it.
Offline
Re: Use textpattern or a plug-in to create a grid with articles
First off, thanks for your answers.
els: I found that one too. I can use it but I can’t seem to find out how to get the two images in seperate columns (ie divs.)
gomedia: I found that one also, like I stated in my post, but how to use it to create the wrapper divs of the rows?
gugUser: that was my first solution, but I really like the article titles in one div and the images in two seperate divs surrounded by a wrapper div. I know it is not semanticly not very elegant, but I am a advocate of breaking the rules when you know them :).
My html looks like this.
<div class="row">
<div class="col">
<article>
<h3>Title 1</h3>
</article>
<article>
<h3>Title 1</h3>
</article>
</div><!-- End first col -->
<div class="col">
<img src="article_img_id_1" alt="Title 1" />
</div><!-- End second col -->
<div class="col last">
<img src="article_img_id_2" alt="Title 2" />
</div><!-- End third col with extra class last -->
</div><!-- End row -->
While I am typing this perhaps I can combine the nth plugin to check whether a col or row is odd or even and apply the adi_calc plugin to create the grid. Will try this and report myself back.
Many thanks for any thoughts left!
ps. Apologies for the non tabs. I couldn’t figure out how to include them.
Last edited by nejra (2010-12-24 13:53:46)
Offline
Re: Use textpattern or a plug-in to create a grid with articles
Got it! Thanks els. You got me thinking again. Some variable work in conjunction with the nth plugin did the trick. Thought I’d share it. Happy christmas!
<!-- First article is displayed full width-->
<!-- Loop through articles and isolate first -->
<txp:if_first_article>
<h3><txp:title /></h3>
<p>First article content spans 3 columns and has excerpt</p>
</div>
<txp:else />
<txp:zem_nth step="1" of="2"><h1>Step 1 of 2: Begin row</h1></txp:zem_nth>
<!-- Store image variables -->
<txp:zem_nth step="1" of="2">
<txp:variable name="image1">
<h5>[img]<txp:title />[/img]</h5>
</txp:variable>
</txp:zem_nth>
<txp:zem_nth step="2" of="2">
<txp:variable name="image2">
<h5>[img]<txp:title />[/img]</h5>
</txp:variable>
</txp:zem_nth>
<!-- Show title -->
<h3><txp:title /></h3>
<!-- Output image variables on 2nd step -->
<txp:zem_nth step="2" of="2">
<txp:variable name="image1" />
<txp:variable name="image2" />
</txp:zem_nth>
<txp:zem_nth step="2" of="2"><h1>Step 2 of 2: End row</h1></txp:zem_nth>
</txp:if_first_article>@Last edited by nejra (2010-12-24 17:48:36)
Offline