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;
- 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).
- Get the ID of the image from the src.
- Get the URLs of the other sizes based on the ID of the image.
- 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.