24hoursmedia-craftcms/twig-works-image

Twig image transforms for CraftCMS 3.

1.0.0 2018-03-22 20:59 UTC

Requires

• craftcms/cms: ^3.0.0-RC1

proprietary

• 24HOURSMEDIA

• cms
• Craft
• craftcms
• craft-plugin
• twigworksimage

README

For extra functionalities in this plugin we will request a small fee once Craft 3 GA is released.

A twig extension to apply transformations to image tags in blocks of html. Useful for content migrated for legacy systems.

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

See all available twig filters

Requirements

This plugin requires Craft CMS 3.0.0-RC1 or later.

Installation

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    cd /path/to/project
   

2. Then tell Composer to load the plugin:

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

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

TwigWorksImage Overview

• Lightboxify images in an html document

Configuring TwigWorksImage

Currently there is no configuration.

Using TwigWorksImage

See all available twig filters and examples

Lightboxify images in HTML

Add data-toggle="lightbox" and a max width of 100% to images in an html document.

Example:

{% 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

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

The result:

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

Brought to you by 24hoursmedia