Insert Images into Essays and Posts

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.