How to install hyva-render-media-image
npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-render-media-imageFull instructions (SKILL.md)
Source of truth, from hyva-themes/hyva-ai-tools.
name: hyva-render-media-image description: Generate responsive image code for Hyvä Theme templates using the Media view model. This skill should be used when the user wants to render images in a Hyvä template, create responsive picture elements, add hero images, product images, or any image that needs responsive breakpoints. Trigger phrases include "render image", "add image to template", "responsive image", "picture element", "hero image", "responsive banner", "image for mobile and desktop", or "banner image".
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.
2. Generate the Code
Refer to references/rendering-images.md for the complete API reference, code examples, and all configuration options.
Choose the appropriate pattern:
| Scenario | Pattern to Use |
|---|---|
| Single image, literal values | Single Image Example |
| Single image from variable | Wrap in array: [$imageData] |
| Multiple images from variable | Pass directly: $images |
| Different images for mobile/desktop | Responsive Images with Media Queries |
Need to style the <picture> wrapper | Picture Element Attributes |
Base template:
<?php
/** @var \Hyva\Theme\ViewModel\Media $mediaViewModel */
$mediaViewModel = $viewModels->require(\Hyva\Theme\ViewModel\Media::class);
echo $mediaViewModel->getResponsivePictureHtml(
$images, // Array of image configs (see reference for format)
$imgAttributes, // Optional: alt, class, loading, fetchpriority
$pictureAttributes // Optional: class, data-* attributes for <picture>
);
3. Set Loading Strategy
| Image Type | Attributes |
|---|---|
| Hero/LCP (above fold) | 'loading' => 'eager', 'fetchpriority' => 'high' |
| Below fold | 'loading' => 'lazy' |
Resources
references/rendering-images.md- Complete API reference with method signature, all configuration options, code examples, and best practices
Related skills
More from hyva-themes/hyva-ai-tools and the wider catalog.
hyva-exec-shell-cmd
Utility skill to detect Magento development environment and determine command wrapper. This skill should be used by other skills that need to execute shell commands in the Magento environment. It detects Warden, docker-magento, DDEV, and local environments and provides the appropriate command wrapper.
hyva-alpine-component
Write CSP-compatible Alpine.js components for Hyvä themes in Magento 2. This skill should be used when the user wants to create Alpine components, add interactivity to Hyvä templates, write JavaScript for Hyvä themes, or needs help with Alpine.js patterns that work with Content Security Policy. Trigger phrases include "create alpine component", "add interactivity", "alpine for hyva", "x-data component", "csp compatibility", "csp compliant javascript".
hyva-child-theme
Create a Hyvä child theme in a Magento 2 project. This skill should be used when the user wants to create a new Hyvä child theme, set up a custom theme based on Hyvä, or initialize a new frontend theme directory structure. Trigger phrases include "create hyva child theme", "new hyva theme", "setup child theme", "create custom theme", "initialize theme".
hyva-compile-tailwind-css
Compile Tailwind CSS for Hyvä themes in Magento 2. Use when the user wants to build styles, generate CSS, compile Tailwind, run Tailwind, or create production/development stylesheets for a Hyvä theme. Also use when Tailwind classes are not taking effect or some styles appear missing after template changes — this typically means CSS needs to be recompiled. Triggers include "compile tailwind", "build styles", "generate css", "styles not working", "styles are missing", "styles not applied".
hyva-ui-component
Apply Hyva UI template-based components to a Hyvä theme. This skill should be used when the user wants to add, install, or apply a Hyva UI component (such as header, footer, gallery, menu, minicart, etc.) to their Hyvä theme. It lists available non-CMS components and their variants, displays component README instructions, and copies component files to the theme directory.
hyva-create-module
Create a new Magento 2 module in app/code/. This skill should be used when the user wants to create a module, scaffold a new module, generate module boilerplate, or set up a custom module. It handles registration.php, composer.json, module.xml generation with configurable dependencies. Trigger phrases include "create module", "new module", "scaffold module", "generate module".