Skip to content

Kirby 4.4.1

(image: …)

Embeds an image

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: myawesomepicture.jpg link: http://flickr.com)
(image: myawesomepicture.jpg link: self)
(image: myawesomepicture.jpg link: some/page)
(image: myawesomepicture.jpg link: some/page/somedocument.pdf)
(image: myawesomepicture.jpg link: http://flickr.com target: _blank)
(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: 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)