Show HN: Free SEO Image Generator WordPress Plugin – Rule Based and 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!

Download ZIP and upload as normal WordPress Plugin

YouTube Tutorial

• 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, categories, descriptions, logos, 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

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

Navy blue with gold accents, structured and authoritative

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

Warm cream tones with professional editorial layout

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

1. Go to Banner Generator in your WordPress admin menu
2. Fill in the fields:
   • Title (required): Main headline text
   • Category (optional): Subtitle/category label
   • Description (optional): Supporting text with corner bracket decoration
   • Logo URL (optional): URL to logo image (WordPress media library or external)
   • Style: Choose from 4 templates (Tech, Corporate, Minimal, Document)
   • Pattern: Select background pattern (8 options + none)
   • Font Family: 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 banner in WordPress Media Library

• 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

Banners are saved with descriptive, readable filenames:

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

Each banner includes:

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

• 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

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

• Title field: Include target keywords in main headline
• Category field: Add niche/industry terms
• Description field: Supporting text with secondary keywords
• Multiple font options to match brand identity

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

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

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

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

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)

Proper stacking order for visual hierarchy:

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

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

• 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

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)

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

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

4. Add style option to admin dropdown

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

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

Logo 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 logo:

• Logo is now behind text (z-index: 1)
• Content box has semi-transparent background for contrast
• Adjust logo 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

Enable WordPress debug mode:

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

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

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

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

• 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

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

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

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

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

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

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

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

This plugin is licensed under the GPL v2 or later.

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