Find, get and add html to an element

Question

I have a string that contains text and some html elements. I want to find the img elements that have the class size-thumbnail and add some html around it.

For example, From:

<img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">

To:

<div style="width:150px;" class="article-image">
    <img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">
    <span style="width:150px;" class="article-image-content">BLABLA</span>
</div>

The widths on the div and span elements are taken from the width of the image. Whats the best way of doing this, and how?

I thought of using regex to get the height but I don't know how to add everything else on the right position.

*(related)* [Best Methods to parse HTML](http://stackoverflow.com/questions/3577641/best-methods-to-parse-html/3577662#3577662) — Gordon, Mar 17 '11 at 12:41
Since this tagged Wordpress, the easiest would be to change that at the position where the initial img tag is generated instead of changing it later, e.g. change the generating PHP code to add the additional markup directly. — Gordon, Mar 17 '11 at 12:45
@Gordon yeah I'm writing a filter function to add this. If I somehow could add it before that would be great, but since I'm writing a theme I don't want to change the root files. — Patrik, Mar 17 '11 at 12:59

score 0 · Answer 1 · answered Mar 17 '11 at 12:44

0

You can use http://www.php.net/manual/en/class.domelement.php DOM Element for finding and manipulating HTML.

Also im using and recommending http://framework.zend.com/manual/en/zend.dom.query.html Zend_Dom_Query for finding and manipulating html. It works perfectly.

(If you want to make this manipulation on same page you need to buffer, manipulate and flush it to browser.)

answered Mar 17 '11 at 12:44

osm

4,186
3
23
24

I have never worked with this but the page is dynamic so the content is just a string. Never an html page. It looks like this: Database -> my code -> echo – Patrik Mar 17 '11 at 13:00
Ok i got it. You need to change it from your Wordpress template. – osm Mar 17 '11 at 13:12
@Patrik it doesnt matter (much) where it's a full html page or just a fragment. DOM can handle that. Zend_Dom sits on top of DOM and adds CSS Selectors. – Gordon Mar 17 '11 at 13:17
If you use Zend_Dom you can select like $dom->query('#content .post img') – osm Mar 17 '11 at 13:18
k i cant seem to get it to work. i've tried this just to see if I get something: get file height $dom = new DOMDocument(); $dom->load($content); $dom->getAttribute('class'); print_r($dom); but i get server error 500 – Patrik Mar 17 '11 at 13:54

score 0 · Answer 2 · answered Mar 17 '11 at 17:53

You could always throw jQuery at it. Have your theme enqueue jquery, and add this to your header.

jQuery(document).ready( function () {
    jQuery(".size-thumbnail").wrap("<div style='width:150px;' class='article-image'/>");
    jQuery(".size-thumbnail").after("<span style='width:150px;' " + 
                                    "class='article-image-content'>BLABLA</span>");
});

Not the most elegant solution, but it would have the desired outcome...

Find, get and add html to an element

2 Answers2