Image Formatting

Images can be included in WikiText with the following syntax:

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

You can also insert image tiddlers from the editor toolbar. Click picture () and select a picture file.

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:

Images as Links

<$link to="HelloThere" tooltip="Custom tooltip">{{$:/core/icon}}</$link>

Renders as:

Importing Images

Use the import button (under the Tools tab in the sidebar), or drag and drop. See Importing Tiddlers for details.

Introduced in v5.2.0 You can also import images by dropping or pasting images into the tiddler editor.