24hoursmedia-craftcms/twig-works-image

Twig image transforms for CraftCMS 3.

1.0.0 2018-03-22 20:59 UTC

This package is auto-updated.

Last update: 2024-03-05 00:52:34 UTC


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