74 lines
2.9 KiB
PHP
74 lines
2.9 KiB
PHP
@props([
|
|
'path',
|
|
'alt',
|
|
// No image on the site spans the full viewport: every one of them sits inside
|
|
// `container-amare`, which reserves 1.5rem of padding on each side. Claiming
|
|
// 100vw made a 412 px viewport at DPR 1.75 ask for 721 px and jump to the
|
|
// 960 variant for a box it draws at 637 px.
|
|
'sizes' => '(max-width: 768px) calc(100vw - 3rem), 960px',
|
|
'loading' => 'lazy',
|
|
'fetchpriority' => null,
|
|
'width' => null,
|
|
'height' => null,
|
|
'disk' => null,
|
|
'class' => null,
|
|
])
|
|
|
|
@php
|
|
use App\Support\PublicImageUploadRules;
|
|
use App\Support\ResponsiveImage;
|
|
use Illuminate\Support\Facades\Storage;
|
|
|
|
$diskName = $disk ?? PublicImageUploadRules::disk();
|
|
$filesystem = Storage::disk($diskName);
|
|
$src = $filesystem->url($path);
|
|
|
|
$toSrcset = fn (array $variants): string => collect($variants)
|
|
->map(fn (array $variant): string => $filesystem->url($variant['path']).' '.$variant['width'].'w')
|
|
->implode(', ');
|
|
|
|
// All public rendering reads one durable metadata record. On a cache hit this
|
|
// avoids both existence probes and downloading the original from R2.
|
|
$metadata = ResponsiveImage::metadata($path, $diskName);
|
|
$variants = $metadata['variants'] ?? [];
|
|
$srcset = $toSrcset($variants);
|
|
|
|
// Offered ahead of the original format because webp carries the same picture
|
|
// for roughly a third of the bytes, and the MAN-109 audit found the hero
|
|
// image to be the LCP element on every page at mobile widths. Media uploaded
|
|
// before `media:generate-variants` learned to emit webp has no siblings, so
|
|
// the <source> is skipped rather than pointed at nothing.
|
|
$webpSrcset = $toSrcset($metadata['webp_variants'] ?? []);
|
|
|
|
$dimensions = ($width === null || $height === null)
|
|
? $metadata
|
|
: null;
|
|
|
|
$resolvedWidth = $width ?? $dimensions['width'] ?? null;
|
|
$resolvedHeight = $height ?? $dimensions['height'] ?? null;
|
|
$loadingValue = $loading;
|
|
@endphp
|
|
|
|
{{-- `display: contents` keeps <picture> out of the layout: the callers style the
|
|
<img> with classes like `h-full w-full object-cover` that resolve against the
|
|
grid or flex parent, and an inline wrapper would break that. --}}
|
|
@if ($webpSrcset !== '')
|
|
<picture class="contents">
|
|
<source type="image/webp" srcset="{{ $webpSrcset }}" sizes="{{ $sizes }}">
|
|
@endif
|
|
<img
|
|
src="{{ $src }}"
|
|
@if ($srcset) srcset="{{ $srcset }}" @endif
|
|
sizes="{{ $sizes }}"
|
|
alt="{{ $alt }}"
|
|
@if ($resolvedWidth) width="{{ $resolvedWidth }}" @endif
|
|
@if ($resolvedHeight) height="{{ $resolvedHeight }}" @endif
|
|
loading="{{ $loadingValue }}"
|
|
@if ($fetchpriority) fetchpriority="{{ $fetchpriority }}" @endif
|
|
@if ($class) class="{{ $class }}" @endif
|
|
{{ $attributes->except(['path', 'alt', 'sizes', 'loading', 'width', 'height', 'disk', 'class']) }}
|
|
>
|
|
@if ($webpSrcset !== '')
|
|
</picture>
|
|
@endif
|