24hoursmedia-craftcms/twig-works-image

Twig image transforms for CraftCMS 3.

TwigWorksImage plugin for Craft CMS 3.x

For extra functionalities in this plugin we will request a small fee once Craft 3 GA is released., _(*1)

A twig extension to apply transformations to image tags in blocks of html. Useful for content migrated for legacy systems., _(*2)

• Lightboxify images in HTML
• Remove style and other tags from images
• Apply classes and styles to images

See all available twig filters, _(*3)

Requirements

This plugin requires Craft CMS 3.0.0-RC1 or later., _(*4)

Installation

To install the plugin, follow these instructions., _(*5)

1. Open your terminal and go to your Craft project:, _(*6)

   cd /path/to/project

2. Then tell Composer to load the plugin:, _(*7)

   composer require 24hoursmedia-craftcms/twig-works-image

3. In the Control Panel, go to Settings → Plugins and click the “Install” button for TwigWorksImage., _(*8)

TwigWorksImage Overview

• Lightboxify images in an html document

Configuring TwigWorksImage

Currently there is no configuration., _(*9)

Using TwigWorksImage

See all available twig filters and examples, _(*10)

Lightboxify images in HTML, _(*11)

Add data-toggle="lightbox" and a max width of 100% to images in an html document., _(*12)

Example:, _(*13)

{% set html = '<p>Image:<img src="...." width="200" style="border:1" /></p>' %}
{{ html | work_images_lightboxify | raw }}

This will: - remove most attributes from images in the html - embed the image in a link pointing to the full image - add an attribute data-toggle="lightbox" to the image, _(*14)

(Note you will have to add your own lightbox script, for example in Bootstrap http://ashleydw.github.io/lightbox/), _(*15)

The result:, _(*16)

<p>Image:<img src="...." data-toggle="lightbox" style="max-width: 100%" /></p>

Brought to you by 24hoursmedia, _(*17)