TiddlyWiki5/editions/tw5.com/tiddlers/wikitext/Images in WikiText.tid

caption: Images
created: 20131205160221762
modified: 20140919191059369
tags: WikiText [[Working with TiddlyWiki]]
title: Images in WikiText
type: text/vnd.tiddlywiki

! Image Formatting

Images can be included in WikiText with the following syntax:

```
[img[Motovun Jack.jpg]]
[img[http://tiddlywiki.com/favicon.ico]]
```

If the image source is the title of an image tiddler then that tiddler is directly displayed. Otherwise it is interpreted as a URL and an HTML `<img>` tag is generated with the `src` attribute containing the URL.

A tooltip can also be specified:

```
[img[An explanatory tooltip|Motovun Jack.jpg]]
```

Attributes can be provided to specify CSS classes and the image width and height:

```
[img width=32 [Motovun Jack.jpg]]
[img width=32 class="tc-image" [Motovun Jack.jpg]]
```

Note that attributes can be specified as transclusions or variable references:

```
[img width={{!!mywidth}} class=<<image-classes>> [Motovun Jack.jpg]]
```

The image syntax is a shorthand for invoking the ImageWidget.

! Displaying Images via Transclusion

You can also display an image stored in a tiddler by transcluding that tiddler. The disadvantage of this approach is that there is no direct way to control the size of the image.

```
{{Motovun Jack.jpg}}
```

Renders as:

{{Motovun Jack.jpg}}
Docs updates 2014-09-19 20:56:07 +00:00			`caption: Images`
Big docs update Finally sorting out the wikitext documentation 2013-12-05 16:21:10 +00:00			`created: 20131205160221762`
Docs updates 2014-09-19 20:56:07 +00:00			`modified: 20140919191059369`
			`tags: WikiText [[Working with TiddlyWiki]]`
Big docs update Finally sorting out the wikitext documentation 2013-12-05 16:21:10 +00:00			`title: Images in WikiText`
			`type: text/vnd.tiddlywiki`

Added wikitext image support We’ve added a parser to recognise the `[img[URL or tiddler title]]` format, and an associated image widget. 2014-04-17 11:52:32 +00:00			`! Image Formatting`

			`Images can be included in WikiText with the following syntax:`

			```
			`[img[Motovun Jack.jpg]]`
			`[img[http://tiddlywiki.com/favicon.ico]]`
			```

			If the image source is the title of an image tiddler then that tiddler is directly displayed. Otherwise it is interpreted as a URL and an HTML `<img>` tag is generated with the `src` attribute containing the URL.

			`A tooltip can also be specified:`

			```
			`[img[An explanatory tooltip\|Motovun Jack.jpg]]`
			```

			`Attributes can be provided to specify CSS classes and the image width and height:`

			```
			`[img width=32 [Motovun Jack.jpg]]`
Rename "tw-image-" classes to "tc-image-" Part of #764 2014-08-28 16:47:43 +00:00			`[img width=32 class="tc-image" [Motovun Jack.jpg]]`
Added wikitext image support We’ve added a parser to recognise the `[img[URL or tiddler title]]` format, and an associated image widget. 2014-04-17 11:52:32 +00:00			```

			`Note that attributes can be specified as transclusions or variable references:`

			```
			`[img width={{!!mywidth}} class=<<image-classes>> [Motovun Jack.jpg]]`
			```

			`The image syntax is a shorthand for invoking the ImageWidget.`

			`! Displaying Images via Transclusion`

			`You can also display an image stored in a tiddler by transcluding that tiddler. The disadvantage of this approach is that there is no direct way to control the size of the image.`
Big docs update Finally sorting out the wikitext documentation 2013-12-05 16:21:10 +00:00
			```
			`{{Motovun Jack.jpg}}`
			```

			`Renders as:`

			`{{Motovun Jack.jpg}}`
Added wikitext image support We’ve added a parser to recognise the `[img[URL or tiddler title]]` format, and an associated image widget. 2014-04-17 11:52:32 +00:00