- Upload Plugin.
- Apply the “Count” style to each image.
- Celebrate all the image editing time you’ve just saved!
Apply style
In the style panel at the right, select the “Count” style and a number will be auto-added on top of the image. The numbers will increase throughout the post.
Use in columns
This works for any image block, no matter where it’s used!
Skip count as needed
Only the images with this style will increase the count. Skip images that don’t need numbers by leaving the style set to “default”.
Demo
This test post shows images in multiple layouts counting upward wherever the “count” style was applied.
Customize display
By default, the plugin pulls in your site’s text styles and displays them as black on a white circle. This circle will appear at the top left of your photo.
Because of the differing font styles (and sizes) used in themes, the counter will look a little different for everyone.
Right now, there are no visual settings to change the counter position or style. However, a number of CSS variables make this possible:
Code example
Use WordPress’s custom CSS area to add and modify this code as needed.
.is-style-core--image--count {
--image-overlay-cues--image-count--size: 1.2em;
--image-overlay-cues--image-count--top: 0.5em;
--image-overlay-cues--image-count--right: initial;
--image-overlay-cues--image-count--bottom: initial;
--image-overlay-cues--image-count--left: 0.5em;
--image-overlay-cues--image-count--text: black;
--image-overlay-cues--image-count--bg: white;
}
Leave a Reply