TiddlyWiki5/editions/tw5.com/tiddlers/widgets/ImageWidget.tid

caption: image
created: 20140416160234142
modified: 20220721102303815
tags: Widgets
title: ImageWidget
type: text/vnd.tiddlywiki

! Introduction

The image widget displays images that can be specified as a remote URL or the title of a local tiddler containing the image.

! Content and Attributes

Any content of the `<$image>` widget is ignored.

|!Attribute |!Description |
|source |The URL of the image, or the title of an image tiddler |
|width |The width of the image |
|height |The height of the image |
|tooltip |The tooltip to be displayed over the image |
|alt |The alternative text to be associated with the image |
|class |CSS classes to be assigned to the `<img>` element |
|loading|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI |

The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.

! Image Status Classes

<<from-version "5.2.2">> The following CSS classes are automatically added to the `<img>` element to indicate the status of the image. Note that only one of these classes will be added at the same time.

|''tc-image-loading'' |When the image is being loaded |
|''tc-image-loaded'' |The image has been loaded successfully |
|''tc-image-error'' |The image could not be loaded |

! External Images and the ''_canonical_uri'' field

When used to display tiddler-based images, the image widget operates in two distinct modes:

* If the ''_canonical_uri'' field is present then it is used as the ''src'' attribute of the generated `<img>` element and the ''text'' field is ignored
* Without the ''_canonical_uri'' field, the image widget generates an `<img>` element that embeds the image data directly using a `data:` URI.

See ExternalImages for more details.
Image lazy loading (#6809) * Extend image widget with lazy loading support * docs: added from-version to docs update 2022-07-21 14:30:56 +00:00			`caption: image`
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			`created: 20140416160234142`
Image lazy loading (#6809) * Extend image widget with lazy loading support * docs: added from-version to docs update 2022-07-21 14:30:56 +00:00			`modified: 20220721102303815`
More mangling of reference docs 2014-09-10 23:06:19 +00:00			`tags: Widgets`
Image lazy loading (#6809) * Extend image widget with lazy loading support * docs: added from-version to docs update 2022-07-21 14:30:56 +00:00			`title: ImageWidget`
			`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
			`! Introduction`

			`The image widget displays images that can be specified as a remote URL or the title of a local tiddler containing the image.`

			`! Content and Attributes`

			Any content of the `<$image>` widget is ignored.

			`\|!Attribute \|!Description \|`
			`\|source \|The URL of the image, or the title of an image tiddler \|`
Allow percentage width and height on image widget 2014-10-19 12:21:20 +00:00			`\|width \|The width of the image \|`
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			`\|height \|The height of the image \|`
			`\|tooltip \|The tooltip to be displayed over the image \|`
Add alt attribute to image widget 2014-08-20 09:00:34 +00:00			`\|alt \|The alternative text to be associated with the image \|`
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			\|class \|CSS classes to be assigned to the `<img>` element \|
Image lazy loading (#6809) * Extend image widget with lazy loading support * docs: added from-version to docs update 2022-07-21 14:30:56 +00:00			\|loading\|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI \|
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
Allow percentage width and height on image widget 2014-10-19 12:21:20 +00:00			`The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.`

Image widget: Add classes for loading/loaded/error 2022-01-02 17:28:54 +00:00			`! Image Status Classes`

			<<from-version "5.2.2">> The following CSS classes are automatically added to the `<img>` element to indicate the status of the image. Note that only one of these classes will be added at the same time.

			`\|''tc-image-loading'' \|When the image is being loaded \|`
			`\|''tc-image-loaded'' \|The image has been loaded successfully \|`
			`\|''tc-image-error'' \|The image could not be loaded \|`

First pass at external image support A bunch of little changes that together enable external image support. Try: ``` tiddlywiki editions/tw5.com --verbose --build externalimages ``` Then open `externalimages.html`, look for the images in the more/types tab of the sidebar, open them and verify that they are set with an external SRC attribute, not a data URI. 2014-06-12 07:36:30 +00:00			`! External Images and the ''_canonical_uri'' field`

			`When used to display tiddler-based images, the image widget operates in two distinct modes:`

			* If the ''_canonical_uri'' field is present then it is used as the ''src'' attribute of the generated `<img>` element and the ''text'' field is ignored
			* Without the ''_canonical_uri'' field, the image widget generates an `<img>` element that embeds the image data directly using a `data:` URI.

			`See ExternalImages for more details.`