Home

Got WYSIWYG?

Ever have a client put 4 MB PNG files in their Redactor fields, failing to apply any of your meticulously crafted image transforms? Writers consistently using the <strong> tag for headers? Have you ever needed to implement lazy loading of images embedded in WYSIWYG content, or wanted to remove pesky inline styles without breaking a sweat? This is for you.

Retcon HTML is a small Craft CMS plugin offering a series of easy-to-use Twig filters for manipulating HTML content.

---

Basic usage

Retcon HTML uses DOMDocument to rewrite HTML. It includes a series of different methods, exposed as Twig filters:

{{ entry.body | retconTransform( 'someImageTransform' ) }}

All methods, however, can also be called as template methods:

{{ craft.retconHtml.transform( entry.body, 'someImageTransform' ) }}

...or through the Retcon HTML service, if you ever want to use it in your PHP:

<?php echo craft()->retconHtml->transform( $entry->body, 'someImageTransform' ); ?>

If you prefer, Retcon also includes a "catch-all" filter, taking the filter name as its first argument:

{{ entry.body | retcon( 'transform', 'someImageTransform' ) }}

{{ craft.retconHtml.retcon( entry.body, 'transform', 'someImageTransform' ) }}

<?php echo craft()->retconHtml->retcon( $entry->body, 'transform', 'someImageTransform' ); ?>

And finally, you'll also be able to apply several operations in one go (for a theoretical performance gain). Each index in the operation array will be either a String value (filter name) if there are no arguments, or an array of arguments (where the filter name should be the first index).

{{ entry.body | retcon( [
    [ 'transform', 'someImageTransform' ],
    'lazy',
    [ 'attr', '.foo', { 'class' : 'bar' } ]
] ) }}

{{ craft.retconHtml.retcon( entry.body, [
    [ 'transform', 'someImageTransform' ],
    'lazy',
    [ 'attr', '.foo', { 'class' : 'bar' } ]
] ) }}

<?php
echo craft()->retconHtml->retcon( $entry->body, array(
    array( 'transform', 'someImageTransform' ),
    'lazy',
    array( 'attr', '.foo', array( 'class' => 'bar' ) ),
) );
?>

Methods

transform
Apply a named or inline image transform to all images

srcset
Apply an array of named or inline image transform to all images for responsive image support

lazy
Replaces the src attribute of image tags with a transparent, 1x1 px base64 encoded gif, retaining the original source in a data attribute

autoAlt
Adds filename as alternative text for images missing alt tags

attr
Adds and/or replaces a set of attributes and attribute values – e.g. class. Can be used to remove inline styles.

renameAttr
Renames HTML attributes, retaining attribute values

wrap
Wraps stuff in other stuff

unwrap
Removes parent node, retaining all children

remove
Removes all elements matching the given selector(s)

only
Removes everything but the elements matching the given selector(s)

change
Changes tag type

inject
Inject strings or HTML

---

Settings

Base transform path

By default, Retcon HTML will store any transformed images to a subfolder below the original image (identical to Craft's behaviour when applying transforms to an AssetFileModel). If you want to store transforms somewhere else, you can set a different base path here. Make sure that the folder is writable!

Base transform URL

Self explanatory.

Encoding

HTML output will be encoded to UTF-8 by default, but you can set the encoding to be anything you want.