hyva-render-media-image_skill

Overview

This skill generates responsive <picture> elements for Hyvä Theme templates using the Hyvä Media view model. It creates accessible, performance-minded image markup for hero banners, product images, and any image that needs responsive breakpoints. Use it to produce HTML that improves Core Web Vitals and supports lazy/eager loading strategies.

How this skill works

The skill asks for either direct image values or a PHP variable containing image configuration and then emits the PHP snippet that calls \Hyva\Theme\ViewModel\Media::getResponsivePictureHtml. It maps image configs to <picture> sources, sets <img> attributes (alt, loading, fetchpriority) and optionally adds attributes to the <picture> wrapper. The output is ready to paste into a Hyvä PHTML template and follows responsive and accessibility best practices.

When to use it

• Adding images to Hyvä PHTML templates
• Creating responsive images with different sources for mobile and desktop
• Implementing hero banners, product or CMS images with breakpoints
• Optimizing images for Core Web Vitals (LCP, CLS)
• Switching loading strategy between above-fold and below-fold images

Best practices

• Provide meaningful alt text and width/height to prevent CLS
• Use eager + high fetchpriority for hero/LCP images and lazy for below-fold images
• Supply at least two breakpoints (mobile and desktop) with appropriately sized images
• Prefer image files optimized for web (WebP/AVIF fallback to JPEG/PNG)
• When passing a PHP variable, ensure it matches the expected image config array structure

Example use cases

• Render a single hero image with eager loading and fetchpriority high
• Display product images with multiple source sizes for mobile, tablet, desktop
• Create a responsive CMS banner that swaps images at a media query breakpoint
• Render multiple images from a PHP array variable for a product gallery
• Wrap an image with custom picture attributes (class, data-*) for styling and JS hooks