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.
`
{% if productD.ImageId != -1 -%}
{% else -%}
{% endif -%}
`
Najważniejszą linią kodu jest linia odpowiedzialna za wyświetlenie obrazka, czyli:
<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:
`
{% if productD.ImageId != -1 -%}
{{image|Img2:''}}
{% else -%}
{% endif -%}
`