Responsive images and page reflow fix in WordPress

Following our Responsive images and preventing page reflow article, we’ll now work on implementing this responsive images fix in WordPress.

In addition to the responsive images fix, we also want to wrap the post images in a figure  tag, and give it a figcaption .

Let’s get coding.

Creating the plugin

We’ll make this a plugin, so first thing we need to do is create a new folder in the wp-content/plugins  directory, and call it codecaptain-image-to-figure-converter .

In this folder, create a new file called  codecaptain-image-to-figure-converter.php  and start with the following template:

We’ll work with a filter and an action:

• the_content – The “the_content” filter is used to filter the content of the post after it is retrieved from the database and before it is printed to the screen.
• wp_print_styles – The “wp_print_styles” action can be used to output styles in the <head> before the styles are printed. We could also use the wp_enqueue_style function to include the css file, but since there are only a couple of lines of CSS, we’ll save an HTTP request and output it in the head directly.

Manipulating the images

For manipulating our images easily we’ll use an instance of DOMDocument, so start out with loading the content in cc_wrap_images . Each line is documented, take a look:

The notable line is $dom->LoadHTML('<?xml encoding="utf-8" ?>' .$content); . We need to prepend the content with an encoding declaration, so the string (\$content) gets treated as UTF-8, since that document doesn’t already contain such a declaration.

Next up, we’ll load all images and start to loop over them.

In the loop, we’ll get the src, alt, class, width & height attribute of the image.

Calculate the aspect, rounded to 2 decimals.

Creating the new DOM structure

We want to achieve a new DOM structure, which looks like this.

So after you calculated the aspect, let’s create some elements.

Since the image will be positioned absolute, the alignment classes which WordPress adds will no longer work (alignleft, alignright, aligncenter), that’s why we create a wrapping div with a class ‘wp-aligner’, to which we append all the image classes, so we can easily align the images later.

The cc-responsive-container will have a style attribute, where we set the calculated padding-bottom inline.

The image-wrapper will also have a style attribute with a max-width and max-height, so we don’t make the image larger than it originally is.

And finally, we create a figcaption and set the alt attribute of the image as the content.

After creating the new nodes, we have to add it to the DOM structure.

This was the last piece of code needed in the loop.

There’s a small issue we have to fix: an image can be a child of a <p>  tag, but a figure not, so we have to loop over all figures and check if its direct parent is a paragraph tag, and if it is, we have to remove it.

Put this code after the loop.

And finally, we have to return our new content.

Creating the base css

Create a new file called responsive-styles.css  and put the following CSS in it.

Move back to  codecaptain-image-to-figure-converter.php  and in cc_print_responsive_styles()  we will output the css styles in the <head> .

And that concludes our work, activate the plugin in your WordPress dashboard and all images in your posts will be replaced by our new structure. The responsive images will also reserve their space in the page, so the page won’t reflow when the images load.

In conclusion

Thanks for reading & hope this helped some of you out.

Recent topics