<txp:image /> single tag, 9 attributes

image

The image tag is a single tag that Textpattern will replace with the <img src=”…” /> HTML tag matching the image of the numeric id assigned by Textpattern when the image was uploaded via the TXP Images tab.

attributes

id="unset" (integer)
  • Specifies the id assigned at upload of the image to display. Can be found on the Images tab. If both name and id are specified, name is used while id is ignored.
name="unset"
  • Specifies which image to display by its image name as shown on the Images tab.
html_id="unset"
  • The HTML id attribute applied to the wraptag, if set, otherwise to the img tag.
escape="html"
  • Escape HTML entities such as <, > and & for the image’s alt and title attributes.
  • Values: html or unset.
wraptag="unset"
  • HTML tag to be used to wrap the img tag, specified without brackets.
class="unset"
  • CSS class attribute applied to the wraptag, if set, otherwise to the img tag.
style="unset"
  • Inline CSS style rule.
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)

genealogy

Version 4.3.0

  • attributes width and height 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

  • html_id added
  • escape added
  • wraptag added
category: asset
<txp:image /> 2 examples

Display the given image 

<txp:image id="42" />

What it does…
Displays the image uploaded as ID #42.

Apply a CSS class 

<txp:image name="chickens.jpg" class="boxit" />

What it does…
Displays the image named “chickens.jpg” and assigns a CSS class called boxit to the <img> tag.

The style could be defined like this 

img.boxit {
	background: #fff;
	border: 1px solid #ccc;
	display: block;
	margin: -5px 5px 5px -5px;
	padding: 4px;
	position: relative;
}

Had the wraptag attribute been used, the boxit class would have been applied to that instead of directly to the image.

category: asset