Exclamation marks are used to insert an image tag.

Textile example: Images

The original Textpattern carver: !/carver.png!

Textile input (editable)

Browser output

HTML output

More about: Images

1. An image from another domain:


2. Use () parentheses to include alt text and title at the same time:

!/carver.png(the carver)!

3. Combine with a link with an image link:


4. Images can be aligned left:


Or right:


Or centered:


5. An image can have CSS styles:

!{border:1px solid #333; padding:5px;}/carver.png!

Or CSS classes:

!(classy-image bevel)/carver.png!

6. To center an image, you may use this style:

!{display:block; margin:0 auto;}/carver.png!

7. To include an image with a complex formula using latex, you can link to a remote service and have it sent back as an image:


This would produce:

8. For the generation of relative images and to better support content for responsive layouts, the automatic generation of image width and height can be suppressed by a Textile parser option as of Textile v2.5.1.

Further reading: Images

  1. MDN: The HTML <img> element

See something wrong in this page? Outdated info, a broken link, faulty code example, or whatever? Please write an issue and we’ll fix it.