How to get started using Image Overlay Cues

Image Overlay Cues is a WordPress plugin designed to enhance the core image block with additional overlay count features. This plugin simplifies the process of adding content cues on top of the image.
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. CleanShot.2024-05-14.at.21.12.37.mp4

Note: This video above shows the premium UI control to enable the overlay count. This control is only available for the premium users. You can enable the count using block styles (see below) if you are on the free version of the plugin.

Customize the count (PRO)

You can change the appearance of the count cue using the native editing controls provided by the plugin. CleanShot.2024-05-14.at.21.42.20.mp4

Skip images if necessary

You can also skip images and it will automatically be recounted. CleanShot.2024-05-14.at.21.28.20.mp4

Customizing the styles

“Image Overlay Cues” is made with customization in mind and therefore provides bunch of CSS variables you can tweak.

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

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

Installation 💾

Download the .zip file and unzip it.
Upload the image-overlay-cues folder to your /wp-content/plugins/ directory.
Activate the plugin through the ‘Plugins’ menu in WordPress.

Usage 🔧

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

Follow us on YouTube!

We share tutorials to help you implement our plugins and level up your site’s content on our YouTube channel.