Wrap all <img> s in a <div>, take the alt attribute and add it to the <p> inside
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:
<img class="right" src="blah.jpg" alt="My caption" width="100" height="200" />
And replaces it:
<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>
Images are scattered all over the html textile form block in between <p>
. Something like that:
<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 allows users to float images left, right, or center, and thumbnails are automatically generated using phpthumb. I guess I will need to use regular expressions. I am new to php and only know front-end encoding. How do you attack this?
a source to share
Finished with 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);
}
?>
a source to share
I recommend using a parser like DOMDocument . In addition to DOMXPath, you can translate jQuery code almost 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();
a source to share
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
Wondering why, why can't you output the correct html in the first place? Downloading a regex engine isn't without the overhead!
a source to share
I think you might be interested in a PHP library that mimics the capabilities of jQuerys inside PHP using DOM extensions.
The project is called PHPQuery - http://code.google.com/p/phpquery/
It can be easily installed via PEAR and use is similar to jQuery syntax
a source to share