themes - How would you add sequentially numbered labels to images in posts?

admin管理员组

文章数量:1310325

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

Share Improve this question asked Feb 16, 2021 at 11:25 TrichTrich 10322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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 .

本文标签： themesHow would you add sequentially numbered labels to images in posts