Insert Images into Essays and Posts

Eine deutschsprachige Version dieses Artikels finden Sie auf www.brisoft.de/de.

If you insert an image into an essay or a page with the insert media function  the image will always be shown at full width. In order to get a floating image with a smaller size you would have to add it manually in the HTML editor. To make this easier I have created this shortcode plugin. It allows you to select and insert an image and configure how it should be displayed.

Installation

To install the plugin download the attached zip file, unpack it and upload it to the storage/plugins directory of your Koken installation.

It should be visible in the Koken backend under Settings/Plugins:

Insert (floating) images

Insert (floating) images

If the plugin does not appear here please check that you have uploaded it correctly. You may also have to clean the system cache under Settings/System. If you have updated the plugin from a former version sometimes it is necessary to disable and enable the plugin in order to load the correct version.

The plugin has got global settings that you can modifiy via Setup

Global settings

Global settings

Show images in essay index
By default this option is enabled. In the case that your theme uses the truncate option in the list of essays, e.g. {{ essay.content truncate="450" paragraphs="true"}} you should disable this option because otherwise the output would not be OK.
Use lazy loading of images
Enable this option if you want the images loaded when they are scolled into view. You should not enable it if the theme uses Ajax to load the essay resp. page content (e.g. the theme “Madison 2”). If this option is enabled and the images are not displayed correctly try disabling this option.
Add link to caption
If this option is selected not only the image will be linked but also the image caption (if displayed)
Default CSS class
Here you can enter a CSS class (or more) that will be applied to all images that are added by this plugin. This option can be overridden vor each image.

Usage

After the plugin has been activated a new icon appears in the list of insertable media:

Insert media

Insert media

If you select the new icon the default media selection window appears where you can select the image you want to add.

After the image has been inserted you can configure the settings by pressing the settings icon:

Settings

Settings

A window appears where you can configure the display of the image according to your needs:

Image settings

Image settings

The following options are available:

Image Caption

You can select whether you want to display

  • no text (Do not show),
  • only the title of the image (Show title only),
  • only the caption of the image (Show caption only)
  • caption and title (Show title and caption).

The text will be wrapped by a figcaption tag.

Floating

If you want to display the image with text floating around the image you can select whether you want to display the image on left or right side of your text.

Use preset size

Available options are Koken’s default preset sizes up to medium-large size (960px). If an image is displayed with one of these sizes no additional resizing is necessary.

Width in pixel

In addition to the preset size you can set an exact width that should be used for the image. If you use your own width you should also select a preset size that is larger than the specified size. In this case Koken can load this image and then resize it.

Height in pixel

If you want a specific height for your image, you can specify a height value in pixels. If you specify a width and height Koken will only use one value to keep the original image dimensions. If want the the image to be displayed with the exact width and height, you must set option Crop to “Yes”.

Aspect ratio

Here you can specify an aspect ratio for the image, e.g. 3:2. This will lead to a cropped image of the specified width and a height that depends on the given ratio.

Crop

If you want an image displayed with the exact width and height, set this option to “Yes” and it will be cropped to the given width and height.

Margin

Left resp. right margin. Will be added to the style depending on the selected floating setting. If no floating is selected this option will be ignored.

Additional CSS class(es)

If you want to assign additional styling to the image (e.g. margins, border, etc.) you can add these definitions to the theme’s CSS file and enter the name of the class(es) here.

Open link in new window

Set this value to “Yes” if you want to open a new browser windows (resp. tab) when the image is clicked.

Link

Select here what should happen if you click on the image.

If you want to learn more about these options, you can read the description of the koken:img tag in the Koken Website.

Fork me on GitHub
Download
Version: 0.96.1 (2014/10/06)

Changelog

2014/10/060.96.1Modified the icon to enhance the visibility in Koken 0.18 and higher.
2014/08/030.96
  • Validation rules for numerical fileds added
  • Use of check boxes instead of listes containing “true/false”

This plugin requires at least Koken version 0.16.2.

2014/06/010.93
  • Added two new global option to enable resp. disable lazy loading of images.
  • If the selected preset size is too small for the entered width a larger preset will be automatically used.
2014/05/300.91
  • Added two new global options to enable links on image captions and to set a default CSS class.
  • New options to set an image height and enable “cropping” of images.
  • New option to configure the behaviour of image (and caption) links.
  • The used CSS classes for the HTML tags generated by this plugin have been changed to follow the Koken’s recommendations.
2014/04/180.80New option to specify an aspect ratio (patch by Kaspar Sprogis)
2014/02/020.79After update to Koken 0.11 thumbnails were no longer visible in pages.
2014/01/070.78After update to Koken 0.11 the embedded photos were no longer visible in essays. This version has only been tested with Koken 0.11. I can’t guarantee that it works with older version.
2013/12/150.77Option to set right resp. left margin (patch by Pete Hough)
2013/11/170.76Missing quote added (patch by Richard Levitte)
2013/11/100.75Added plugin option to enable the display of images in essay list (thanks to Richard Levitte)
Removed option to add separate style definitions to figure tag.
comments powered by Disqus