Wrap all <img>'s in <div>, take the alt attribute and add it into a <p> inside

Question

Trying to replace this jquery code with some php server side magic:

$(document).ready(function() {
    $('#text img').each(function(){ 
     source = $(this).attr('src');
     $(this).wrap($('<div class="caption '+ $(this).attr('class') + '"></div>')).removeAttr('class').removeAttr('height').removeAttr('width');
     $(this).after('<p>' + $(this).attr('alt') + '</p>');
     $(this).attr('src', '/system/tools/phpthumb/phpThumb.php?src=' + source + '&wl=200&hp=200&q=85&f=jpg');
    });
});

All it does is take this:

<img class="right" src="blah.jpg" alt="My caption" width="100" height="200" />

And replaces it with:

<div class="caption right">
    <img src="/system/tools/phpthumb/phpThumb.php?src=blah.jpg&wl=200&hp=200&q=85&f=jpg" alt="My caption" />
    <p>My caption</p>
</div>

The images are scattered throughout a block of textile formated html between <p>'s. Something like this:

<p>My paragraph text</p>
<img src="image.jpg" />
<p>Another paragraph text <img src="another_image.jpg" /> with more text</p>
<p>And so on</p>

It enables users to float images left, right or center and thumbnails are automatically created using phpthumb. I'm assuming I'd need to use regular expressions. I'm new to php and only know frontend coding. How would you attack this?

Answer 1

Some completely untested code:

preg_match('|<img class="([a-z\ ]+)" src="([a-z\ ]+)" alt="([a-z\ ]+)" />|i', 'PUT THE EXISTING HTML HERE', $matches);

echo <<<EOT
<span class="{$matches[0]}">
  <img src="{$matches[1]}" />
<p>{$matches[2]}</p>
</span>
EOT; #this should be at the start of line

Interested though, in why you can't output the right html in the first place? Loading up a regex engine is not without overhead!

Answer 2

I recommend you to use a parser such as DOMDocument. In addition with DOMXPath you can translate the jQuery code nearly one by one:

$documentSource = '<div id="text"><img class="right" src="blah.jpg" alt="My caption" width="100" height="200" /></div>';
$doc = new DOMDocument();
$doc->loadHTML($documentSource);
$xpath = new DOMXPath($doc);
foreach ($xpath->query('//html/body/*[@id="text"]/img') as $node) {
    // source = $(this).attr('src');
    $source = $node->getAttribute('src');

    // $(this).after('<p>' + $(this).attr('alt') + '</p>');
    $pElem = $doc->createElement('p', $node->getAttribute('alt'));

    // $('<div class="caption '+ $(this).attr('class') + '"></div>')
    $divElem = $doc->createElement('div');
    $divElem->setAttribute('class', 'caption '.$node->getAttribute('class'));

    // $(this).wrap( … );
    $divElem->appendChild($node->cloneNode(true));
    $divElem->appendChild($pElem);
    $node->parentNode->replaceChild($divElem, $node);

    // $(this).removeAttr('class').removeAttr('height').removeAttr('width');
    $node->removeAttribute('class');
    $node->removeAttribute('height');
    $node->removeAttribute('width');

    // $(this).attr('src', '/system/tools/phpthumb/phpThumb.php?src=' + source + '&wl=200&hp=200&q=85&f=jpg');
    $node->setAttribute('src', '/system/tools/phpthumb/phpThumb.php?src=' . $source . '&wl=200&hp=200&q=85&f=jpg');
}
echo $doc->saveXML();

Answer 3

I think you might be interested in a PHP library that mimics jQuerys capabilities natively inside PHP using its DOM extensions.

The project is called PHPQuery - http://code.google.com/p/phpquery/

It could be easily installed through PEAR and usage is similar to jQuery syntax

Answer 4

Ended up using this:

<?php
$string = '{body}';
$documentSource = mb_substr($string,3,-4);

$doc = new DOMDocument();
$doc->loadHTML($documentSource);
$xpath = new DOMXPath($doc);
foreach ($xpath->query('//html/body/img') as $node) {
    $node->removeAttribute('height');
    $node->removeAttribute('width');
    $source = $node->getAttribute('src');

    $node->setAttribute('src', '/system/tools/phpthumb/phpThumb.php?src=' . $source . '&wl=200&hp=200&q=85&f=jpg');

    $pElem = $doc->createElement('p', $node->getAttribute('alt'));

    $divElem = $doc->createElement('div');
    $divElem->setAttribute('class', 'caption '.$node->getAttribute('class'));
    $node->removeAttribute('class');

    $divElem->appendChild($node->cloneNode(true));
    $divElem->appendChild($pElem);
    $node->parentNode->replaceChild($divElem, $node);

}
?>