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?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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 .
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0