🐛 [BUG] - [FIX] improvements in the file subcategories.tpl

[maofree]

Description

Hi
I pass you some improvements for the file subcategories.tpl to add webp and lazyload

{if !empty($subcategory.image.small.url)} {images_block webpEnabled=$webpEnabled} <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='{$subcategory.image.small.width}' height='{$subcategory.image.small.height}' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="{$subcategory.image.small.url}" alt="{$subcategory.name|escape:'html':'UTF-8'}" class="img-fluid lazyload" width="{$subcategory.image.small.width}" height="{$subcategory.image.small.height}" > {/images_block} {/if}

I use the small type following hummingbird solution

I give you a nice solution for the subcategories images, I show them in a horizontal scroll instead to use the grid

`/* Subcategories */
#subcategories .subcategories-list {
flex-wrap: nowrap;
overflow: auto;
}

#subcategories .subcategories-list .col {
min-width: 8rem;
max-width: 12rem;
}

#subcategories .subcategories-list .card-title {
font-size: 90%;
font-weight: normal;
}`

I attach my tpl file
subcategories.zip

bye

Node.js version

v16

php version

8.1

OS and it's version

linux

Browsers

Chrome

Required module/theme

theme

Reproduction steps

1. Go to see subcategories.tpl

Logs

No response

[Oksydan]

Hi @maofree,

we will be redesigning this view in new version 4. New projects in Figma should be available in one month.
I am going to keep this issue to remember about missing images_block.
BTW you should never create css selector with ID or use .col class for styling something 🥶 it's related to layout and layout might change. Consider using custom classes with BEM or OOCSS methodology.

[maofree]

Hi
I use #subcategories because is set also in the classic and hummingbird tpl
and I use .col because in this cases I don't want the grid solution but a simple horizontal scroll, without a carousel. Using the lazyload the hidden images are not loaded and can be many without problems of sizes and without taking up space in height of the page. The number of blocks varies. with the carousel the scrolling would be slow, however in this way they would do it quickly