WebMention img class u-photo

Cross-posting
1

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
3

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
4

Thank you so much! I’m glad there’s an existing possible solution with a simple modification. I will try this out this weekend.