How to use the Image Overlay Cues plugin

Image Overlay Cues enhances the core image block by adding overlay count features. This guide will show you how to use the plugin to create visually engaging images with content cues.

Step 1: Install and Activate the Plugin

1. Download the plugin’s ZIP file.
2. Go to your WordPress dashboard, navigate to Plugins > Add New.
3. Click Upload Plugin and select the ZIP file.
4. Click Install Now and then Activate.

Step 2: Add an Image Block

1. Go to Posts > Add New or edit an existing post.
2. Add an Image Block to your post.

Step 3: Enable Overlay Cues

1. In the block settings, enable the overlay count feature.
2. Customize the appearance of the overlay cues using the available options.

Step 4: Preview and Publish

1. Preview the post to ensure the overlay cues are displayed correctly.
2. Click Publish to make the post live.

Tips:

• Use overlay cues to create numbered steps or highlights on images.
• Customize the overlay style to match your site’s design.

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;
}

Conclusion
Image Overlay Cues is a great tool for adding visual cues to images. Follow this guide to enhance your images with dynamic content overlays.