Images

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:

!https://example.com/example.png!

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:

!/carver.png!:https://textpattern.com/

4. Images can be aligned left:

!</carver.png!

Or right:

!>/carver.png!

Or centered:

!=/carver.png!

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:

!http://www.codecogs.com/eq.latex?\int_{-\infty}^{\infty}e^{-x^{2}}dx=\sqrt{\pi}!

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.