# Image Overlay Cues

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

## Features 🌟

### Display automatic counts on top of the image

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

https://github.com/smallplugins/image-overlay-cues/assets/48084051/e3836192-8f65-49b5-8869-2dc62513f9d8

**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.

<img src="https://github.com/smallplugins/image-overlay-cues/assets/48084051/0727b4e8-4ca9-4417-8219-df8d8294b2e0" width="500" />

### Customise the count (PRO)

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

https://github.com/smallplugins/image-overlay-cues/assets/48084051/3b083f40-ee8b-48d5-94ca-6f667d65533c

### Skip images if necessary

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

https://github.com/smallplugins/image-overlay-cues/assets/48084051/47c66a8a-15b7-4eec-91b9-862d369dade8

## Customising the styles

"Image Overlay Cues" is made with customisation 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. Navigate to any WordPress post/page editor.
2. Insert or Select the core image block.
3. Enable the count using the toolbar button if you are a premium user. Otherwise, enable it via the block style "count".

## Changelog 📜

### Version 1.0.5

-   Dev: Bump freemius SDK.

### Version 1.0.4

-   Dev: Bump freemius SDK.

### Version 1.0.3

-   New: Custom text styles

### Version 1.0.2

-   New: Add custom text overlays.

### Version 1.0.1

-   Tweak: Tweak to continue the counter throughout the page.

### Version 1.0.0

-   Add: Missing GPL Licence.

### Version 0.0.1

-   New: Initial Release.