Overview #
The Episode Image block displays your podcast episode artwork with intelligent sync capabilities and comprehensive styling options. It automatically pulls images from your RSS feed, downloads them to your WordPress media library, and provides full control over presentation. This block is perfect for showcasing episode artwork, creating visual episode cards, and enhancing your podcast’s visual appeal.
Key Features #
Smart Image Management #
- Automatic RSS Sync: Images update when your RSS feed changes
- Media Library Integration: Downloads and stores images locally
- Manual Override: Replace with custom images while maintaining sync option
- Sync Status Indicator: Visual feedback on current sync state
Image Handling #
- Automatic Download: Fetches images from RSS URLs
- Local Storage: Saves to WordPress media library
- Proper Alt Text: Pulls from media library metadata
- Fallback Messages: Graceful handling when no image exists
Responsive Styling #
- Spacing Controls: Margin and padding per device
- Sizing Options: Width, height, and constraints
- Background Colors: Container background styling
- Border & Shadow: Applied directly to images
Display Features #
- Device Visibility: Show/hide on specific screens
- Sticky Positioning: Keep images visible while scrolling
- Print Control: Manage print visibility
- Performance: Hidden images don’t render
Understanding Sync Modes #
Synced with RSS #
What it means: Image automatically updates from your RSS feed
When to use:
- You want consistency across platforms
- RSS feed has the latest artwork
- No custom artwork needed
- Automatic updates desired
How it works:
- Checks RSS feed for image URL
- Downloads image to media library
- Links media ID for management
- Updates when feed changes
Visual indicators:
- Green sync icon in settings
- “Synced with RSS” status message
- No “Restore from RSS” button
Manually Edited #
What it means: You’ve selected a custom image
When to use:
- Custom artwork for WordPress
- Higher resolution images
- Platform-specific graphics
- Special promotional images
Visual indicators:
- Yellow status icon
- “Manually Edited” status message
- “Restore from RSS” button available
Using the Episode Image Block #
Adding the Block #
- Ensure an episode is selected via Episode Selector
- Click the + button in the block editor
- Search for “Episode Image”
- Click to insert the block
- Image loads automatically if synced
Basic Configuration #
- Check Sync Status: Review in Sync Settings panel
- Replace if Needed: Click image to open media library
- Style the Image: Use responsive controls
- Preview Display: Switch between devices
- Save Changes: Update post to preserve
The Settings Panels #
Sync Settings #
- Current Status: Shows sync state (synced/manual)
- Status Description: Explains current mode
- Restore Button: Returns to RSS image
- Automatic Tracking: Monitors manual changes
Spacing #
- Margin: Outer spacing around image
- Padding: Inner spacing (affects container)
- Linked Sides: Toggle for uniform spacing
- Device-Specific: Different per breakpoint
Sizing #
- Width/Height: Image dimensions
- Min/Max Width: Boundary constraints
- Min/Max Height: Vertical constraints
- Auto Sizing: Leave empty for natural size
Colors #
- Background: Container background color
- Theme Integration: Use site color palette
- Device-Specific: Different colors per device
- Transparency: Alpha channel support
Border & Shadow #
- Applied to Image: Styles the image directly
- Border Options: Width, style, color, radius
- Shadow Effects: Elevation and depth
- Responsive Values: Per-device settings
Display #
- Visibility: Per-device show/hide
- Sticky: Fixed positioning options
- Z-index: Layer stacking order
- Performance: Hidden images don’t load
Image Management Workflows #
Maintaining RSS Sync #
- Don’t Replace: Leave image untouched
- Updates Flow: RSS changes appear automatically
- Media Library: Images stored locally for performance
- Check Status: Verify sync in settings panel
Using Custom Images #
- Click Image: Opens media library
- Select New: Choose or upload image
- Status Updates: Automatically marked as edited
- Keep Copy: Original RSS image remains available
Returning to RSS Image #
- Open Sync Settings: In block sidebar
- Click Restore: “Restore from RSS” button
- Image Updates: RSS image reappears
- Sync Resumes: Automatic updates return
Image Download Process #
When synced, the block:
- Fetches image URL from RSS
- Downloads to media library
- Creates attachment metadata
- Links media ID to block
- Serves locally for speed
Common Use Cases #
Episode Card Layout #
Container: Flex layout
Image: Fixed width (300px)
Aspect Ratio: Square (1:1)
Border: 2px solid with 8px radius
Shadow: Medium elevation
Mobile: Full width
Hero Episode Feature #
Width: 100% with max-width
Height: Auto (maintain ratio)
Margin: 0 auto (centered)
Shadow: Large dramatic effect
Sticky: Optional for impact
Sidebar Thumbnail #
Width: 100% (sidebar constrained)
Max Width: 200px
Border Radius: 50% (circular)
Margin: 0 auto 20px
Background: None needed
Grid Gallery #
Width: 100%
Height: 200px (fixed)
Object Fit: Cover (CSS)
Border: Thin consistent
Margin: 0 (gap in grid)
Floating Player Art #
Position: Sticky
Width: 80px
Height: 80px
Border Radius: 8px
Shadow: Subtle elevation
Z-index: High value
Styling Best Practices #
Image Optimization #
- File Size: RSS images may be large
- Local Serving: Media library optimizes
- Lazy Loading: Enabled by default
- Format: JPEG for photos, PNG for graphics
Responsive Sizing #
- Mobile First: Full width on small screens
- Tablet: Moderate sizing
- Desktop: Optimal display size
- Max Width: Prevent oversizing
Visual Hierarchy #
- Size: Larger for featured episodes
- Borders: Define image boundaries
- Shadows: Create depth and focus
- Spacing: Give images room to breathe
Accessibility #
- Alt Text: Automatically from media library
- Fallback: Clear message when missing
- Contrast: Ensure visibility
- Focus States: For interactive images
Advanced Techniques #
Custom Aspect Ratios #
Using CSS classes:
.episode-image-16-9 {
aspect-ratio: 16/9;
object-fit: cover;
}
Hover Effects #
With custom CSS:
.wp-block-podcaster-plus-episode-image img:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
Loading Optimization #
- Lazy Loading: Default behavior
- Preload: For above-fold images
- WebP: Consider format conversion
- CDN: Use if available
Integration Patterns #
- With Title: Natural pairing
- With Player: Album art display
- With Description: Visual context
- With Links: Make images clickable
Troubleshooting #
Image Not Showing #
Check these issues:
- Episode Selected: Use Episode Selector first
- RSS Feed: Verify feed has images
- Sync Status: Check if manually edited
- Download: May be processing
Wrong Image Displayed #
Common causes:
- Cache: Clear all caches
- Manual Edit: Check sync status
- Feed Update: RSS may have changed
- Media Library: Verify correct ID
Sync Not Working #
Solutions:
- Manual Selection: Any change breaks sync
- Restore: Use restore button
- Feed Access: Check RSS availability
- Permissions: Media upload rights
Performance Issues #
Optimizations:
- Image Size: Check original dimensions
- Format: JPEG typically smaller
- Lazy Load: Should be automatic
- CDN: Offload if possible
Frequently Asked Questions #
Q: Where are RSS images stored?
A: Images are downloaded to your WordPress media library for local serving and optimization.
Q: Can I use different images per device?
A: The image source is the same, but you can show/hide per device or use different sizing.
Q: What happens to old images when RSS updates?
A: Old images remain in media library. The block updates its reference to the new image.
Q: Can I make images clickable?
A: Wrap the block in a link or use custom JavaScript for click handling.
Q: What image formats are supported?
A: All web formats: JPEG, PNG, GIF, WebP. The block uses whatever the RSS provides.
Q: How do I set custom alt text?
A: Edit the image in Media Library to set alt text that persists across uses.
Q: Why is my image pixelated?
A: Check the original RSS image quality. Consider uploading a higher resolution version manually.
Q: Can multiple image blocks exist per post?
A: The block is set to single instance to maintain consistency with one episode per post.
Image Quality Guidelines #
Recommended Specifications #
- Minimum Size: 600x600px for podcast artwork
- Optimal Size: 1400x1400px for clarity
- Format: JPEG for photos, PNG for graphics
- Compression: 80-90% quality for web
RSS Feed Best Practices #
- Consistent URLs: Avoid changing image URLs
- Proper Sizing: Upload optimized images
- CDN Usage: For faster global delivery
- HTTPS: Secure image URLs required
Best Practices Summary #
- Plan Image Strategy: Decide on sync vs manual approach
- Optimize Sources: Ensure RSS has quality images
- Test Responsive: Check all device sizes
- Monitor Performance: Watch load times
- Maintain Alt Text: For accessibility
- Use Local Serving: Let WordPress optimize
- Style Consistently: Match your brand
Getting Help #
If you need assistance with the Episode Image block:
- Review this guide for common solutions
- Check the Sync Settings Guide
- Visit our support forum
- Contact support with specific questions
Remember: The Episode Image block combines automatic RSS synchronization with full creative control. Whether you maintain sync for consistency or customize for impact, the choice is yours!

Easily create beautiful, fully customizable podcast websites with the new PodcasterPlus Block WordPress plugin. No coding skills are required. Get started today!
Hey AI, learn about us
Company
About
Affiliates
Brand Assets
Contact Us
Resources
Blog
Podcast
Docs
Support
Status
Product
Features
Pricing
Changelog
Feature Requests
My Account