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:

1. Checks RSS feed for image URL
2. Downloads image to media library
3. Links media ID for management
4. 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 #

1. Ensure an episode is selected via Episode Selector
2. Click the + button in the block editor
3. Search for “Episode Image”
4. Click to insert the block
5. Image loads automatically if synced

Basic Configuration #

1. Check Sync Status: Review in Sync Settings panel
2. Replace if Needed: Click image to open media library
3. Style the Image: Use responsive controls
4. Preview Display: Switch between devices
5. 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 #

1. Don’t Replace: Leave image untouched
2. Updates Flow: RSS changes appear automatically
3. Media Library: Images stored locally for performance
4. Check Status: Verify sync in settings panel

Using Custom Images #

1. Click Image: Opens media library
2. Select New: Choose or upload image
3. Status Updates: Automatically marked as edited
4. Keep Copy: Original RSS image remains available

Returning to RSS Image #

1. Open Sync Settings: In block sidebar
2. Click Restore: “Restore from RSS” button
3. Image Updates: RSS image reappears
4. Sync Resumes: Automatic updates return

Image Download Process #

When synced, the block:

1. Fetches image URL from RSS
2. Downloads to media library
3. Creates attachment metadata
4. Links media ID to block
5. 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:

1. Episode Selected: Use Episode Selector first
2. RSS Feed: Verify feed has images
3. Sync Status: Check if manually edited
4. Download: May be processing

Wrong Image Displayed #

Common causes:

1. Cache: Clear all caches
2. Manual Edit: Check sync status
3. Feed Update: RSS may have changed
4. Media Library: Verify correct ID

Sync Not Working #

Solutions:

1. Manual Selection: Any change breaks sync
2. Restore: Use restore button
3. Feed Access: Check RSS availability
4. Permissions: Media upload rights

Performance Issues #

Optimizations:

1. Image Size: Check original dimensions
2. Format: JPEG typically smaller
3. Lazy Load: Should be automatic
4. 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 #

1. Plan Image Strategy: Decide on sync vs manual approach
2. Optimize Sources: Ensure RSS has quality images
3. Test Responsive: Check all device sizes
4. Monitor Performance: Watch load times
5. Maintain Alt Text: For accessibility
6. Use Local Serving: Let WordPress optimize
7. Style Consistently: Match your brand

Getting Help #

If you need assistance with the Episode Image block:

1. Review this guide for common solutions
2. Check the Sync Settings Guide
3. Visit our support forum
4. 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!