Textformatter to manipulate image markup added via the editor

[Juergen]

Hello @ all,

in the past I had the problem that I wanted to add additional markup and manipulations to images that were added with the editor to my body field. My aim was to add Bootstrap framework classes to my images and to add additional containers for certain CSS3 effects.

I have tried several ways with dom manipulation, jquery and other php manipulations, but all of them dont satisfy my exact needs.

After searching Google i found a php library called "PHP Query" which works similar to jQuery but on serverside. After several tests it seems to me the best way for complex manipulations and so I decided to make a simple textformatter module.

It consists of 2 files:

the phpquery.php file for the library and

the the module file itself which contains the manipulations

The php query library file can be found at https://code.google.com/p/phpquery/downloads/list

The module file:

<?php
/**
 * TextformatterPhpqueryImageFieldMarkupManipulator (1.0.0)
 * A textformatter module to change the markup of images added via editor with the help of the PHPQuery library.
 *
 * @author Kern Juergen
 *
 * ProcessWire 2.x
 * Copyright (C) 2011 by Ryan Cramer
 * Licensed under GNU/GPL v2, see LICENSE.TXT
 *
 * http://www.processwire.com
 * http://www.ryancramer.com
 *
 */
class TextformatterPhpqueryImageFieldMarkupManipulator extends Textformatter
{
    public static function getModuleInfo()
    {
        return array(
            'title' => "TextformatterPhpqueryImageFieldMarkupManipulator",
            'version' => "1.0.0",
            'summary' => "A textformatter module to change the markup of images added via editor with the help of the PHPQuery library (https://code.google.com/p/phpquery/).",
            'author' => "Kern Juergen",
            'href' => "",
            'permission' => array(
                ""
            ),
            'autoload' => false,
            'singular' => false,
            'permanent' => false,
            'requires' => array(
                "PHP>=5.4.0",
                "ProcessWire>=2.5.28"
            )
        );
    }
    public function format(&$str)
    {
    require('phpQuery.php');
        $id        = $this->page;//grab the page id
        $galleryid = 'gallery-' . $id;// create the gallery
        $document  = phpQuery::newDocumentHTML($str);
        // Selects all image elements added via editor
        $matches   = $document->find('img');
        foreach ($matches as $match) {
            //starting manipulations - examples (you can find more and a documentation at https://code.google.com/p/phpquery/wiki/Manual)
            pq('a > img')->addClass('linked'); //add linked class to all linked images
            pq('img')->addClass('img-responsive')->addClass('thumbnail'); //add thumbnail and responsive class to all images       
            pq('.linked')->removeClass('thumbnail');
            pq('a > img')->wrap('<span class="scalecontainer"></span>')->before('<span class="roll"></span>'); //add additional markup to images with links
            pq('img')->parents('a')->addClass('thumbnail')->attr('data-lightbox', $galleryid); //add thumbnail class to the link to the larger version and the data attribute
            pq("a > span > img.align_left)")->parents('a')->addClass('align_left');
            pq("a > span > img.align_right)")->parents('a')->addClass('align_right');
            pq("a > span > img.align_center)")->parents('a')->addClass('align_center');
            pq("p > a.align_center)")->wrap('<div class="image-center"></div>');
            pq("p > img.align_center)")->wrap('<div class="image-center"></div>');
            //end manipulations
        }
        $str = $document;
    }
}

The module file includes the phpquery with the require command.

$matches = $document->find('img');// Selects all the images

This line of code grabs all images

//starting manipulations - you will find more info at https://code.google.com/p/phpquery/
       //These are some manipulations
       pq('a > img')->addClass('linked');//add linked class to all linked images
       pq('img')->addClass('img-responsive')->addClass('thumbnail');//add thumbnail and responsive class to all images       
       pq('.linked')->removeClass('thumbnail'); //remove class thumbnail on linked images
       pq('a > img')->wrap( '<span class="scalecontainer"></span>' )->before('<span class="roll"></span>'); //add additional markup to images with links
       pq('img')->parents('a')->addClass('thumbnail')->attr('data-lightbox', $galleryid); //add thumbnail class to the link to the larger version and the data attribute
       pq("a > span > img.align_left)")->parents('a')->addClass('align_left');
       pq("a > span > img.align_right)")->parents('a')->addClass('align_right');
       pq("a > span > img.align_center)")->parents('a')->addClass('align_center');
       pq("p > a.align_center)")->wrap( '<div class="image-center"></div>' ) ;
       pq("p > img.align_center)")->wrap( '<div class="image-center"></div>' ) ;
       //end manipulations

This is the manipulation section. You can find a lot of examples at the php Query site. The best is that you can use CSS3 selectors to match a certain element on the page. This makes it much easier.

I only posted this module for others who are interested in manipulating images. You use it at your own risk and I doesnt make it public on Github.

The manipulations are only for my purpose and you can make your own. Just write it between "//These are some manipulations" and "//end manipulations".

Install the module at site/modules/ and add this textformatter module to your editor field. All the images added with the editor will be manipulated in an elegant way.

Best regards Jürgen

PS.: I am not a skilled PHP pro, I have never learned it at a professional level. So if anybody has improvements please post it here

Edit: The include of the phpquery.php file should usualy be at the top of the module file, but in this case it can make problems during the installation of the textformatter. This is the reason why I added it inside the function. If you run into problems after the installation please add this line of code to the top and everything works fine.

TextformatterPHPqueryImageFieldMarkupManipulator.zip

[bernhard]

Hi Jürgen,

nice! Thanks for sharing. I've used http://simplehtmldom.sourceforge.net/manual_api.htm before but not together with PW or as textformatter. Nice idea - i'll keep it in mind