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 💾

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

Usage 🔧

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