Manton’s recent post about Brid.gy has got me curious about WebMentions.
I haven’t dabbled in CSS for over a decade but seems I can’t use it to add img attribute class=“u-photo” to img in article posts. I’d like to do this so that when I crosspost from Brid.gy, images show up in the tweet. So I’m hoping to make
<img class="u-photo"...>
automatic instead of manually doing it every time. I’ve looked at theme source code, thinking I could modify a theme, but so far that hasn’t provided any insights on where to add the class.
Is automatically adding class=“u-photo” to post images possible?
1 Like
You could do this with JS like this:
// First we'll grab all the images inside a post paragraph
let ims = document.querySelectorAll('.post-content p img')
// If ims === 0 lets not do anything
if (ims.length > 0) {
// Now we'll loop through all of the images that were picked up
// Note that I'm doing no real error handling, you might want to clean this up
for (let i = 0; i < ims.length; i++) {
// For each image we get the parent element, in this case it will be <p>
let parentElm = ims[i].parentElement;
// Using the parent element and the image object we replace the innerHTML
// with our image with the class "glightbox" and a link to the image
parentElm.innerHTML = '<img src="' + ims[i].src + '" class="u-photo">'
}
}
(modified from here)
1 Like
Thank you so much! I’m glad there’s an existing possible solution with a simple modification. I will try this out this weekend.