article image

From Textpattern CMS User Documentation

Tag reference quick links:

<txp: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.

Attributes

Tag will accept the following attributes (case-sensitive):

class="class name": CSS class attribute to apply to the image (or to the wraptag, if set).; Default: unset.
escape="html": Escape HTML entities such as <, > and & for the image's alt and title attributes.; Value: html or unset.; Default: html.
height="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); Default: height of image stored in the database.
html_id="id": The HTML id attribute assigned to the image (or to the wraptag, if set).; Default: unset.
style="style rule": Inline CSS style rule.; Default: unset.
thumbnail="boolean": Use the thumbnail rather than full-size image.; Values: 1 (yes) or 0 (no).; Default: 0.
width="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); Default: width of image stored in the database.
wraptag="tag": HTML tag to be used to wrap the img tag, specified without brackets.; Default: unset.

Examples

Example 1: 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

Example 2: 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

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.

Main Topics