Quantcast
Channel: Question and Answer » markup
Viewing all articles
Browse latest Browse all 40

Rewrite inline image markup

$
0
0

Is there a way of writing a function that will replace the standard markup of an inline image within the_content, with a way that moves the size class to a parent container, and a series of data attributes for different sizes of the image?

I’ve tried using a preg_match function, originally written to remove the autop around the image, but unable to extrapolate the ID of the image and write a new output from that (when I do, it works, but only does so for the first image – all other content from the_content vanishes).

I want this:

<p>
  <img class="alignnone size-medium wp-image-2093" src="http://website.com/wp-content/uploads/image-600x400.jpg" alt="image" width="600" height="400" />
</p>

To become:

<figure id="image-2093" class="size-medium">
  <img src="http://website.com/wp-content/uploads/image-300x200.jpg"
       data-medium="http://website.com/wp-content/uploads/image-600x400.jpg"
       data-large="http://website.com/wp-content/uploads/image-1200x800.jpg"
  />
</figure>

I want to avoid anything using image_send_to_editor, and just use something that will work across the board rather than only on new image embeds.

Thanks in advance.

Edit:

This wass the mangled version of the remove autop preg_match function I had. It generates the output, but without any of the variables (so no value for the id, src or data attributes), and it only does it for the first image while removing all other content. A whole bunch of failure really.

function s7g_img_unautop($img) {

    $img = preg_replace('/<p>\s*?(<a .*?><img.*?><\/a>|<img.*?>)?\s*<\/p>/s', '<figure><div class="media-wrap">$1</div></figure>', $img);

    preg_match('~wp-image-(.*?)"~', $img, $output);
    $imgID = $output[1];
    $imgL = wp_get_attachment_image_src($imgID, 'thumbnail');
    $imgM = wp_get_attachment_image_src($imgID, 'medium');
    $imgH = wp_get_attachment_image_src($imgID, 'large');

    $image = '<figure id="image-'.$imgID.'"><img src="'.$imgL[0].'"  data-medium="'.$imgM[0].'" data-large="'.$imgL[0].'" /></figure>';     

    return $image;

}
add_filter( 'the_content', 's7g_img_unautop', 30 );

Viewing all articles
Browse latest Browse all 40

Latest Images

Trending Articles





Latest Images