Skip to content

Commit

Permalink
Merge pull request #403 from NeOMakinG/picture-tag-end
Browse files Browse the repository at this point in the history 
Switch some images to picture tags
  • Loading branch information
@SharakPL
SharakPL authored Dec 9, 2022
2 parents 47d0ad5 + 242fcf6 commit 4864e86
Show file tree
Hide file tree
Showing 8 changed files with 306 additions and 45 deletions.
63 changes: 60 additions & 3 deletions modules/productcomments/views/templates/hook/post-comment-modal.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,67 @@

{block name='product_cover'}
<div class="product-cover">
{if $product.cover}
<img class="js-qv-product-cover rounded" src="{$product.cover.bySize.medium_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
{if !empty($product.cover)}
<picture>
{if isset($product.cover.bySize.default_xs.sources.avif)}
<source
srcset="
{$product.cover.bySize.default_xs.sources.avif},
{$product.cover.bySize.default_m.sources.avif} 2x"
type="image/avif"
>
{/if}

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

<img
class="js-qv-product-cover rounded"
srcset="
{$product.cover.bySize.default_xs.url},
{$product.cover.bySize.default_m.url} 2x"
loading="lazy"
width="{$product.cover.bySize.default_xs.width}"
height="{$product.cover.bySize.default_xs.height}"
alt="{$product.cover.legend}"
title="{$product.cover.legend}"
</picture>
{else}
<img src="{$urls.no_picture_image.bySize.large_default.url nofilter}" style="width:100%;" class="rounded">
<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="rounded"
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}
</div>
{/block}
Expand Down
69 changes: 58 additions & 11 deletions templates/catalog/_partials/miniatures/pack-product.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,67 @@
<article class="product-pack__item rounded mb-2 p-2">
<a href="{$product.url}" title="{$product.name}" class="row align-items-center">
<div class="product-pack__image col-2">
{if !empty($product.default_image.medium)}
<img
src="{$product.default_image.medium.url}"
{if !empty($product.default_image.legend)}
{if !empty($product.default_image)}
<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 rounded"
srcset="
{$product.default_image.bySize.default_xs.url},
{$product.default_image.bySize.default_m.url} 2x"
loading="lazy"
width="{$product.default_image.bySize.default_xs.width}"
height="{$product.default_image.bySize.default_xs.height}"
alt="{$product.default_image.legend}"
title="{$product.default_image.legend}"
{else}
alt="{$product.name}"
{/if}
loading="lazy"
class="img-fluid rounded"
>
</picture>
{else}
<img src="{$urls.no_picture_image.bySize.medium_default.url}" loading="lazy" class="img-fluid rounded" />
<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 rounded"
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}
</div>

Expand Down
4 changes: 2 additions & 2 deletions templates/catalog/_partials/miniatures/product.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
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}"
alt="{$product.cover.legend}"
title="{$product.cover.legend}"
data-full-size-image-url="{$product.cover.bySize.home_default.url}"
>
</picture>
Expand Down
4 changes: 2 additions & 2 deletions templates/catalog/_partials/product-cover-thumbnails.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,8 @@
width="{$image.bySize.default_xs.width}"
height="{$image.bySize.default_xs.height}"
loading="lazy"
alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
alt="{$image.legend}"
title="{$image.legend}"
>
</picture>
</li>
Expand Down
16 changes: 4 additions & 12 deletions templates/catalog/_partials/product-images-modal.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,8 @@
class="js-modal-product-cover product-cover-modal"
width="{$product.default_image.bySize.large_default.width}"
src="{$product.default_image.bySize.large_default.url}"
{if !empty($product.default_image.legend)}
alt="{$product.default_image.legend}"
title="{$product.default_image.legend}"
{else}
alt="{$product.name}"
{/if}
alt="{$product.default_image.legend}"
title="{$product.default_image.legend}"
height="{$product.default_image.bySize.large_default.height}"
>
{else}
Expand All @@ -40,12 +36,8 @@
data-image-large-src="{$image.large.url}"
class="thumb js-modal-thumb"
src="{$image.medium.url}"
{if !empty($image.legend)}
alt="{$image.legend}"
title="{$image.legend}"
{else}
alt="{$product.name}"
{/if}
alt="{$image.legend}"
title="{$image.legend}"
width="{$image.medium.width}"
height="148"
>
Expand Down
61 changes: 59 additions & 2 deletions templates/checkout/_partials/order-confirmation-table.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,66 @@

<div class="item__image col-lg-1 col-md-2 col-sm-2 col-3 mb-2 mb-md-0">
{if !empty($product.default_image)}
<img src="{$product.default_image.medium.url}" loading="lazy" class="img-fluid" />
<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"
loading="lazy"
width="{$product.default_image.bySize.default_xs.width}"
height="{$product.default_image.bySize.default_xs.height}"
alt="{$product.default_image.legend}"
title="{$product.default_image.legend}"
</picture>
{else}
<img src="{$urls.no_picture_image.bySize.medium_default.url}" loading="lazy" class="img-fluid" />
<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}
</div>

Expand Down
68 changes: 61 additions & 7 deletions templates/customer/_partials/order-detail-no-return.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,67 @@
<tr>
<td>
{if $product.cover}
<img src="{$product.cover.bySize.small_default.url}"
alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
loading="lazy" data-full-size-image-url="{$product.cover.large.url}" width="64" height="64"
class="order-products__image card-img-top w-auto" />
<picture>
{if isset($product.cover.bySize.default_xs.sources.avif)}
<source
srcset="
{$product.cover.bySize.default_xs.sources.avif},
{$product.cover.bySize.default_m.sources.avif} 2x",
type="image/avif"
>
{/if}

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

<img
class="order-products__image card-img-top w-auto"
srcset="
{$product.cover.bySize.default_xs.url},
{$product.cover.bySize.default_m.url} 2x"
width="{$product.cover.bySize.default_xs.width}"
height="{$product.cover.bySize.default_xs.height}"
loading="lazy"
alt="{$product.cover.legend}"
title="{$product.cover.legend}"
>
</picture>
{else}
<img src="{$urls.no_picture_image.bySize.small_default.url}" loading="lazy" width="64" height="64"
class="order-products__image card-img-top w-auto" />
<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="order-products__image card-img-top w-auto"
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}
</td>

Expand Down Expand Up @@ -91,7 +145,7 @@
<div class="col-4">
{if $product.cover}
<img src="{$product.cover.bySize.small_default.url}"
alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
alt="{$product.cover.legend}"
loading="lazy" data-full-size-image-url="{$product.cover.large.url}" width="64" height="64"
class="order-products__image card-img-top w-auto" />
{else}
Expand Down
Loading

0 comments on commit 4864e86

Please sign in to comment.