rasteiner/k3-image-tag

An (image: ...) tag that resizes the image.

0.0.0 2019-02-15 14:25 UTC

Requires

• getkirby/composer-installer: ^1.1

MIT

• Roman Steiner

README

For Kirby v.3.

This plugin replaces the default (image: ...) tag with a version that resizes the image to a maximum size specified in your config.php. It also allows you to redefine the generated HTML code via a snippet.

Installation

Download

Download and copy this repository to /site/plugins/k3-image-tag.

Git submodule

git submodule add https://github.com/rasteiner/k3-image-tag.git site/plugins/k3-image-tag

Composer

composer require rasteiner/k3-image-tag

Setup

Example for simply resizing the image:

site/config/config.php:

return [
  'imagetag' => [
    'max-width': 1400
  ]
];

Example snippet for a custom snippet:

site/config/config.php:

return [
  'imagetag' => [
    'snippet': 'imagetag'
  ]
];

site/snippets/imagetag.php:

<a href="<?= $image->resize(2000)->url() ?>" data-fancybox="page"><img src="<?= $image->resize(900)->url() ?>" alt="<?= html($alt) ?? $image->alt()->html() ?>" /></a>

Notice that the output of the snippet will still be parsed as markdown (beacuse the output of all kirbytags is). Line breaks in your HTML might be interpreted as "paragraps" for markdown, which might have unintended outcomes in the DOM.

The following $variables are passed to the snippet:

• $image: the resolved File object to the original image passed to the tag
• All attributes specified in the tag are extracted to variables.

License

MIT

Credits

• Roman Steiner

Plugin based on the getkirby/pluginkit template, made by lukasbestle.