Textpattern offers a very nice tool for displaying images associated with an article – the article_image tag. What the tag does is:

Textpattern will replace this tag with the <img src="..." /> HTML tag matching the numeric ID or URL assigned when the article is posted.

1. Download, install and activate the upm_image plugin.

Article image tag

Using the tag as follows will produce no output if there is no image in the article image field:

<txp:article_image wraptag="p" class="article-image" />

No if_article_image…

In many cases you will need to present your images in a nice way by wrapping them in a <div> or some other markup. The problem arises when there is no image associated with an article – you end up with empty HTML output.

The lack of an <txp:if_article_image>...</txp:if_article_image> tag means we have to find another solution…

Using variables to solve the problem

First place this code in your page, before where you want your article images to display.

<txp:variable name="if_article_image" value='<txp:article_image />' />

Then add your code for displaying the images.

<txp:article limit="1">
<div class="excerpt">
<h2><txp:title /></h2>
</div>
<txp:body />
<txp:if_variable name="if_article_image" value="">
<txp:else />
<div id="article-image" class="clearfix">
<h3>Images associated with this classified</h3>
<p>Click on the image to see a larger size</p>
<txp:upm_article_image limit="4" form="article_image_thumbs" wraptag="div" class="flickrset" />
</div>
</txp:if_variable>
</txp:article>

In the above example we use one plugin to display the images – the upm_image plugin.

The article_image_thumbs form

<a rel="shadowbox[gallery]" href="<txp:upm_img_full_url />" title="<txp:upm_img_name />"><img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />" /></a>

Change the code according to your needs. In our case we are using the excellent Shadowbox online media viewer application to display the images in a modal window.