Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Kirby 3 plugin to output optimised images in content textarea fields.

Kirby 3 Optimage

This is a simple Kirby 3 plugin to allow outputting optimised markdown images used in textarea fields with a KirbyTag.

The optimage tag is based on the default image kirbytag and has additional options which allow resizing, optimisation and native lazy-loading via the loading attribute.

Installation

Place the index.php plugin file in /plugins/optimage-tag/.

Add the optimagetag configuration options to your Kirby 3 config file located in /config/config.php.

Usage

In your markdown content field you can use the following options additionally to the default image options:

Resize by width or height, set the compression quality and set loading attribute.

Resize and output image with a width of 1000px
(optimage: image.jpg width: 1000)

Resize and output image with a width of 1000px and image quality of 50%
(optimage: image.jpg width: 1000 quality: 50)

Resize and output image with a height of 1000px and image quality of 50%
(optimage: image.jpg height: 1000 quality: 50)

Output image with the loading attribute set to lazy
(optimage: image.jpg loading: lazy)

<?php
return [
// default values for optimage tag if no values are set
'optimagetag' => [
'width' => '1200',
'height' => null,
'quality' => '55'
]
];
<?php
Kirby::plugin( 'fbrtl/optimage', [
'tags' => [
'optimage' => [
'attr' => [
'alt',
'caption',
'class',
'height',
'imgclass',
'link',
'linkclass',
'loading',
'quality',
'rel',
'target',
'text',
'title',
'width'
],
'html' => function ( $tag ) {
if ( $tag->file = $tag->file( $tag->value ) ) {
$tag->src = $tag->file->url();
$tag->alt = $tag->alt ?? $tag->file->alt()->or( ' ' )->value();
$tag->title = $tag->title ?? $tag->file->title()->value();
$tag->caption = $tag->caption ?? $tag->file->caption()->value();
} else {
$tag->src = Url::to( $tag->value );
}
$link = function ( $img ) use ( $tag ) {
if ( empty( $tag->link ) === true ) {
return $img;
}
if ( $link = $tag->file( $tag->link ) ) {
$link = $link->url();
} else {
$link = $tag->link === 'self' ? $tag->src : $tag->link;
}
return Html::a( $link, [ $img ], [
'rel' => $tag->rel,
'class' => $tag->linkclass,
'target' => $tag->target
] );
};
if ( $tag->width == '' ) {
$tag->width = $this->option( 'optimagetag.width' );
}
if ( $tag->height == '' ) {
$tag->height = $this->option( 'optimagetag.height' );
}
if ( $tag->quality == '' ) {
$tag->quality = $this->option( 'optimagetag.quality' );
}
$tag->src = $tag->file->resize( $tag->width, $tag->height, $tag->quality )->url();
if ( $tag->loading == '' ) {
$tag->loading = 'auto';
}
$image = Html::img( $tag->src, [
'width' => $tag->width,
'height' => $tag->height,
'class' => $tag->imgclass,
'title' => $tag->title,
'alt' => $tag->alt ?? ' ',
'loading'=> $tag->loading
] );
if ( $tag->kirby()->option( 'kirbytext.image.figure', true ) === false ) {
return $link($image);
}
// render KirbyText in caption
if ( $tag->caption ) {
$tag->caption = [ $tag->kirby()->kirbytext( $tag->caption, [], true ) ];
}
return Html::figure( [ $link( $image ) ], $tag->caption, [
'class' => $tag->class
] );
}
],
]
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.