SEO Image Generator WordPress Plugin | ZERO AI

A powerful WordPress plugin for generating professional 1280×720 WebP featured images with customizable text, logos, and multiple design templates. SEO-optimized and production-ready!

✨ NEW in v3.0.0: Gutenberg Block Support! Generate banners directly in the post editor while writing your content.

Read more: How to generate good SEO-images

Installation

Download ZIP and upload as normal WordPress Plugin

YouTube Tutorial

SEO Images Wodrepss Plugin - Generate Images while wrting a blog post

Look and feel after installation

Features

• 🆕 Gutenberg Block: "SEO Image" block - generate and customize images directly in the block editor while writing posts
• 4 Professional Templates: Modern Tech, Corporate Professional, Clean Minimal, and Editorial Document styles
• Client-Side Image Generation: Uses html2canvas to generate high-quality WebP images (~50-80KB)
• SEO-Optimized: Descriptive filenames, proper alt text, and optimized file sizes for fast loading
• Flexible Customization: Custom titles, labels, descriptions, overlay images, patterns, and 9 font options
• Media Library Integration: Automatically saves generated banners to WordPress media library
• Smart Layout: Content area expands when no logo is present
• Pattern Library: 8 background patterns (grid, dots, diagonal, zigzag, circuit, hexagon, waves, none)
• Glass Morphism Effects: Modern semi-transparent content boxes with backdrop blur
• No Server Dependencies: Works on any hosting without GD library or ImageMagick
• Two Workflows: Use the admin page OR the Gutenberg block - whichever fits your workflow

Example Banners

Modern Tech Style

Dark gradient with neon cyan/magenta accents and glass morphism effects

Corporate Professional Style

Navy blue with gold accents, structured and authoritative

Clean Minimal Style

Pure white with black text and bold red accents, Swiss/Bauhaus inspired

Editorial Document Style

Warm cream tones with professional editorial layout

Installation

1. Upload the banner-generator folder to your /wp-content/plugins/ directory
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Access the plugin via 'Banner Generator' in the admin menu

Usage

Two Ways to Use

The plugin offers two workflows to fit your preferences:

Option 1: Gutenberg Block (NEW in v3.0.0) 🆕

Perfect for: Generating images while writing posts, inline content creation

1. Open a post or page in the block editor
2. Add the SEO Image block (found in the Media category)
3. Configure settings in the right sidebar:
   • Image Content: Label (optional), Title (required), Keyword (required), Description
   • Overlay Image: Upload or select from Media Library
   • Design Style: Choose image style, pattern, and font
4. Click "Generate Preview" to see the image
5. Review the preview and click "Regenerate" to try different settings if needed
6. When satisfied, click "Save to Media Library & Insert"
7. Image is saved to Media Library and embedded in your post

Benefits:

• ✅ Generate images without leaving the post editor
• ✅ See image in context with your content
• ✅ Preview before saving - regenerate as many times as needed
• ✅ Streamlined workflow for content creators

Option 2: Admin Page Interface

Perfect for: Batch generation, reusable banners, team workflows

1. Go to Banner Generator in your WordPress admin menu
2. Fill in the fields:
   • Label (optional): Small text displayed above the headline
   • Title (required): Main headline text
   • Keyword (required): SEO-friendly filename base
   • Tagline (optional): Supporting text below the title
   • Overlay Image URL (optional): URL to an image (logo, icon, etc.)
   • Image Style: Choose from 4 templates (Tech, Corporate, Minimal, Document)
   • Background Pattern: Select background pattern (8 options + none)
   • Font: Choose from 9 fonts including monospace options
3. Click "Generate Banner" to preview
4. Click "Save to Media Library" to save as WebP file
5. View saved image in WordPress Media Library

Benefits:

• ✅ Dedicated interface for banner creation
• ✅ Better for creating multiple banners in one session
• ✅ Easy to share workflow with team members
• ✅ Familiar admin page experience

SEO Features & Specialties

Optimized File Format

• WebP format with 88% quality (~50-80KB file size)
• Fast loading times improve page speed and SEO rankings
• High-quality output suitable for featured images and social sharing

SEO-Friendly Filenames

Banners are saved with descriptive, readable filenames:

banner-your-article-title-2024-01-15-123456.webp

• Uses actual title text (not random hashes)
• Includes timestamp for uniqueness
• Lowercase with hyphens (SEO best practice)
• No special characters or spaces

Proper Alt Text

Each banner includes:

• Alt text derived from title for accessibility
• Proper metadata for WordPress media library
• Descriptive file information for search engines

Performance Optimization

• Small file sizes (50-80KB) don't slow down page load
• 2x scale rendering (2560×1440) downscaled to 1280×720 for crisp quality
• Client-side generation doesn't burden server resources
• No external API calls - everything happens locally

Social Media Ready

• 1280×720 dimensions perfect for:
  • Facebook featured images
  • Twitter cards
  • LinkedIn posts
  • Blog post headers
  • Open Graph images

Customization for Keyword Optimization

• Label field: Add niche/industry terms (appears above title)
• Title field: Include target keywords in main headline
• Keyword field: Determines SEO-friendly filename
• Description field: Supporting text with secondary keywords
• Multiple font options to match brand identity

Technical Details

Image Generation Process

1. HTML Rendering: Template loads with user data in hidden container
2. Font Loading: Google Fonts preloaded with 1.5-3 second wait
3. Canvas Capture: html2canvas renders at 2x scale (2560×1440)
4. WebP Conversion: Canvas exported as WebP with 88% quality
5. Media Upload: Image data sent to server via AJAX
6. File Storage: Saved to WordPress uploads directory with proper metadata

Template Architecture

Each template is a standalone PHP file in /templates/:

• banner-tech.php - Modern Tech (Cyberpunk/Neon)
• banner-corporate.php - Corporate Professional (Enterprise)
• banner-minimal.php - Clean Minimal (Swiss/Bauhaus)
• banner-document.php - Editorial Document (Publication)

Templates include:

• Complete HTML structure with DOCTYPE
• Embedded CSS with scoped selectors (.banner namespace)
• Google Fonts integration
• Pattern definitions using CSS gradients
• Conditional rendering for optional elements

Smart Content Layout

With Logo:

• Content max-width: 700px (left-aligned)
• Logo positioned on right (z-index: 1, behind content)

Without Logo:

• Content max-width: 1000px (centered)
• Uses .banner.no-logo class automatically

Pattern System

8 CSS-based patterns using ::after pseudo-elements:

• Grid: Linear gradient grid lines
• Dots: Radial gradient dots with offset
• Diagonal: 45° diagonal stripes
• Zigzag: Chevron pattern
• Circuit: Tech circuit board style
• Hexagon: Honeycomb pattern
• Waves: Horizontal wave lines
• None: Clean background only

Font Options

9 Google Fonts included:

• Sans-serif: Inter (default), Poppins, Montserrat, Roboto, Open Sans, Work Sans
• Serif: Playfair Display
• Monospace: JetBrains Mono, Roboto Mono (for code/tech aesthetic)

Z-Index Layering

Proper stacking order for visual hierarchy:

0: Background patterns (::after)
1: Overlay gradient (::before) + Logo
2: Content box with text

Logo stays behind text to ensure readability even with large logos.

Glass Morphism Implementation

Modern frosted glass effect on content boxes:

• Semi-transparent background (rgba with 0.75-0.95 opacity)
• backdrop-filter: blur(15px) for blur effect
• Subtle shadow and border glow
• Color-matched to each template theme

Security Features

• Nonce verification for all AJAX requests
• Input sanitization (esc_html, esc_url, esc_attr)
• Capability checks for admin functions
• SQL injection protection through WordPress $wpdb methods
• CORS handling removed from images to prevent loading failures

File Structure

banner-generator/
├── banner-generator.php          # Main plugin file
├── blocks/
│   └── banner-generator/        # Gutenberg block (NEW in v3.0.0)
│       ├── edit.js              # Block editor component
│       ├── editor.css           # Editor-only styles
│       └── style.css            # Frontend styles
├── templates/
│   ├── admin-page.php           # Admin interface
│   ├── banner-tech.php          # Modern Tech template
│   ├── banner-corporate.php     # Corporate template
│   ├── banner-minimal.php       # Minimal template
│   └── banner-document.php      # Document template
├── assets/
│   ├── js/
│   │   ├── admin.js            # Admin JavaScript + html2canvas logic
│   │   └── html2canvas.min.js  # Canvas rendering library
│   ├── css/
│   │   └── admin.css           # Admin styles
│   ├── banner-tech-example.png
│   ├── banner-corporate-example.png
│   ├── banner-minimal-example.png
│   ├── banner-document-example.png
│   └── admin-interface.png
├── README.md                    # This file
└── CHANGELOG.md                 # Version history

Customization

Modifying Templates

Each template can be customized independently:

1. Edit CSS in /templates/banner-[style].php
2. Adjust colors, fonts, spacing, shadows
3. Modify pattern styles in the ::after pseudo-elements
4. Change content box styling (background, blur, padding)

Adding Custom Fonts

Add new fonts to the admin interface:

1. Edit /templates/admin-page.php
2. Add new <option> to the Font Family dropdown
3. Font will be loaded automatically via Google Fonts API

Creating New Templates

1. Duplicate an existing template file
2. Modify styles and colors
3. Add new option to style mapping in banner-generator.php:

$template_map = array(
    'tech' => 'banner-tech.php',
    'corporate' => 'banner-corporate.php',
    'minimal' => 'banner-minimal.php',
    'document' => 'banner-document.php',
    'yournew' => 'banner-yournew.php'  // Add here
);

4. Add style option to admin dropdown

Adjusting Image Quality/Size

In /assets/js/admin.js, modify line 95:

const imageData = canvas.toDataURL('image/webp', 0.88);
// Change 0.88 (88% quality) to desired value (0.1-1.0)

Lower values = smaller files, lower quality Higher values = larger files, higher quality

Troubleshooting

Common Issues

Overlay image not loading:

• Check image URL is accessible
• Verify CORS headers if external image
• Use WordPress media library images (same-origin) for best results

Description not visible:

• Ensure text is entered in Description field
• Check browser cache (Ctrl+F5 to hard refresh)
• Verify .banner .description CSS has display: block

Pattern not showing:

• Patterns are subtle on some backgrounds
• Try different pattern options
• Increase pattern opacity in template CSS

Text overlapping with overlay image:

• Overlay image is positioned behind text (z-index: 1)
• Content box has semi-transparent background for contrast
• Adjust image size or position in template CSS

Fonts not loading:

• Wait for generation to complete (3 second delay for fonts)
• Check internet connection (Google Fonts require internet)
• Try different font option

Debug Mode

Enable WordPress debug mode:

// In wp-config.php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Check /wp-content/debug.log for errors.

Advantages Over Traditional Image Generators

No Server Dependencies

• Works on any hosting without GD library or ImageMagick
• No PHP extensions required
• No server memory limits to worry about

Superior Quality

• CSS gradients and effects > GD rendering
• Web fonts render beautifully
• Glass morphism and backdrop filters impossible with GD
• Crisp text at any size

Easy Customization

• Edit CSS instead of PHP image code
• Live preview in browser
• No compilation or server restarts
• Template-based architecture

Better Performance

• Client-side generation doesn't burden server
• No server CPU usage for image processing
• Smaller file sizes with WebP format
• Faster page loads improve SEO

Modern Design

• 2025 design trends (glass morphism, gradients)
• Professional templates
• Flexible pattern system
• Typography excellence with Google Fonts

Best Practices

For SEO

1. Use descriptive titles with target keywords
2. Keep filenames meaningful (auto-generated from keyword field)
3. Add relevant label/description text
4. Optimize file size (~50-80KB is ideal)
5. Use consistent branding (overlay images, colors, fonts)

For Performance

1. Use WebP format (already default)
2. Serve from WordPress media library (CDN-ready)
3. Don't regenerate existing banners unnecessarily
4. Use same-origin logos to avoid CORS issues

For Design

1. Keep text concise (long titles may overflow)
2. Test without overlay image (layout adjusts automatically)
3. Choose appropriate image style for content tone
4. Try different patterns for variety
5. Use monospace fonts for tech/code content

Changelog

Version 3.0.0 (Current)

• 🆕 Gutenberg Block Support: "SEO Image" block for in-editor image generation
• 🆕 Preview Workflow: Generate preview → adjust settings → save when satisfied
• 🆕 Block Inspector Controls: Full parameter control in the editor sidebar
• 🆕 Better UX: Clear field labels (Label, Overlay Image, Image Style)
• 🆕 Visual Hierarchy: Form field order matches image layout
• ✨ Two Workflows: Choose between admin page or Gutenberg block
• 📦 Media Library Integration: Preview first, save to library when ready
• 🎨 Same Design Templates: All 4 templates available in both interfaces
• 📝 Improved Labels: "Label" instead of "Category", "Overlay Image" instead of "Logo"
• 🔧 WordPress Standards: Uses wp-block-image classes for better theme compatibility

Version 2.0.0

• ✨ Added 4 professional templates (Tech, Corporate, Minimal, Document)
• ✨ Template-based architecture for easy customization
• ✨ Smart layout: content expands when no logo present
• ✨ 8 background pattern options
• ✨ 9 font options including monospace
• ✨ Glass morphism effects with backdrop blur
• ✨ SEO-optimized filenames and metadata
• ✨ WebP output format (50-80KB files)
• ✨ Proper z-index layering (logo behind text)
• ✨ Corner bracket decoration on descriptions
• 🐛 Fixed CORS issues by removing crossorigin attribute
• 🐛 Fixed CSS scoping to prevent WordPress admin conflicts
• 🐛 Fixed Modern Tech template (lighter, more modern)
• 📝 Refactored "tagline" to "description" throughout

Version 1.0.0

• Initial release
• Single Modern Tech style
• Basic HTML-based banner generation
• Admin interface
• Usage tracking
• Media library integration

Support

For issues, feature requests, or contributions, please contact the plugin developer.

License

This plugin is licensed under the GPL v2 or later.

---

Banner Generator: Professional SEO-optimized featured image creation without server dependencies.