Textpattern tips, tutorials and code snippets

Use images for section list links

Building on Mary’s upm_category_image plugin which provides us with the functionality to replace text links to categories with linked images, this tip suggests a method which can produce similar results for a section list. This is made possible with Stef’s smd_gallery.

  1. Download, install and activate the smd_gallery plugin

The method

  1. Create an image category named “section-images”.
  2. Upload one image for each section you have.
  3. Change the “name” field of the image with that of the section you would like the image to be linked to.
  4. Allocate the image category “section-images” for the images and save.

The code

<ul><txp:smd_gallery form="section-links" category="section-images" /></ul>

and the section-links form:

<li><a rel="section" href="<txp:site_url />{name}/"><img src="<txp:site_url />images/{imagedef}" title="{caption}" alt="{alt}" thumb="1" /></a></li>

2 Comments Comment feed

I’ve been manually hand-coding menus that require images…
I will definitely check this out, thank you!

Seems to be a good idea but the step 3 is a problem. The images do not link to sections they represent. With what exactly do one have to replace <txp:site_url />{name}/ to make each image link to its section?

Add a comment

Use Textile help to style your comments