Merge pull request #154 from Hlavtox/prepare-thumbnails

Use new way to access category images
PrestaShop · Sep 17, 2024 · 5b47c04 · 5b47c04
2 parents eea56e9 + ccfb396
commit 5b47c04
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/templates/catalog/_partials/category-header.tpl b/templates/catalog/_partials/category-header.tpl
@@ -30,12 +30,12 @@
                 {if $category.description}
                     <div id="category-description" class="text-muted">{$category.description nofilter}</div>
                 {/if}
-                {if !empty($category.image.large.url)}
+                {if !empty($category.cover.large.url)}
                     <div class="category-cover">
                         <picture>
-                            {if !empty($category.image.large.sources.avif)}<source srcset="{$category.image.large.sources.avif}" type="image/avif">{/if}
-                            {if !empty($category.image.large.sources.webp)}<source srcset="{$category.image.large.sources.webp}" type="image/webp">{/if}
-                            <img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" fetchpriority="high" width="{$category.image.large.width}" height="{$category.image.large.height}">
+                            {if !empty($category.cover.large.sources.avif)}<source srcset="{$category.cover.large.sources.avif}" type="image/avif">{/if}
+                            {if !empty($category.cover.large.sources.webp)}<source srcset="{$category.cover.large.sources.webp}" type="image/webp">{/if}
+                            <img src="{$category.cover.large.url}" alt="{if !empty($category.cover.legend)}{$category.cover.legend}{else}{$category.name}{/if}" fetchpriority="high" width="{$category.cover.large.width}" height="{$category.cover.large.height}">
                         </picture>
                     </div>
                 {/if}

diff --git a/templates/catalog/_partials/subcategories.tpl b/templates/catalog/_partials/subcategories.tpl
@@ -32,17 +32,29 @@
           <li>
             <div class="subcategory-image">
               <a href="{$subcategory.url}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
-                {if !empty($subcategory.image.large.url)}
+                {if !empty($subcategory.thumbnail.large.url)}
                   <picture>
-                    {if !empty($subcategory.image.large.sources.avif)}<source srcset="{$subcategory.image.large.sources.avif}" type="image/avif">{/if}
-                    {if !empty($subcategory.image.large.sources.webp)}<source srcset="{$subcategory.image.large.sources.webp}" type="image/webp">{/if}
+                    {if !empty($subcategory.thumbnail.large.sources.avif)}<source srcset="{$subcategory.thumbnail.large.sources.avif}" type="image/avif">{/if}
+                    {if !empty($subcategory.thumbnail.large.sources.webp)}<source srcset="{$subcategory.thumbnail.large.sources.webp}" type="image/webp">{/if}
                     <img
                       class="img-fluid"
-                      src="{$subcategory.image.large.url}"
+                      src="{$subcategory.thumbnail.large.url}"
                       alt="{$subcategory.name|escape:'html':'UTF-8'}"
                       loading="lazy"
-                      width="{$subcategory.image.large.width}"
-                      height="{$subcategory.image.large.height}"/>
+                      width="{$subcategory.thumbnail.large.width}"
+                      height="{$subcategory.thumbnail.large.height}"/>
+                  </picture>
+                {else}
+                  <picture>
+                    {if !empty($urls.no_picture_image.large.sources.avif)}<source srcset="{$urls.no_picture_image.large.sources.avif}" type="image/avif">{/if}
+                    {if !empty($urls.no_picture_image.large.sources.webp)}<source srcset="{$urls.no_picture_image.large.sources.webp}" type="image/webp">{/if}
+                    <img
+                      class="img-fluid"
+                      src="{$urls.no_picture_image.large.url}"
+                      alt="{$subcategory.name|escape:'html':'UTF-8'}"
+                      loading="lazy"
+                      width="{$urls.no_picture_image.large.width}"
+                      height="{$urls.no_picture_image.large.height}"/>
                   </picture>
                 {/if}
               </a>