Do czego służy znacznik ksi-image?

Znacznik <ksi-image>{ parametry w formacie JSON }</ksi-image> służy do przekształcania obrazka w formacie JPG na obraz RWD w formacie WEBP z obsługą mechanizmu lazy-load.

Przekształcony obraz domyślnie umieszczony jest w kontenerze o szerokości 100% a podrzędnemu mu obiektowi img nadane są takie atrybuty ny wypełniał cały obszar kontenera. Domyślna wysokość kontenera to 360px i można ją zmienić np. przez ustawienie parametru: containerStyle. W zależności od wdrożenia powyższe domyślne ustawienia mogą być różne dlatego warto je zweryfikować za pomocą narzędzi deweloperskich dostępnych w przeglądarce.

Parametry

Parametry konfiguracyjne należy przygotować w formacie JSON.

• template: nazwa szablonu. Domyślnie 'default'. W wersji podstawowej jest to jedyny dostępny szablon. Istnieje możliwość stworzenia większej ilości szablonów.
• image: nazwa pliku obrazu z bieżącego katalogu.
• alt: tekst alternatywny dla atrybutu alt.
• width: docelowa szerokość obrazu źródłowego.
• height: docelowa wysokość obrazu źródłowego. Jeśli pusta to domyślnie zostanie ustawiona na 360.
• aspectRatio: [ "yes" | "no" | "cropping" ]. Domyślnie "cropping".
• containerStyle: wartość atrybutu style dla kontenera.
• imgStyle: wartość atrybutu style dla elementu img.
• containerClass: dodatkowe klasy dla kontenera.
• imgClass: dodatkowe klasy dla elementu img.

Przykład użycia

<ksi-image>{"image":"img-default.jpg","alt":"Przykładowy obraz"}</ksi-image>

lub 

<ksi-image>
{
  "image":"img-1.jpg",
  "alt":"Przykładowy obraz",
  "width":0,
  "height":360,
  "aspectRatio":"cropping"
}
</ksi-image>

Efekt działania powyższego kodu: