Hyva Render Media Image

This generates responsive picture elements for Hyvä Theme templates using the Media view model. You'll use it when adding hero images, product images, or any responsive image that needs different sources for mobile and desktop breakpoints. It handles the boilerplate for lazy loading, eager loading for LCP images, and the picture element syntax. The workflow is straightforward: either pass literal image paths and dimensions, or provide a PHP variable with image data following Hyvä's array structure. Honest take: if you're building Hyvä templates and tired of writing the same responsive image markup repeatedly, this will save you time and keep your Core Web Vitals optimization consistent.

skills.sh installs: 1.3K
GitHub stars: 85
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hyva-themes/hyva-ai-tools --skill hyva-render-media-image --agent claude-code

Installs into .claude/skills of the current project.

Files

Hyvä Render Image

Generate responsive <picture> elements for Hyvä Theme templates using the \Hyva\Theme\ViewModel\Media view model.

When to Use

Adding images to Hyvä PHTML templates
Creating responsive images with different sources for mobile/desktop
Implementing hero banners, product images, or CMS content images
Optimizing images for Core Web Vitals (LCP, CLS)

Workflow

1. Gather Image Requirements

The user may provide image data in one of these ways:

Option A: Direct values - Ask the user for:

Image path(s) - Location in pub/media/ (e.g., wysiwyg/hero.jpg, catalog/product/...)
Image dimensions - Width and height in pixels
Responsive requirements - Different images for mobile vs desktop?
Image purpose - Hero/LCP image (eager loading) or below-fold (lazy loading)?
Alt text - Meaningful description for accessibility

Option B: PHP variable - The user provides a variable name (e.g., $imageData, $heroImage). Inform the user of the required array structure documented in references/rendering-images.md under ## Image Configuration Format.