(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 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)