index-shop/site/templates/home.php
isUnknown 30d09d6104 Add responsive image optimization with WebP support
- Configure thumbs presets in config.php (quality 85%, WebP format)
- Create picture snippet with srcset and WebP support
- Add product-card and product-detail presets
- Update templates to use optimized images
- Implement native lazy loading for product cards
- Add aspect-ratio CSS for layout stability

Improvements over reference project:
- Complete PHPDoc documentation
- Native CSS aspect-ratio support
- Optimized lazy loading strategy
- Product-specific image presets

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-10 16:00:58 +01:00

35 lines
1.5 KiB
PHP

<?php snippet('header', ['title' => $site->title(), 'template' => 'store']) ?>
<main>
<p class="p__baseline-big">
<?= $page->baseline()->or('Bienvenue sur la boutique de soutien à Index') ?>
</p>
<section id="store__container">
<?php foreach($site->children()->listed() as $product): ?>
<article class="store__product">
<figure>
<?php if($image = $product->images()->first()): ?>
<?php snippet('picture', [
'file' => $image,
'alt' => $product->title()->html(),
'preset' => 'product-card',
'size' => 25,
'lazy' => true
]) ?>
<?php endif ?>
</figure>
<p class="line-1"><a href="<?= $product->url() ?>"><?= $product->title()->html() ?></a></p>
<p class="price"><?= $product->price() ?>€</p>
<a href="<?= $product->url() ?>" class="link-block" aria-hidden="true"></a>
</article>
<?php endforeach ?>
</section>
<p class="p__baseline-big">
<?= t('supportText', 'Pour nous soutenir, vous&nbsp;pouvez&nbsp;aussi') ?>
<a href="https://soutenir.index.ngo" class="link-don"><?= t('makeDonation', 'faire un don') ?></a>
</p>
</main>
<?php snippet('footer') ?>