Skip to content

fanningert/kirbycms-extension-image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

KirbyText Extension - Image

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

Installation

KirbyCli

kirby plugin:install fanningert/kirbycms-extension-image

GIT

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.git

GIT submodule

Go 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 update

Manuell

Update

KirbyCli

kirby plugin:update fanningert/kirbycms-extension-image

GIT

Go into the {kirby_installation}/site/plugins/kirbycms-extension-image directory and execute following command.

$ git pull

Don't forget to update the requirement kirbycms-extension-webhelper.

GIT submodule

Go in the root directory of your git repository and execute following command to update the submodule of this extension.

$ git submodule update

Upgrade from version lower then 0.9

Delete following files and then use the install instruction.

  • {kirby-install}/site/tags/image.php
  • {kirby-install}/site/plugins/image_helper.php

ToDos

  • 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 ...

Documentation

Kirby configuration values

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

KirbyTag attributes

Image

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

Gallery

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.

Examples

Simple image

(imageext: image.jpg [attr_name: attr_value])

Output:

<img src="image01.jpg" class="image">

Complex image (TODO: not working at the moment)

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

Simple gallery

(image_gallery: image01.jpg,image02.jpg,image03.jpg [attr_name: attr_value])

Compley gallery

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