A Kirby 3 plugin to output optimised images in content textarea fields.

readme.md

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)

config.php

<?php 

return [
  
  // default values for optimage tag if no values are set
	'optimagetag' => [
		'width'   => '1200',
		'height'  => null,
		'quality' => '55'
	]

];

index.php

<?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
							] );
					}
			],
    ]
]);