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.

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

Go to Media → Library 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.

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

Available options:

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'
);

Always display the AI disclosure badge for the image.

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

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.

The AI badge can be customized using CSS.

The main class for customizing the logo is:

.ai-logo

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

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

For example, to use a dark gray:

.ai-logo {
    color: #333333;
}

Or white:

.ai-logo {
    color: #ffffff;
}

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

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.

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

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

The plugin uses the following classes:

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

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.

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.

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.