maofree commented 1 year ago

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 commented 1 year ago

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.