Textpattern CMS Template Tags

<txp:article_image /> single tag, 8 attributes

article_image

The article_image tag is a single tag. Textpattern will replace this tag with the <img src=”…” /> HTML tag matching the numeric ID or URL assigned when the article is posted.

The image to be associated with the tag is set under the Write tab. Click “Advanced Options” and enter either the URL of the image, or the Textpattern ID (a number set by Textpattern at upload) into the Article image field. Most of the time you will use the image ID here. Note that you can only assign a single image to each article.

Related: if_article_image

attributes

thumbnail="0" (boolean)
  • Use the thumbnail rather than full-size image.
width="width of image in database" (integer) 
  • Specify an image width which overrides the value stored in the database. Use width=“0” to turn off the output of a width attribute in the <img> tag (thus the browser will scale the width if a height is used)
height="height of image in database" (integer) 
  • Specify an image height which overrides the value stored in the database. Use height=“0” to turn off the output of a width attribute in the <img> tag (thus the browser will scale the height if a width is used)
escape="html"
  • Escape HTML entities such as <, > and & for the image’s alt and title attributes.
wraptag="unset"
  • HTML tag to be used to wrap the img tag, specified without brackets.
class="unset"
  • CSS class attribute to apply to the image (or to the wraptag, if set).
html_id="unset"
  • The HTML id attribute assigned to the image (or to the wraptag, if set).
style="unset"
  • Inline CSS style rule.

genealogy

Version 4.3.0

  • width and height attributes added

Version 4.2.0

  • attribute align deprecated

Version 4.0.7

  • default value for attribute escape changed from unset to html

Version 4.0.4

  • class, escape, html_id, thumbnail, and wraptag added.
<txp:article_image /> 2 examples

Use wraptag and class for styling

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

What this does…
This will wrap the image in paragraph tags, applying the class to the paragraph:

<p class="article-image"><img src="..." /></p>

Why you might do it…
It gives you full control over the image’s appearance using CSS.

Note
Without the wraptag, the class is applied directly to the img tag

Link thumbnail to the article

Used in an article list form this will display an article list consisting of hyperlinked article images’ thumbnails.

<txp:permlink><txp:article_image thumbnail="1" /></txp:permlink>

Other tags used: permlink