diff --git a/CHANGELOG.md b/CHANGELOG.md index ab870a2..8589e15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,22 @@ All notable changes to the Nynaeve theme will be documented in this file. For project-wide changes (infrastructure, tooling, cross-cutting concerns), see the [project root CHANGELOG.md](../../../../../CHANGELOG.md). +## [2.0.15] - 2025-11-24 + +### Added +- **Speed Optimization: Responsive Hero Images** ([HeroBlock.php:181-196](app/Blocks/HeroBlock.php#L181-L196), [setup.php:149-151](app/setup.php#L149-L151)) + - Added custom image sizes `hero-desktop` (600×348) and `hero-desktop-2x` (1200×696) for hero block + - Hero block now uses `wp_get_attachment_image()` with automatic srcset generation + - Browser loads appropriately sized image based on display and viewport + - **Impact**: ~50 KiB savings on standard displays, ~20 KiB on retina (from 69.8 KiB original) + - **Note**: Run `wp media regenerate --only-missing` after deploying to create new sizes + +### Changed +- Updated `hero-block.blade.php` to use responsive `$desktop_image_html` with URL fallback for preview mode + +### Documentation +- Updated `docs/nynaeve/SPEED-TWEAKS.md` with Optimization 7 implementation details + ## [2.0.14] - 2025-11-24 ### Added diff --git a/app/Blocks/HeroBlock.php b/app/Blocks/HeroBlock.php index 4781cf6..8cac7e0 100644 --- a/app/Blocks/HeroBlock.php +++ b/app/Blocks/HeroBlock.php @@ -178,10 +178,42 @@ public function with(): array $sub_heading_text_value = 'Website & Ecommerce Solutions for SME'; } - $desktop_image_url_value = $desktop_image['url'] ?? null; + // Generate responsive image HTML for desktop + // Uses 'hero-desktop' size (600x348) with srcset for retina (1200x696) + $desktop_image_html = ''; $desktop_image_alt_value = $desktop_image['alt'] ?? ($desktop_image['title'] ?? 'Desktop image'); - $mobile_image_url_value = $mobile_image['url'] ?? null; + if (! empty($desktop_image['ID'])) { + $desktop_image_html = wp_get_attachment_image( + $desktop_image['ID'], + 'hero-desktop', + false, + [ + 'class' => 'desktop-only-img object-cover w-full h-full', + 'loading' => 'lazy', + 'sizes' => '(min-width: 1024px) 576px, 50vw', + ] + ); + } + + // Generate responsive image HTML for mobile + // Uses 'medium' size with automatic srcset + $mobile_image_html = ''; $mobile_image_alt_value = $mobile_image['alt'] ?? ($mobile_image['title'] ?? 'Mobile image'); + if (! empty($mobile_image['ID'])) { + $mobile_image_html = wp_get_attachment_image( + $mobile_image['ID'], + 'medium', + false, + [ + 'class' => 'object-cover', + 'loading' => 'lazy', + ] + ); + } + + // Fallback URLs for preview mode or legacy template support + $desktop_image_url_value = $desktop_image['url'] ?? null; + $mobile_image_url_value = $mobile_image['url'] ?? null; if ($is_preview_mode) { if (! $desktop_image_url_value) { @@ -190,6 +222,7 @@ public function with(): array // Base64 encode instead of using urlencode $desktop_image_url_value = 'data:image/svg+xml;base64,'.base64_encode($desktop_svg); $desktop_image_alt_value = 'Placeholder for desktop image'; + $desktop_image_html = ''; // Clear HTML so URL fallback is used } if (! $mobile_image_url_value) { // Create mobile placeholder SVG @@ -197,14 +230,17 @@ public function with(): array // Base64 encode instead of using urlencode $mobile_image_url_value = 'data:image/svg+xml;base64,'.base64_encode($mobile_svg); $mobile_image_alt_value = 'Placeholder for mobile/tablet image'; + $mobile_image_html = ''; // Clear HTML so URL fallback is used } } return [ 'heading_text' => $heading_text_value, 'sub_heading_text' => $sub_heading_text_value, + 'desktop_image_html' => $desktop_image_html, 'desktop_image_url' => $desktop_image_url_value, 'desktop_image_alt' => $desktop_image_alt_value, + 'mobile_image_html' => $mobile_image_html, 'mobile_image_url' => $mobile_image_url_value, 'mobile_image_alt' => $mobile_image_alt_value, 'font_weight' => $font_weight_value, diff --git a/app/setup.php b/app/setup.php index 1643be2..f0d835d 100644 --- a/app/setup.php +++ b/app/setup.php @@ -145,6 +145,10 @@ add_action('after_setup_theme', function () { add_image_size('product-gallery-main', 800, 1000, true); // 800x1000 pixels, cropped add_image_size('portfolio-slide', 800, 500, true); // 16:10 aspect ratio, good for both desktop and mobile + + // Hero block responsive images (displayed at ~576x334 on desktop) + add_image_size('hero-desktop', 600, 348, true); // 1x for standard displays + add_image_size('hero-desktop-2x', 1200, 696, true); // 2x for retina displays }, 20); /** diff --git a/resources/views/blocks/hero-block.blade.php b/resources/views/blocks/hero-block.blade.php index 10c7dd4..e9dc90d 100644 --- a/resources/views/blocks/hero-block.blade.php +++ b/resources/views/blocks/hero-block.blade.php @@ -33,20 +33,15 @@
{{-- Desktop Image: Only add the actual img on desktop or in admin --}}
- @if (!empty($desktop_image_url)) - {{-- Only load desktop image on larger screens or in admin --}} - @if(is_admin()) - {{ $desktop_image_alt }} - @else - {{-- Use a data attribute to store the URL, which will be loaded via JS only on desktop --}} - {{ $desktop_image_alt }} - @endif + @if (!empty($desktop_image_html)) + {{-- Responsive image with srcset for optimal loading --}} + {!! $desktop_image_html !!} + @elseif (!empty($desktop_image_url)) + {{-- Fallback for preview mode or missing responsive sizes --}} + {{ $desktop_image_alt }} @elseif($is_preview)
Desktop Image Placeholder (16:9) @@ -56,9 +51,13 @@ class="desktop-only-img object-cover w-full h-full"> {{-- Mobile/Tablet Image: Visible on screens smaller than lg --}}
- @if (!empty($mobile_image_url)) - {{ $mobile_image_alt }} @elseif($is_preview) diff --git a/style.css b/style.css index 446c193..038d83b 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,7 @@ Theme Name: Nynaeve Theme URI: https://imagewize.com Description: Modern WordPress theme built on Sage 11 with reusable custom blocks using WordPress native tools and the Roots.io stack. -Version: 2.0.14 +Version: 2.0.15 Author: Jasper Frumau Author URI: https://magewize.com Text Domain: nynaeve