Image Overlay Cues is a WordPress plugin designed to enhance the core image block with an additional overlay count feature. This plugin simplifies the process of adding content cues on top of images.

Features 🌟

Display automatic counts on top of the image

You can add custom spacing between each individual list item with the help of this plugin.

Customise the count (PRO)

You can change the appearance of the count cue using the native editing controls provided by the plugin.

Skip images if necessary

You can also skip images and it will automatically be recounted.

Known Limitation: CSS Counters Inside CSS Container Queries

Image blocks placed inside a CSS container query context container-type: inline-size may cause overlay cue counters to render incorrectly.

Customising the styles

Image Overlay Cues is made with customisation in mind and therefore provides a bunch of CSS variables you can tweak.

Here is an overview of available CSS variables which you can apply to the is-style-ioc--image--count class to match your specific design needs:

--image-overlay-cues--image-count--size: Default 1.2em. Defines the size of the overlay cue.
--image-overlay-cues--image-count--top: Default 0.5em. Defines the top position of the overlay cue.
--image-overlay-cues--image-count--left: Default 0.5em. Defines the left position of the overlay cue.
--image-overlay-cues--image-count--text: Default #000. Defines the text color of the overlay cue.
--image-overlay-cues--image-count--bg: Default #fff. Defines the background color of the overlay cue.

Usage

Navigate to any WordPress post/page editor.
Insert or select the core image block.
Enable the count using the toolbar button if you are a premium user. Otherwise, enable it via the block style “count”.