AI Transparency

AI Transparency is a ClassicPress plugin that adds a visual disclosure badge to images that have been generated or manipulated using artificial intelligence.

The plugin associates AI information with media attachments and can display an AI disclosure badge automatically on the frontend.

Features

• Mark an image as:
  • AI generated
  • AI manipulated
  • AI generated and manipulated
• Configure the AI disclosure behavior for each image:
  • Automatic
  • Required
  • Disabled
• Display a visual AI badge on disclosed images.
• Provide an accessible screen-reader description.
• Use CSS to customize the appearance and color of the AI badge.
• Keep the AI classification associated with the WordPress media attachment.

Usage

1. Classify an image

Go to Media → Library in list view and edit an image.

You will find an AI content field with the following options:

• Not AI-generated or manipulated
• AI generated
• AI manipulated
• AI generated and manipulated

Select the appropriate value and save the attachment.

2. Configure the disclosure

The AI disclosure field controls whether the visual disclosure is displayed.

Available options:

Automatic

The plugin determines whether a disclosure should be displayed by applying the ai_transparency_automatic_disclosure filter.

By default, automatic mode does not display a disclosure.

This behavior can be customized by a theme or another plugin. The filter receives both the current disclosure value and the attachment ID.

For example, to always display the disclosure when the setting is Automatic:

add_filter(
    'ai_transparency_automatic_disclosure',
    '__return_true'
);

Required

Always display the AI disclosure badge for the image.

Disabled

Do not display the AI disclosure badge for the image, even if the image has an AI classification.

3. Display on the frontend

When disclosure is required, the plugin wraps the image with markup similar to:

<span class="ai-content ai-logo ai-generated">
    <span class="screen-reader-text">
        Content generated with artificial intelligence
    </span>

    <img src="..." alt="...">
</span>

The exact HTML may depend on how the image is rendered by WordPress or the theme.

The plugin currently handles images generated through wp_get_attachment_image() and images found in post/page content.

CSS customization

The AI badge can be customized using CSS.

The main class for customizing the logo is:

.ai-logo

Change the logo color

Add the following CSS to your theme's custom CSS:

.ai-logo {
    color: #0066cc;
}

The SVG uses currentColor, so changing the color property changes the color of the logo without modifying the SVG file.

Different colors for different AI classifications

The plugin also adds a class corresponding to the AI classification.

You can therefore use different colors for each type:

.ai-generated {
    color: #7c3aed;
}

.ai-manipulated {
    color: #2563eb;
}

.ai-generated-and-manipulated {
    color: #dc2626;
}

You can also combine the classes explicitly if you want to avoid affecting other elements:

.ai-logo.ai-generated {
    color: #7c3aed;
}

.ai-logo.ai-manipulated {
    color: #2563eb;
}

.ai-logo.ai-generated-and-manipulated {
    color: #dc2626;
}

The latter form is recommended.

Changing the badge size

The default badge size is controlled by the width and height properties of .ai-content::after.

For example:

.ai-content::after {
    width: 32px;
    height: 32px;
}

You can use relative units if preferred:

.ai-content::after {
    width: 2.5rem;
    height: 2.5rem;
}

Changing the badge position

The default position is the bottom-right corner:

.ai-content::after {
    right: 0.5rem;
    bottom: 0.5rem;
}

For example, to move it to the top-right:

.ai-content::after {
    top: 0.5rem;
    right: 0.5rem;
    bottom: auto;
}

CSS classes

The plugin uses the following classes:

Class	Purpose
.ai-content	Main wrapper around a disclosed image
.ai-logo	Identifies the AI disclosure badge
.ai-generated	Image was generated using AI
.ai-manipulated	Image was manipulated using AI
.ai-generated-and-manipulated	Image was both generated and manipulated using AI

These classes are intentionally exposed so themes and plugins can customize the appearance without modifying the plugin itself.

Accessibility

The plugin adds a visually hidden text description to the disclosed image.

For example:

<span class="screen-reader-text">
    Content generated with artificial intelligence
</span>

This provides a textual description for users who cannot see the visual badge.

The AI badge itself is decorative and does not rely solely on color to communicate its meaning.

SVG logo

The AI logo is stored in assets/images/ai-logo.svg.

The SVG is monochromatic and uses currentColor for its visible elements.

The frontend currently uses the SVG as a CSS mask. This allows the logo color to be controlled through the .ai-logo CSS class without modifying the SVG.

If you replace the SVG, keep it monochromatic and ensure that the visible shape works correctly as a mask.

Customizing the logo with a theme

A theme can override the default appearance without modifying the plugin.

For example:

.ai-logo {
    color: #222;
}

.ai-content::after {
    width: 2rem;
    height: 2rem;
    right: 0.75rem;
    bottom: 0.75rem;
}

This CSS can be added using:

Appearance → Customize → Additional CSS

or through the theme's stylesheet, depending on the theme.

If it's not working in your theme

Under Tools → AI Transarency you can toggle those hooks without writing code.

Those three hooks let you enable stronger images detection.

If you prefer using the hooks directly, remember to use a priority greater that 10.

Processing post content

By default, AI Transparency processes images through the standard ClassicPress image-related filters.

Some themes and page builders, however, generate image markup directly and may not provide an attachment ID or use the standard wp-image-ID class.

For this reason, processing the complete post content can be enabled with:

add_filter(
    'ai_transparency_process_content',
    '__return_true'
);

Matching images by URL

When processing the_content, the plugin normally identifies images using the WordPress attachment class:

wp-image-123

Some themes and page builders may generate image markup without this class.

URL matching can optionally be enabled with the ai_transparency_match_content_images_by_url filter:

add_filter(
    'ai_transparency_match_content_images_by_url',
    '__return_true'
);

Processing the final HTML output

Some themes generate featured images and other images directly in their templates instead of using post_thumbnail_html() or including them in the_content.

For these cases, an optional final-output processor is available:

add_filter(
    'ai_transparency_process_output',
    '__return_true'
);

Lazy-loaded images

AI Transparency can identify images whose actual URL is stored in a lazy-loading HTML attribute instead of the src attribute.

By default, the following attributes are checked, in this order:

data-src
data-lazy-src
data-original
src

This is useful for themes and plugins that initially load a placeholder image and store the actual image URL in a data-* attribute.

Adding custom lazy-loading attributes

add_filter(
    'ai_transparency_lazyload_attributes',
    function ( $attributes ) {
        $attributes[] = 'data-lazy';

        return $attributes;
    }
);