Display the first image from a list in the article image field
In a current project (will post a link when the site goes live) we were tasked with the following:
- Display an image to represent a work project if the user is on an article list page
- If the user is on the individual page then display all the images associated with the project
Thanks to the new image tags introduced in Textpattern 4.3.0 this task is quite easy.
The draft code
The code below works fine for most purposes – see the opening <txp:images break=""> tag with break="" to turn off the default <br /> tag.
<txp:article limit="100">
<txp:if_individual_article>
<txp:output_form form="portfolio_gallery" />
<txp:else />
<div class="portfolio">
<txp:permlink class="portfolio_item">
<txp:if_article_image>
<txp:images break="">
<txp:smd_if_thumbnail type="large">
<txp:smd_thumbnail type="large" add_stamp="1" />
</txp:smd_if_thumbnail>
</txp:images>
</txp:if_article_image>
</txp:permlink>
<p><txp:title /></p>
</div>
</txp:if_individual_article>
</txp:article>
So, what’s the problem?
Well, if one looks at the TXP images tag page – there is no sorting attribute for an image list if there is more than one image entered in the article image field – if you want to use the first image referenced in the field.
So, if you have something like 1,2,3,10,12,31 in your article image field you are out of luck – you can’t get image #1 to display automatically because there is not sorting attribute for the first image in a list.
The solution!
<txp:images break="" sort='field(`ID`,<txp:custom_field name="article_image" />)'>
The above solution comes courtesy of the great Stef Dawson in this TXP forum thread.
Look at the post to see why sorting by custom_field works.
The final code
<txp:article limit="100">
<txp:if_individual_article>
<txp:output_form form="portfolio_gallery" />
<txp:else />
<div class="portfolio">
<txp:permlink class="portfolio_item">
<txp:if_article_image>
<txp:images break="" sort='field(`ID`,<txp:custom_field name="article_image" />)'>
<txp:smd_if_thumbnail type="large">
<txp:smd_thumbnail type="large" add_stamp="1" />
</txp:smd_if_thumbnail>
</txp:images>
</txp:if_article_image>
</txp:permlink>
<p><txp:title /></p>
</div>
</txp:if_individual_article>
</txp:article>
Thanks to Stef for helping me with this code snippet for the project!
7 Comments - Comments RSS Feed
Joe Hastings
# 4 March 2011
Good tip, thanks Jonathan and Stef. I had been achieving the same result until now by using a single article image to illustrate the list and an image category to define the array of images (gallery) in the article. This is neater, I think.
Jeff Soo
# 4 March 2011
If all you want is the first image, article_image will do that (as of Txp 4.3.0).
Jonathan Stubbs
# 5 March 2011
Nora - yes, @limit=“1”@ would probably be a good idea but it works anyway without the attribute. We could sort by ID but in this case the client wanted to be able to choose the image that displays on the list page, so the easiest way to do that is to pick the first image in the list.
In this project, the client places all the images in order of appearance in the article image field. On the individual page this results in a Galleriffic image gallery, otherwise one image is displayed in the overall portfolio.
@Joe – yes, this is much neater and no use of plugins at all. I’ll post the code and URL when the site goes live.
@Jeff – no it won’t, because in each entry to the Portfolio section there is always a list of images and we need to display the first image listed in the field.
Nora Brown
# 18 March 2011
Interesting! Does it work (output only a single image) because field(`ID`,<txp:custom_field name="article_image" />) only ouputs the first ID?
Jonathan Stubbs
# 19 March 2011
Without looking at the code itself, that would be my guess. It would be good practice though to add a limit="1" to the <txp:images>...</txp:images> container tag.
Nora Brown
# 4 March 2011
This is really handy — just to get the images to display in the order you’ve specified them in the
article_imagefield. But don’t you needlimit="1"on the<txp:images />tag, to get it to display only the first image?And I think, in your particular example, since the ID’s you listed are actually in numerical order, you could sort by ID and be okay. The trouble would arise if you wanted 1,2,3,31,12,10 — right?