(image: …) KirbyTag

Attributes

In addition to the main image, option, the tag supports the following attributes: alt caption class height imgclass link linkclass rel srcset target title width

Attribute	Description	Default
alt	The alt attribute that is added to img element	`null`
caption	The caption	`null`
class	The class which is added to figure element	`null`
height	The height which is added to img element	`null`
imgclass	The class which is added to img element	`null`
linkclass	The class which is added to link element	`null`
rel	The rel attribute that is added to link element	`null`
srcset	The srcset attribute that is added to link element	`null`
target	The target attribute that is added to link element	`null`
title	The title attribute that is added to img element	`null`
width	The width which is added to img element	`null`

Attribute defaults from config

You can customize the defaults of this tag's attributes via the kirbytext.image config option.

Examples

Image of the current page

(image: myawesomepicture.jpg)

Image of another internal page

(image: some/other/page/myawesomepicture.jpg)

External image

(image: http://example.com/images/myawesomepicture.jpg)

Image with alternative text

(image: myawesomepicture.jpg alt: This is an awesome picture)

Image with a caption

(image: myawesomepicture.jpg caption: I took this image in the park)

Image with a `title` attribute

(image: myawesomepicture.jpg title: I took this image in the park)

Image with a link

(image: myawesomepicture.jpg link: http://flickr.com)

Image with a link to itself

(image: myawesomepicture.jpg link: self)

Image with a link to an internal page

(image: myawesomepicture.jpg link: some/page)

Image with a link to an internal file

(image: myawesomepicture.jpg link: some/page/somedocument.pdf)

Image with a link and a specified target

(image: myawesomepicture.jpg link: http://flickr.com target: _blank)

Image with a link and a `rel` attribute

(image: myphoto.jpg link: http://mywebsite.com rel: me)

Image with a custom CSS class applied to the figure element

(image: myawesomepicture.jpg class: floated)

Image with a custom CSS class applied to the img element

(image: myawesomepicture.jpg imgclass: myimage)

Image with a custom CSS class applied to the link element

(image: myawesomepicture.jpg link: http://flickr.com linkclass: myimage)

Image with defined `width` and `height` attributes

(image: myawesomepicture.jpg width: 500 height: 300)

Since 4.4.0

Width and height can also be set to auto, which will automatically be replaced by the actual image dimensions.

(image: cat.jpg width: auto height: auto)

This behaviour can also be set as global default for all image kirbytags in your config file.

// config.php
'kirbytext' => [
    'image' => [
        'width' => 'auto',
        'height' => 'auto',
    ]
];

Since 4.0.0

Image with `srcset` with absolut sizes

(image: foo.jpg srcset: 200, 300)

Image with `srcset` from a config srcset name

Use srcset defaults you defined in the thumbs config option:

(image: foo.jpg srcset: album)