Skocz do zawartości

Zdjęcie

.tpl wywoływanie funkcji dla danej rozdzielczości


8 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 24 lutego 2016 - 10:56

#1

Hejo,

mam sobie widok kategorii z listą produktów.
Dla mobilek pobieram wszystkie zdjęcia danego produktu i można je w widoku kategorii przewijać w lewo i prawo.
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

Pytanie jak taki poniższy kawałem .tpl wykonywać tylko dla danej rozdzielczości (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>

  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 24 lutego 2016 - 12:59

#2

UPDATE: Zadałem to samo pytanie na forum presty. jak mi tam szybciej pomogą niż tutaj to będzie mi smutno :( 


  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 24 lutego 2016 - 15:37

#3

Hmmm, pierwsze słyszę żeby można było zrobić coś takiego.

Jedyne co teraz na szybko znalazłem w necie to to: https://forum.x-cart...32&postcount=14 tyle że tutaj dotyczy to X-CART, spróbuj pobrać i zobaczyć skąd on bierze tą rozdzielczość :)


  • 1

webDeveloper


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 24 lutego 2016 - 15:47

#4

Hmmm, pierwsze słyszę żeby można było zrobić coś takiego.

Jedyne co teraz na szybko znalazłem w necie to to: https://forum.x-cart...32&postcount=14 tyle że tutaj dotyczy to X-CART, spróbuj pobrać i zobaczyć skąd on bierze tą rozdzielczość :)

A może jakoś pobierać same linki do obrazków i wrzucać je do HTML jeśli spelniony jest warunek rozdzielczosci w js? 


  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 25 lutego 2016 - 09:55

#5

Jak zależy Ci na takiej optymalizacji to możesz użyć jakiegoś lazy loading, jeżeli jakiś element będzie ukryty za pomocą css to się nie będzie ładowała grafika :)

Ostatecznie możesz sam napisać skrypcik typu że każdemu img (czy elementom z bg) ustawić jakiś atrybut typu "data-src" i tam podawać url do grafiki, a w normalnym src jakąś lekką zaślepkę

Teraz js sprawdzać rozdzielczość, najlepiej jest zsynchronizować to z media querisami w css (jak nie wiesz jak, to napisz, podrzucę zajebiste rozwiązanie) zamiast na sztywno w js robić if( window.width == XXXX) etc. i jeżeli dany element ma się wyświetlać to mu przepisywać data-src do src. Lub coś podobnego, zależy co potrzebujesz konkretnie uzyskać :)


  • 1

webDeveloper


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 25 lutego 2016 - 10:03

#6

Jak zależy Ci na takiej optymalizacji to możesz użyć jakiegoś lazy loading, jeżeli jakiś element będzie ukryty za pomocą css to się nie będzie ładowała grafika :)

Ostatecznie możesz sam napisać skrypcik typu że każdemu img (czy elementom z bg) ustawić jakiś atrybut typu "data-src" i tam podawać url do grafiki, a w normalnym src jakąś lekką zaślepkę

Teraz js sprawdzać rozdzielczość, najlepiej jest zsynchronizować to z media querisami w css (jak nie wiesz jak, to napisz, podrzucę zajebiste rozwiązanie) zamiast na sztywno w js robić if( window.width == XXXX) etc. i jeżeli dany element ma się wyświetlać to mu przepisywać data-src do src. Lub coś podobnego, zależy co potrzebujesz konkretnie uzyskać :)

"jeżeli dany element ma się wyświetlać to mu przepisywać data-src do src"

zajebiste :D Bo wygenerowanie samego linku przez Smarty transferu nie zje  jak pobranie zdjęcia nie? Tylko teraz pytanie w jakim momencie uzupełniać img src? Korzystam z tego do przewijania: http://owlgraphic.co...index.html#demo

Co do rozwiązania z wyłapywaniem szerokości to chętnie zobaczę. Ja wlasnie zazwyczaj na window resize czy cos sprawdzalem rozdzialke w taki sposob jak pokazales.


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 25 lutego 2016 - 11:37

#7

UPDATE:

wtf? http://owlgraphic.co...s/lazyLoad.html

sprawdzę i dam znać, czy zadziała.


  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 25 lutego 2016 - 13:37

#8

Co do synchro css media queries z js, możesz to zrobić w resize, onclick, czy gdzie tam to potrzebuesz, tutaj bardziej chodzi o to żeby brejkpointy w js były dokładnie takie same jak w css. Dajesz w htmlu coś takiego:

<div id="detect"></div>

Teraz odpowiednio w stylach, coś na ten wzór:

#detect{
	position: absolute;
	overflow: hidden;
	width: 0px;
	height: 0px;
	left: -100%;
	top: -100%;
	display: block;
/* nie moze miec display none */
}

@media screen and (min-device-width: 1126px){
	#detect{
		&:after{
			content: "desktop";
		}
	}
}

@media screen and (max-device-width: 1125px){
	#detect{
		&:after{
			content: "tablet";
		}
	}
}
/* etc, brejkpointy ustawiasz po swojemu, content też sobie ustaw po swojemu. */

Teraz js:

var elm = document.getElementById("detect"),
    type = window.getComputedStyle(elm,':after').content;

if( type.match(/desktop/g) ){
	//co tam dla desktop
}else if( type.match(/tablet/g) ){
	//co tam dla tablet
}
/* etc... */

Jak najbardziej możesz to zrobić w resize, później np odpowiednim elementom które się pojawiają tylko na desktop dać odpowiednią klasę, na tablet jeszcze inną, na mobile kolejną. później tylko dzięki powyższemu ifowi odpowiednim elementom przepisywać data-src do src i po sprawie :)


  • 0

webDeveloper


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 25 lutego 2016 - 14:29

#9

Ok, ale kwestia tego w ktorym momencie przypisywac data-src do src. mam na stronie 10 produktow. Kazdy ma po 10 zdjec. Ja widze na ekranie smartfona 1 produkt i 1 zdjecie w danej chwili. Dopiero po przesunieciu palcem na boki widze kolejne zdjecia a po zjechaniu w dol kolejne produkty :)


UPDATE:
dzięki za skrypt, na pewno się kiedyś przyda. Tutaj w zasadzie nie muszę rozpoznawać wielu rozdzialek tylko 1. Poradzilem sobie rozwiazaniem dodanym do owl carousel.

demo tut: http://serwer10481.l...ashop/index.php

Jak byscie przy okazji mogli sprawdzic, czy smiga na Waszych smartfonach przewijanie zdjec na boki w widoku kategorii i lazy loading u nich :)
 


  • 0




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych