I'm trying to implement responsive images on my site, and have all the required component parts working, and understand the concepts, but need some help putting them together;

Knowing that WordPress inserts images in to the editor as just an [img] tag, and in the_content() outputs them as [p][img][/p], I think the easiest way to do what I (and I guess others will want too), is leave the editor alone (rather than adding figure tags there - it's difficult to remove them without delving in to the text editor), and change the output of the_content() as it's written out.

So, I want to go from;



[figure][img src="" srcset="" sizes=""][/figure]

...where src is the location of the thumbnail, and srcset is a list of my other sizes; thumbnail, medium, large (or whatever custom names I need for my theme). sizes is to do with my breakpoints, and doesn't need to be generated from anything.

In pseudo-code, what I need is;

  1. Match the p+img (with optional [a] tag?) with a regex and get the src and alt in to variables (there's also a case where figure and figcaption tags are added by WP).
  2. Get the ID of the image from the src.
  3. Get the URLs of the other sizes based on the ID of the image.
  4. Construct the figure tag with the above (and optional figcaption).

Has anyone written anything that does much of that already, or can point me to the resources I need to build it myself. Most of it I can probably muddle through, but my regex skills, which is where this starts, are basic at best.

Bonus points if you can wrap it up in to a plugin.

P.S. I'm aware of the RICG plugin that does a lot of what I'm asking, but it's a bit too complicated for my needs, and a bit over excited about what it wants to do.

  • Do you want to do this to all images or just some of them? Commented Aug 25, 2015 at 17:40
  • All images with a certain post type, I guess.It would also be useful to be able to distinguish between those left/right aligned, as they'll have to have different sizes applied. Commented Aug 26, 2015 at 19:33


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.