mcpField
H
hyva-render-media-image

hyva-render-media-image

github.com/hyva-themesDevelopment851.3k installsUpdated 13w ago
Repository

About hyva-render-media-image

A skill for generating responsive image markup in Hyvä Theme PHTML templates with the `\Hyva\Theme\ViewModel\Media` view model. It helps developers configure image sources, attributes, and loading behavior for template use.

Key features

  1. 01Responsive picture markup
  2. 02Mobile and desktop sources
  3. 03Image attribute configuration
  4. 04Eager or lazy loading
  5. 05Media view model usage

Use cases

  1. 01Add images to Hyvä PHTML templates
  2. 02Create mobile and desktop hero images
  3. 03Set loading behavior for above- and below-fold images

Install

Copy the command and run it in a terminal.

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

After installing, type/hyva-render-media-imagein Claude Code to confirm it loaded.

Bundled filesreferences/rendering-images.md

Details

From the project README

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:

  1. Image path(s) - Location in pub/media/ (e.g., wysiwyg/hero.jpg, catalog/product/...)
  2. Image dimensions - Width and height in pixels
  3. Responsive requirements - Different images for mobile vs desktop?
  4. Image purpose - Hero/LCP image (eager loading) or below-fold (lazy loading)?
  5. 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:

ScenarioPattern to Use
Single image, literal valuesSingle Image Example
Single image from variableWrap in array: [$imageData]
Multiple images from variablePass directly: $images
Different images for mobile/desktopResponsive Images with Media Queries
Need to style the <picture> wrapperPicture 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 TypeAttributes
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

Comments

Markdown supported