Skip to content
twig works image plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc
resources/img
src
.gitignore
CHANGELOG.md
LICENSE.md
README.md
composer.json

README.md

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.

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

You can’t perform that action at this time.