Wykorzystanie filtrów Img i Img2 w szablonach niesie za sobą korzyści, takie jak możliwość wyświetlenia nie tylko wewnętrznych obrazków, ale też z adresu url. W tym artykule dowiesz się, jak zmienić kod szablonów, aby w wybranych miejscach używały filtrów Img lub Img2.
Filtry Img i Img2 oraz jak ich używać zostały opisane w tym artykule w zakładce HTML.
Mogą być używane dla:
- obrazków towaru (na liście towarów, szczegółach towarów, koszyku, zamówieniu, reklamacji, itd.)
- obrazków na blogu
- obrazków producentów
- obrazków marek
Jeżeli chcesz, aby w danym miejscu szablon wykorzystywał filtr Img, w pierwszej kolejności musisz zlokalizować kod odpowiadający za wyświetlanie tego obrazka. W tym celu można w przeglądarce kliknąć prawym przyciskiem myszy na obrazek, który nas interesuje, a następnie kliknąć w Zbadaj. Znajdź div lub inny element, który zawiera ten obrazek i skopiuj jego klasę lub inny charakterystyczny atrybut. Później przy pomocy narzędzia wyszukiwania wyszukaj tę frazę w kodzie szablonu w plikach z rozszerzeniem .html.
Przykład w szablonie Agat na szczegółach towaru:
Po zbadaniu zdjęcia towaru na szczegółach towaru w przeglądarce, wyświetlił się następujący kod elementu:
Charakterystycznym elementem okazała się klasa product-image. Po wyszukaniu tej frazy znaleziono poniższy kawałek kodu w pliku product-page.html.
|
0 1 2 3 4 5 6 7 8 9 |
<figure class="product-image"> {% if productD.ImageId != -1 -%} <div class="zoom" data-zoom-img-style="url(img/{{image.Id}}/{{image.Link}}.jpg)"></div> <img alt="{{image.Alt}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg"> {% else -%} <i class="fa fa-picture-o" aria-hidden="true"></i> {% endif -%} </figure> |
Najważniejszą linią kodu jest linia odpowiedzialna za wyświetlenie obrazka, czyli:
|
0 1 2 |
<img alt="{{image.Alt}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg"> |
Jak widać zdjęcie jest wyświetlanie nie przy pomocy filtra, który tworzy tag img, lecz poprzez ustawienie tagu img wraz z atrybutami w kodzie szablonu. Link, Id i inne atrybuty pobierane są w tym przypadku ze zmiennej image. Dodatkowo można zauważyć, że link zapisany jest w atrybucie data-lazy. Jak wynika z artykułu dotyczącego filtrów, podlinkowanego wyżej, filtr Img2 wstawia link do obrazka do atrybutu data-lazy, natomiast filtr Img do atrybutu data-src. W związku z powyższym w tym przypadku zostanie wykorzystany filtr Img2 a kod z jego użyciem będzie wyglądał następująco:
|
0 1 2 3 4 5 6 7 8 9 |
<figure class="product-image"> {% if productD.ImageId != -1 -%} <div class="zoom" data-zoom-img-style="url({% if image.Id !=0 -%} img/{{image.Id}}/{{image.Link}}.jpg {% elseif image.ExternalUrl -%} {{image.ExternalUrl}} {% endif -%})"></div> {{image|Img2:''}} {% else -%} <i class="fa fa-picture-o" aria-hidden="true"></i> {% endif -%} </figure> |