Textpattern tips, tutorials and code snippets

Custom sorted linked images in section context

Sometimes, we would like Textpattern to do things the system was not designed for. Thankfully txp offers us enough tags and versatility to customise our pages.

Over at http://neme-imca.org/ we have a section where we publish all the NeMe related publications. Each one of the books is linked to a relevant article or section whilst on those articles and sections the books are selected using a comma separated list of image ids.

The code populates the publications by others part of the section.

The code

<txp:variable name="otherpubs" 
	value='<txp:article_custom section="sections, to, include" limit="999" break=",">
	<txp:if_custom_field name="pubs_by_others">
	<txp:custom_field name="pubs_by_others" />
	</txp:if_custom_field>
	</txp:article_custom>' 
/>
<txp:if_variable name="otherpubs">
<txp:images id='<txp:variable name="otherpubs" />' sort="alt desc" limit="999">
<txp:if_different>
<div class="line">
<a href="<txp:site_url /><txp:image_info type="name" />">
	<img src="<txp:site_url />images/<txp:image_info type="id" />
	<txp:image_info type="ext" />" alt="<txp:image_info type="alt" />" 
	title="<txp:image_info type="alt" />" 
	width="<txp:image_info type="w" />" 
	height="<txp:image_info type="h" />" class="grid_6"  
	id="book_<txp:image_info type="id" /> "/></a>
<div class="grid_17 prefix_1"><txp:image_info type="caption" escape="" /></div>
<div class="clear">&nbsp;</div>
</div>
</txp:if_different>
</txp:images>
</txp:if_variable>

Breakdown of the code

A variable named otherpubs is set. The variable collates all image ids from the custom_fields of articles limited by the sections one wants and those ids are separated by a ,.

Using the variable in the images tag the ids can now be displayed.

The order of the images is set using the image alt field and the if_different tag helps in the omission of any duplicate entries.

As we use html in the caption we did not want the standard <txp:image /> tag as the html content bloats the generated image code so we opted for the <txp:image_info /> tags to trim the resulting code.

The links back to the articles or sections are hand written using the name field in the edit image interface.

More information on the forum thread.

Use Textile help to style your comments