Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Laying out articles in a grid
I would like to lay out articles in a multi-column grid format. I imagine this requires some creative use of paging. Does anyone have examples?
Offline
Re: Laying out articles in a grid
I guess you are talking about excerpts (in article lists) not articles
All you need to do is wrap them in a div with a class and then style that class. (Check your default form)
You will need to be extra careful with the number of words in the excerpts.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Laying out articles in a grid
Yes, I am referring to a grid of excerpts. My application is actually to create a grid of products for an ecommerce site.
I already have a multi-column layout, so I suspect I may need to use a table within my center column. However, with a table I would have to break to the net row at the correct count. How would I do it with CSS? Simply set the height/width and depend on the browser to do the wrapping?
Perhaps I may want to do a 3×5 grid, but then I also have to do paging to the next 15 items.
Offline
Re: Laying out articles in a grid
You can use article_images to provide a picture of the product and an excerpt for a short description.
Basic code
<txp:if_article_list>
<div class="product">
<h3><txp:permlink><txp:title /></txp:permlink></h3>
<p><txp:permlink><txp:article_image thumbnail="1" /></txp:permlink></p>
<txp:excerpt /></div>
<txp:else />
Your individual article tags which should include <txp:body /> here
</txp:if_article_list>and the css
.product {width:150px; height:200px; margin:0 10px; border:1px solid #eee; padding:5px; float:left;overflow:hidden;}
Your problem willl then be to break out of the floats and there are numerous techniques for that – some more semantically correct than others.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Laying out articles in a grid
Thanks colak, I’m already aware of the info you provided, the individual article is easy enough, it is not the article content I’m worried about, it is the actual grid layout. I’m not sure I can effectively use floats as my multi-column layout already is using floats.
What I’m most interested in learning is if there is possibly a way I could use a table and somehow emit a <tr> then a few articles each wrapped by <td> then a new <tr> than a few more articles each wrapped in <td> etc. I assumed this would take some clever usage of paging.
colak wrote:
You can use article_images to provide a picture of the product and an excerpt for a short description.
Basic code
<txp:if_article_list>
<div class="product">
<h3><txp:permlink><txp:title /></txp:permlink></h3>
<p><txp:permlink><txp:article_image thumbnail="1" /></txp:permlink></p>
<txp:excerpt /></div>
<txp:else />
Your individual article tags which should include <txp:body /> here
</txp:if_article_list>and the css
.product {width:150px; height:200px; margin:0 10px; border:1px solid #eee; padding:5px; float:left;overflow:hidden;}
Your problem willl then be to break out of the floats and there are numerous techniques for that – some more semantically correct than others.
Offline
Re: Laying out articles in a grid
Hi Mark,
This is untested – espacially for paging as you mention:
<txp:if_article_list>
<table id="products">
<txp:article wraptag="tr" break="td" limit="5" listform="products" />
<txp:article wraptag="tr" break="td" limit="5" offset="5" listform="products"/>
<txp:article wraptag="tr" break="td" limit="5" offset="10" listform="products"/ >
</table>
<txp:else />
Your individual article tags which should include <txp:body /> here
</txp:if_article_list>your products form:
<txp:permlink><txp:title /></txp:permlink>
<txp:permlink><txp:article_image /></txp:permlink>Last edited by colak (2009-08-26 15:08:09)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Laying out articles in a grid
mericson: you can have floats within floats, no need for tables.
TXPDream – A Textpattern Tag Library for Adobe Dreamweaver. (updated for 4.2.0) | jdw_if_ajax – Only serve certain parts of a page when requested with AJAX
Offline
Re: Laying out articles in a grid
If you are using a grid template like 960.gs or similar and wanted to make a single TXP article appear in a number of columns inside one of the grid cells, which is normally the case, wrap the article body in a ul tag with a class or ID and each column content in a li tag. Textile doesn’t handle this very well but XHTML works fine inside an article. Mirror the relevant Grid system CSS attributes for divs in a div into the ul and li class or id et voila, an article in columns that line up with the grid.
This is a useful general technique because most txp tags and plug-ins are better at producing a correctly marked up ul than a grid system div.
Last edited by joebaich (2009-08-27 10:29:26)
Offline
Pages: 1