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?

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?

• images
• themes
• css

1 Answer 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 .