0

I'd like to add sequentially numbered labels to images in posts. Just a small number in the corner of each image to help when referencing them in my writing.

All of the images are wp-block-image (no galleries). The numbering should be simple +1 addition based on the order of appearance in the images for that post (top left = #1, next img = #2...)

The order isn't expected to change after the post is published - it's static content - but in draft stage the images are moved and will be out of order from their upload/inserted/filename/ID.

A few gallery plugins appeared in search that claim to have this feature, but I don't think they'll work with wp-block-images and my existing content. And I'd rather not use a plugin if it can be handled cleaner without it.

How would you add these labels correctly and efficiently?

1

No need for plugins or any change to the markup - you can do all of this in pure CSS with what is called counters, which do have broad browser support.

body {
  counter-reset: imageLabel;
}

.wp-block-image::before {
  counter-increment: imageLabel;
  content: "#" counter(imageLabel);
}

This will already produce the number after the image, you can style the ::before however you like and position it where it needs to be.

Beware that this might hurt the accessibility of the page, I'm unsure how well screen readers can interact with both ::before and the CSS content. However, solving this will probably require you to create either a new block or edit the image block .

1
  • 1
    That sounds like something I can use, thanks. I can create/edit blocks if needed. I'll have to find out more about the accessibility issues, but from what I've read so far, it doesn't seem to be a deal breaker. And I'm really hoping to avoid leaving the number outside of the image (on any side). – Trich Feb 16 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.