hyva-render-media-image

Name: hyva-render-media-image
Availability: InStock
Author: Hyvä

Generate responsive picture element markup for Hyvä templates using the Hyva Theme Media view model.

78|16|Updated Jan 22, 2026

Search Tags:#template #render #Magento #Hyva #responsive-image #picture-element

Ready to run

npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-render-media-image

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hyva-render-media-image
Source: https://github.com/hyva-themes/hyva-ai-tools/tree/main/skills/hyva-render-media-image
Command: npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-render-media-image

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill simplifies generating compliant, responsive image markup for Hyvä templates by automating the creation of a <picture> element using the Hyva Theme Media view model. It eliminates manual coding of responsive images and ensures correct width/height to reduce CLS.

Core Features & Use Cases

Semantic markup: Generate a complete <picture> element with multiple sources for art-direction.
Flexible configurations: Support multiple image configs including path, width, height, media queries, and an optional fallback image.
Real-world scenarios: Use for hero banners, product galleries, and CMS content images across desktop and mobile.
Best practices: Guidance on lazy/eager loading, alt text, and media-query separation to optimize performance.

Quick Start

Use the hyva-render-media-image skill to generate a responsive picture element for a hero image with path 'wysiwyg/homepage-hero.jpg', width 1920, height 600, and a mobile variant.

Frequently Asked Questions about hyva-render-media-image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate responsive images in Hyvä Magento templates?▼

To generate responsive images in Hyvä templates, use the Hyva Theme Media view model to create a picture element. You provide image configurations like path, width, height, and media queries to output ready-to-insert HTML markup.

How do I reduce Cumulative Layout Shift (CLS) for hero banners in Magento?▼

Reduce CLS for Magento hero banners by rendering responsive images with explicit width and height attributes. This generates a picture element that reserves aspect-ratio space, preventing layout shifts during page load.

Can I use art-direction with different image sources for mobile and desktop in Hyvä?▼

Yes, you can achieve art-direction in Hyvä by configuring multiple image sources with distinct media queries within the picture element. This allows serving different image crops for mobile and desktop views.

What is the best way to configure a fallback image for a picture element in Hyvä?▼

The best way to configure a fallback image in Hyvä is to include an optional fallback configuration when generating the picture element. This ensures a default image displays if the primary responsive sources are unsupported.

Does the Hyva Media view model support lazy loading for CMS content images?▼

Yes, the Hyva Media view model supports best practices for loading attributes. You can specify lazy or eager loading when configuring CMS content images to optimize page performance.