.tpl Wywoływanie Funkcji Dla Danej Rozdzielczości

[znc]

W product-list.tpl dla urządzeń z rozdzielczością mniejszą niż powiedzmy 480px pobieram wszystkie zdjęcia danego produktu i można je w widoku kategorii przewijać w lewo i prawo na urządzeniu mobilnym.
 

Na desktopach i tabletach wyświetlam już tylko 1 zdjęcie główne produktu i wyłączam to przewijanie.
 

Z tym, że na razie zawsze pobieram wszystkie zdjęcia i tylko ukrywam je w CSS, co jest mega słabym rozwiązaniem pod względem wydajności.

 

Pytanie jak taki poniższy kawałek kodu w .tpl wykonywać tylko dla danej rozdzielczości. CHodzi o wypluwanie wszystkich zdhęć gdy spełniony jest warunek orzdzielczości. ( bo raczej rozdzielczość jest tym wyznacznikiem, nie user agent czy coś).

<a class="product_img_link product-category-car visible-xss-inline hidden-sm hidden-md hidden-lg" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
{assign var='productImgs' value=Product::getProductImages($product.id_product)}
  {foreach from=$productImgs item=productImg name=productImgs}
    <div><img src="{$link->getImageLink($product.link_rewrite, $productImg.id_image, 'home_default')}" /></div>
  {/foreach}
</a>

 

[Krystian Podemski]

No warunku w smarty nie zrobisz, IMO ładowanie zdjęć via ajax dopiero przy spełnieniu warunku będzie dobrym rozwiązaniem

[znc]

No warunku w smarty nie zrobisz, IMO ładowanie zdjęć via ajax dopiero przy spełnieniu warunku będzie dobrym rozwiązaniem

Nie wiem, czy dobrze rozumiem.

 

Czyli najpierw mam pobrać tym foreach w tpl same linki do obrazków a potem ewentualnie je wrzucać do html? Nie mam większego doświadczenia w .tpl i łączniu go z .js

[Krystian Podemski]

Nie, w .tplu masz tylko wrapper np. <div id="mobile-gallery" data-product="{$product.id_product|intval}"></div>, w FrontController.php czy gdzieś za pomocą modułu robisz funkcję do pobierania fotek, w javascript robisz ajax odnoszący się do tej funkcji gdy rozdzielczość sprawdzona przez js jest taka jaką chcesz. 

 

Tyle teorii, tak jak Ci napisałem, w smarty nie zrobisz warunku mówiącego o rozdzielczości okna przeglądarki.

[znc]

Hmm. A co powiesz na wpisywanie linków do data-src i potem w odpowiednim mmomencie przerzucanie ich do img src? 

[Krystian Podemski]

W zasadzie możesz zainteresować się ogólnie srcset i jakimś rozwiązanie, które wesprze przeglądarki, które tego domyślnie nie obsługują. 

https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/

 

Ale tak, opcja o której piszesz powinna zdać egzamin musiałbyś jednak jakoś ładnie opakować ładowanie tych obrazów, możesz użyć do tego jakiegoś lazyLoad etc.

[znc]

W zasadzie możesz zainteresować się ogólnie srcset i jakimś rozwiązanie, które wesprze przeglądarki, które tego domyślnie nie obsługują. 

https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/

 

Ale tak, opcja o której piszesz powinna zdać egzamin musiałbyś jednak jakoś ładnie opakować ładowanie tych obrazów, możesz użyć do tego jakiegoś lazyLoad etc.

Padło na http://owlgraphic.com/owlcarousel/, które ma obsłużone lazy loading.

 

Dzięki za pomoc. Pozdr.