Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

First batch of images picture tag #377

Merged
merged 16 commits into from
Dec 7, 2022
Merged

First batch of images picture tag #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
a61462c
[POC] Images picture tag
Oct 17, 2022
68d4f6a
Refactor
Oct 17, 2022
c87f022
Refactor to 2x
Oct 17, 2022
751f443
Add avif, webp and fallback
Oct 18, 2022
0ff1303
Fix some mistakes
Oct 18, 2022
93f170a
Set default height and width
Oct 18, 2022
8b5185e
Review feedbacks
Oct 19, 2022
9cf363c
Category size fix
Oct 26, 2022
ee1709a
Make sizes more generic
Oct 28, 2022
f27be95
Name to more generic
Nov 2, 2022
df9a702
Fix missing end tag
Nov 2, 2022
b8d1aea
Fix missing end tag
Nov 2, 2022
27ddb1f
Fix missing end tag
Nov 2, 2022
c410d85
Fix fallbacks urls
Nov 2, 2022
346b81d
Review feedbacks
Nov 3, 2022
8e06c6b
fix sizes mistake
Nov 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions config/theme.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,43 @@ global_settings:
width: 170
height: 115
scope: [stores]
default_xs:
width: 120
height: 120
scope: [products, manufacturers, suppliers, categories]
default_s:
width: 160
height: 160
scope: [categories, products]
default_m:
width: 200
height: 200
scope: [stores, manufacturers, suppliers, products]
default_md:
width: 320
height: 320
scope: [categories, products]
default_xl:
width: 400
height: 400
scope: [stores, products]
product_main:
width: 720
height: 720
scope: [products]
category_cover:
width: 1000
height: 200
scope: [categories]
SharakPL marked this conversation as resolved.
Show resolved Hide resolved
product_main_2x:
width: 1440
height: 1440
scope: [products]
category_cover_2x:
width: 2000
height: 400
scope: [categories]
NeOMakinG marked this conversation as resolved.
Show resolved Hide resolved


theme_settings:
rtl_generation: false
Expand Down
2 changes: 0 additions & 2 deletions templates/catalog/_partials/category-header.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,3 @@
{include file='catalog/_partials/subcategories.tpl' subcategories=$subcategories}
{/if}
</div>


6 changes: 5 additions & 1 deletion templates/catalog/_partials/miniatures/brand.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
*}
{block name='brand_miniature_item'}
<li class="brand card col-6 col-md-4 col-lg-3">
<div class="brand__img"><a href="{$brand.url}"><img src="{$brand.image}" alt="{$brand.name}" loading="lazy"></a></div>
<div class="brand__img">
<a href="{$brand.url}">
<img src="{$brand.image}" alt="{$brand.name}" loading="lazy">
</a>
</div>
<div class="brand__infos">
<p><a class="brand__link" href="{$brand.url}">{$brand.name}</a></p>
{$brand.text nofilter}
Expand Down
100 changes: 84 additions & 16 deletions templates/catalog/_partials/miniatures/product.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,91 @@
{block name='product_miniature_image'}
<div class="{$componentName}__image-container thumbnail-container">
{if $product.cover}
<img
src="{$product.cover.bySize.home_default.url}"
alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
loading="lazy"
data-full-size-image-url="{$product.cover.bySize.home_default.url}"
width="{$product.cover.bySize.home_default.width}"
height="{$product.cover.bySize.home_default.height}"
class="{$componentName}__image card-img-top"
/>
<picture>
{if isset($product.cover.bySize.default_md.sources.avif)}
<source
srcset="
{$product.cover.bySize.default_xs.sources.avif} 120w,
{$product.cover.bySize.default_m.sources.avif} 200w,
{$product.cover.bySize.default_md.sources.avif} 320w,
{$product.cover.bySize.product_main.sources.avif} 720w"
sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 50vw"
type="image/avif"
>
{/if}

{if isset($product.cover.bySize.default_md.sources.webp)}
<source
srcset="
{$product.cover.bySize.default_xs.sources.webp} 120w,
{$product.cover.bySize.default_m.sources.webp} 200w,
{$product.cover.bySize.default_md.sources.webp} 320w,
{$product.cover.bySize.product_main.sources.webp} 720w"
sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw"
type="image/webp"
>
{/if}

<img
class="{$componentName}__image card-img-top"
srcset="
{$product.cover.bySize.default_xs.url} 120w,
{$product.cover.bySize.default_m.url} 200w,
{$product.cover.bySize.default_md.url} 320w,
{$product.cover.bySize.product_main.url} 720w"
sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw"
src="{$product.cover.bySize.default_md.url}"
width="{$product.cover.bySize.default_md.width}"
height="{$product.cover.bySize.default_md.height}"
loading="lazy"
alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
data-full-size-image-url="{$product.cover.bySize.home_default.url}"
>
</picture>
{else}
<img
src="{$urls.no_picture_image.bySize.home_default.url}"
loading="lazy"
width="{$urls.no_picture_image.bySize.home_default.width}"
height="{$urls.no_picture_image.bySize.home_default.height}"
class="{$componentName}__image card-img-top"
/>
<picture>
{if isset($urls.no_picture_image.bySize.default_md.sources.avif)}
<source
srcset="
{$urls.no_picture_image.bySize.default_xs.sources.avif} 120w,
{$urls.no_picture_image.bySize.default_m.sources.avif} 200w,
{$urls.no_picture_image.bySize.default_md.sources.avif} 320w,
{$urls.no_picture_image.bySize.product_main.sources.avif} 720w"
sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 50vw"
type="image/avif"
>
{/if}

{if isset($urls.no_picture_image.bySize.default_md.sources.webp)}
<source
srcset="
{$urls.no_picture_image.bySize.default_xs.sources.webp} 120w,
{$urls.no_picture_image.bySize.default_m.sources.webp} 200w,
{$urls.no_picture_image.bySize.default_md.sources.webp} 320w,
{$urls.no_picture_image.bySize.product_main.sources.webp} 720w"
sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw"
type="image/webp"
>
{/if}

<img
class="{$componentName}__image card-img-top"
srcset="
{$urls.no_picture_image.bySize.default_xs.url} 120w,
{$urls.no_picture_image.bySize.default_m.url} 200w,
{$urls.no_picture_image.bySize.default_md.url} 320w,
{$urls.no_picture_image.bySize.product_main.url} 720w"
sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw"
width="{$urls.no_picture_image.bySize.default_md.width}"
height="{$urls.no_picture_image.bySize.default_md.height}"
src="{$urls.no_picture_image.bySize.default_md.url}"
loading="lazy"
alt="{l s='No image available' d='Shop.Theme.Catalog'}"
title="{l s='No image available' d='Shop.Theme.Catalog'}"
data-full-size-image-url="{$product.cover.bySize.home_default.url}"
>
</picture>
{/if}

{block name='quick_view_touch'}
Expand Down
130 changes: 104 additions & 26 deletions templates/catalog/_partials/product-cover-thumbnails.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,47 @@
{/if}

{block name='product_cover'}
{foreach from=$product.images item=image key=key}
{foreach from=$product.images item=image key=key name=productImages}
<div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
<img
class="img-fluid"
src="{$image.bySize.large_default.url}"
{if !empty($image.legend)}
<picture>
{if isset($image.bySize.default_md.sources.avif)}
<source
srcset="
{$image.bySize.default_md.sources.avif} 320w,
{$image.bySize.product_main.sources.avif} 720w,
{$image.bySize.product_main_2x.sources.avif} 1440w"
sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw"
type="image/avif"
>
{/if}

{if isset($image.bySize.default_md.sources.webp)}
<source
srcset="
{$image.bySize.default_md.sources.webp} 320w,
{$image.bySize.product_main.sources.webp} 720w,
{$image.bySize.product_main_2x.sources.webp} 1440w"
sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw"
type="image/webp"
>
{/if}

<img
class="img-fluid"
srcset="
{$image.bySize.default_md.url} 320w,
{$image.bySize.product_main.url} 720w,
{$image.bySize.product_main_2x.url} 1440w"
sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw"
src="{$image.bySize.product_main.url}"
width="{$image.bySize.product_main.width}"
height="{$image.bySize.product_main.height}"
loading="{if $smarty.foreach.productImages.first}eager{else}lazy{/if}"
alt="{$image.legend}"
title="{$image.legend}"
{else}
alt="{$product.name}"
{/if}
loading="lazy">
data-full-size-image-url="{$image.bySize.home_default.url}"
>
</picture>
</div>
{/foreach}
{/block}
Expand All @@ -54,19 +83,37 @@
{/if}
aria-label="{l s='Product image %number%' d='Shop.Theme.Catalog' sprintf=['%number%' => $key]}"
>
<img
class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
data-image-medium-src="{$image.bySize.medium_default.url}"
data-image-large-src="{$image.bySize.large_default.url}"
src="{$image.bySize.home_default.url}"
{if !empty($image.legend)}
alt="{$image.legend}"
title="{$image.legend}"
{else}
alt="{$product.name}"
<picture>
{if isset($image.bySize.default_xs.sources.avif)}
<source
srcset="
{$image.bySize.default_xs.sources.avif},
{$image.bySize.default_m.sources.avif} 2x",
type="image/avif"
>
{/if}

{if isset($image.bySize.default_xs.sources.webp)}
<source
srcset="
{$image.bySize.default_xs.sources.webp},
{$image.bySize.default_m.sources.webp} 2x"
type="image/webp"
>
{/if}
loading="lazy"
>

<img
class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
srcset="
{$image.bySize.default_xs.url},
{$image.bySize.default_m.url} 2x"
width="{$image.bySize.default_xs.width}"
height="{$image.bySize.default_xs.height}"
loading="lazy"
alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
NeOMakinG marked this conversation as resolved.
Show resolved Hide resolved
title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
>
</picture>
</li>
{/foreach}
</ul>
Expand All @@ -75,12 +122,43 @@

{hook h='displayAfterProductThumbs' product=$product}
{else}
<img
class="img-fluid"
src="{$urls.no_picture_image.bySize.large_default.url}"
width="{$urls.no_picture_image.bySize.large_default.width}"
height="{$urls.no_picture_image.bySize.large_default.height}"
<picture>
{if isset($urls.no_picture_image.bySize.default_md.sources.avif)}
<source
srcset="
{$urls.no_picture_image.bySize.default_md.sources.avif} 320w,
{$urls.no_picture_image.bySize.product_main.sources.avif} 720w,
{$urls.no_picture_image.bySize.product_main_2x.sources.avif} 1440w"
sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw"
type="image/avif"
>
{/if}

{if isset($urls.no_picture_image.bySize.default_md.sources.webp)}
<source
srcset="
{$urls.no_picture_image.bySize.default_md.sources.webp} 320w,
{$urls.no_picture_image.bySize.product_main.sources.webp} 720w,
{$urls.no_picture_image.bySize.product_main_2x.sources.webp} 1440w"
sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw"
type="image/webp"
>
{/if}

<img
class="img-fluid"
srcset="
{$urls.no_picture_image.bySize.default_md.url} 320w,
{$urls.no_picture_image.bySize.product_main.url} 720w,
{$urls.no_picture_image.bySize.product_main_2x.url} 1440w"
sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw"
width="{$urls.no_picture_image.bySize.product_main.width}"
height="{$urls.no_picture_image.bySize.product_main.height}"
src="{$urls.no_picture_image.bySize.default_md.url}"
loading="lazy"
alt="{l s='No image available' d='Shop.Theme.Catalog'}"
title="{l s='No image available' d='Shop.Theme.Catalog'}"
>
</picture>
{/if}
</div>
63 changes: 60 additions & 3 deletions templates/checkout/_partials/cart-detailed-product-line.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,67 @@
<a class="product-line__title product-line__item" href="{$product.url}"
data-id_customization="{$product.id_customization|intval}">
{if $product.default_image}
<img src="{$product.default_image.bySize.cart_default.url}" class="img-fluid" alt="{$product.name|escape:'quotes'}"
loading="lazy">
<picture>
{if isset($product.default_image.bySize.default_xs.sources.avif)}
<source
srcset="
{$product.default_image.bySize.default_xs.sources.avif},
{$product.default_image.bySize.default_m.sources.avif} 2x"
type="image/avif"
>
{/if}

{if isset($product.default_image.bySize.default_xs.sources.webp)}
<source
srcset="
{$product.default_image.bySize.default_xs.sources.webp},
{$product.default_image.bySize.default_m.sources.webp} 2x"
type="image/webp"
>
{/if}

<img
class="img-fluid"
srcset="
{$product.default_image.bySize.default_xs.url},
{$product.default_image.bySize.default_m.url} 2x"
width="{$product.default_image.bySize.default_xs.width}"
height="{$product.default_image.bySize.default_xs.height}"
loading="lazy"
alt="{$product.name|escape:'quotes'}"
title="{$product.name|escape:'quotes'}"
>
</picture>
{else}
<img src="{$urls.no_picture_image.bySize.cart_default.url}" class="img-fluid" loading="lazy" />
<picture>
{if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
<source
srcset="
{$urls.no_picture_image.bySize.default_xs.sources.avif},
{$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
type="image/avif"
>
{/if}

{if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
<source
srcset="
{$urls.no_picture_image.bySize.default_xs.sources.webp},
{$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
type="image/webp"
>
{/if}

<img
class="img-fluid"
srcset="
{$urls.no_picture_image.bySize.default_xs.url},
{$urls.no_picture_image.bySize.default_m.url} 2x"
width="{$urls.no_picture_image.bySize.default_xs.width}"
height="{$urls.no_picture_image.bySize.default_xs.height}"
loading="lazy"
>
</picture>
{/if}
</a>
</div>
Expand Down
Loading