Skip to content
M. Mikkel Rummelhoff edited this page Sep 26, 2023 · 7 revisions

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 is a small Craft CMS plugin offering a series of easy-to-use Twig filters for manipulating HTML content.


Basic usage

Retcon 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.retcon.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' ) }}

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' } ]
] ) }}

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

dimensions
Adds width and height attributes to image nodes, if they are missing (and the image referenced in the image nodes' src attribute is a local image file). NEW

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

removeEmpty
Remove empty nodes


Settings

To configure Retcon, copy this file to your config folder, and rename it to retcon.php.