This extended version of the original KirbyTag image function. You can replace the default image with set the config parameter. A gallery tag is also included.
Examples can you see in action here: Kirby Extension - Image Extended
kirby plugin:install fanningert/kirbycms-extension-image
Go into the {kirby_installation}/site/plugins directory and execute following command.
$ git clone https://github.com/fanningert/kirbycms-extension-webhelper.git
$ git clone https://github.com/fanningert/kirbycms-extension-image.gitGo in the root directory of your git repository and execute following command to add the repository as submodule to your GIT repository.
$ git submodule add https://github.com/fanningert/kirbycms-extension-webhelper.git ./site/plugins/kirbycms-extension-webhelper
$ git submodule add https://github.com/fanningert/kirbycms-extension-image.git ./site/plugins/kirbycms-extension-image
$ git submodule init
$ git submodule updatekirby plugin:update fanningert/kirbycms-extension-image
Go into the {kirby_installation}/site/plugins/kirbycms-extension-image directory and execute following command.
$ git pullDon't forget to update the requirement kirbycms-extension-webhelper.
Go in the root directory of your git repository and execute following command to update the submodule of this extension.
$ git submodule updateDelete following files and then use the install instruction.
- {kirby-install}/site/tags/image.php
- {kirby-install}/site/plugins/image_helper.php
- Add water stamp support (
kirby.extension.imageext.watermark) or you can use the overlay filter (overlay) to overlay the image with a other image - Add ImageMagick support
- Reactivate the support for caption field as image title
- Default profile parameter
kirby.extension.imageext.default_profile - Documentation, Wiki ...
| Kirby option | Default | Values | Description |
|---|---|---|---|
kirby.extension.imageext.debug |
false | true/false | Print the internal used array for debug |
kirby.extension.imageext.driver |
'gd' | 'gd','im' | Used driver for image manipulation |
kirby.extension.imageext.support.tag.image |
false | true/false | Activate/Deactivate the tag image |
kirby.extension.imageext.support.tag.image_gallery |
false | true/false | Activate/Deactivate the tag image_gallery |
kirby.extension.imageext.profiles |
false | {array} | Array of profiles |
kirby.extension.imageext.default_profile |
"none" | {string} | (not implemented) Default used profile for image manipulation |
kirby.extension.imageext.watermark |
false | false/{string} | (not implemented) |
kirby.extension.imageext.width |
false | {number} | Image width for the resize methode |
kirby.extension.imageext.height |
false | {number} | Image height for the resize methode |
kirby.extension.imageext.quality |
90 | {number 0-100} | Output quality for the created image |
kirby.extension.imageext.caption_field |
false | false/{string} | File field which is used for the caption text |
kirby.extension.imageext.caption_top |
false | true/false | Position of the caption, top or bottom of the image |
kirby.extension.imageext.linkclass |
'image-link' | {string} | Class for the link element |
kirby.extension.imageext.imgclass |
'image' | {string} | Class for the img element |
kirby.extension.imageext.figureclass |
'image-figure' | {string} | Class for the figure element |
kirby.extension.imageext.gallery.class |
'image-gallery' | {string} | Class for the gallery element |
kirby.extension.imageext.gallery.prefix |
'gallery-' | {string} | |
kirby.extension.imageext.gallery.link.class |
'fancybox' | {string} | |
kirby.extension.imageext.gallery.link.attr |
'rel' | {string} | |
kirby.extension.imageext.target |
false | false/{string} | Same effect like the html target attribute |
| Option | Default | Values | Description |
|---|---|---|---|
| driver | gd |
{string} | You can define the used converter class. see kirby.extension.imageext.driver |
| profile | none |
{string} | |
| caption_text | false | false/{string} | |
| caption_class | image-figure |
{string} | |
| caption_top | false | true/false | |
| caption_field | false | false/{string} | |
| link_class | image-link |
{string} | Class for the link element |
| link_target | false | false/{string} | |
| link_rel | false | ||
| link_title | false | ||
| link_url | false | ||
| image_source | false | false/{string} | |
| image_class | image |
{string} | Class for the img element |
| image_alt | false | ||
| image_title | false | ||
| image_width | false | false/{number} | Image width for the resize methode |
| image_height | false | false/{number} | Image height for the resize methode |
| image_left | false | ||
| image_top | false | ||
| image_quality | 90 | {number 0=>100} | |
| mode | none | none/resize/crop | |
| upscale | false | true/false | |
| overwrite | false | true/false | |
| filter_blur | false | true/false/{number >0} | true = 1 pass |
| filter_grayscale | false | true/false/{number 0=>100} | true = 100, when number is used is the value of opacity |
| filter_brightness | false | false/{numerb -255=>255} | |
| filter_contrast | false | false/{numerb -100=>100} | |
| filter_colorize | false | ||
| filter_edges | false | true/false | |
| filter_emboss | false | true/false | |
| filter_invert | false | true/false | |
| filter_opacity | false | false/{number 0=>100} | |
| filter_sepia | false | true/false | |
| filter_sketch | false | true/false | |
| filter_smooth | false | false/{numerb -10=>10} | |
| filter_pixelate | false | false/{number >0} | |
| filter_overlay | false | ||
| imgclass | view image_class |
||
| alt | view image_alt |
||
| title | view `` | ||
| width | view image_width |
||
| height | view image_height |
||
| left | view image_left |
||
| top | view image_top |
||
| quality | view image_quality |
||
| caption | view caption_text |
||
| class | view caption_class |
||
| blur | view filter_blur |
||
| linkclass | view link_class |
||
| link | view link_url |
||
| target | view link_target |
||
| grayscale | view filter_grayscale |
||
| brightness | view filter_brightness |
||
| contrast | view filter_contrast |
||
| colorize | view filter_colorize |
||
| edges | view filter_edges |
||
| emboss | view filter_emboss |
||
| invert | view filter_invert |
||
| opacity | view filter_opacity |
||
| sepia | view filter_sepia |
||
| sketch | view filter_sketch |
||
| smooth | view filter_smooth |
||
| pixelate | view filter_picelate |
||
| overlay | view filter_overlay |
||
| resize | (deprecated) view mode |
||
| text | (deprecated) view image_alt |
||
| popup | (deprecated) view link_target |
On the gallery tag can you use every attribute from the image tag and the following attributes.
| Option | Default | Values | Description |
|---|---|---|---|
| gallery | false | false/{string} | It is used as suffix for the gallery-ID. When active it will be automatic create a link to the original image. So you can use a javascript zoom library. |
(imageext: image.jpg [attr_name: attr_value])
Output:
<img src="image01.jpg" class="image">(image: image01.jpg [attr_name: attr_value])
(srcset: image01.webp [type: {mimetype}] [media: {mediaquery}] [attr_name: attr_value])
(/image)
Output:
<picture>
<source srcset="image01.webp" type="image/webp">
<img src="image01.jpg" class="image">
</picture>(image_gallery: image01.jpg,image02.jpg,image03.jpg [attr_name: attr_value])
(image_gallery [attr_name: attr_value] gallery: 1)
(image: dsc00439.jpg [attr_name: attr_value])
(image: dsc00439.png [attr_name: attr_value])
(/image_gallery)
Output:
<div class="image-gallery">
<figure class="image-figure figcaption-bottom">
<a href="http://{server}/{content-url}/dsc00439.jpg" class="image-link fancybox" rel="gallery-1">
<img src="http://{server}/thumbs/dsc00439-2789dbdbbf034039f537d46f8ecb623c.jpg" class="image">
</a>
</figure>
<figure class="image-figure figcaption-bottom">
<a href="http://{server}/{content-url}/dsc00439.png" class="image-link fancybox" rel="gallery-1">
<img src="http://{server}/thumbs/dsc00439-9c18f1a4d771b71c6b82d2d7f584c367.png" class="image">
</a>
</figure>
</div>