Multimedia

Obsługiwane pliki multimedialne

System obsługuje natywnie najpopularniejsze typy plików multimedialnych. Pełną listę obsługiwanych typów MIME można znaleźć w pliku konfiguracyjnym system/config/media.yaml. Obsługę dodatkowych plików można dodać za pomocą wtyczek do systemu.

Lokalizacja plików multimedialnych

Pliki multimedialne mogą zostać umieszczone:

• wewnątrz katalogu każdej strony,
• w folderze głównym np: user/pages/images.

Pliki wewnątrz katalogu strony

Pliki używane w obrębie jednej strony możemy umieścić wewnątrz katalogu tej strony. Do pliku możemy odwołać się z pliku .md używając składni markdown.

Przykład

Wstawienie obrazu:

![Some ALT text](about.jpg)
<!– return HTML –>
<img alt=“Some ALT text” src=”/user/pages/01.home/03._about/about.jpg”>

Wstawienie obrazu wraz z dodatkowymi atrybutami:

![Some ALT text](about.jpg?classes=img-fluid “My title”)
<!– return HTML –>
<img title=“My title” alt=“Some ALT text” class=“img-fluid” src=”/user/pages/01.home/03._about/about.jpg”>

W plikach szablonów Twig do plików multimedialnych odwołujemy się poprzez obiekt page.media.

{% set image = page.media[‘about.jpg’] %}

tak utworzona zmienna image jest obiektem, który posiada wiele metod umożliwiających manipulowanie obrazem.

Przykłady

Pobranie referencji do obrazu o określonej nazwie:

// utworzenie referencji
{% set image = page.media.images[‘about.jpg’] %}

Pobranie pierwszego, drugiego i ostatniego obrazu:

{% set firstImage = page.media.images|first %}
{% set secondImage = page.media.images|slice(1, 1)|first %}
{% set lastImage = page.media.images|last %}

UWAGA Kolejność określana jest na podstawie nazw plików chyba, że w pliku .md strony została zdefiniowana, np:

media_order: about2.jpg,about1.jpg

Zwrócenie adresu URL obrazu:

{{ image.url()|e }}
// return string
// /user/pages/01.home/03._about/about.jpg

Wygenerowanie kodu HTML:

{{ image.html(‘My title’, ‘Some ALT text’, ‘img‐fluid another-classes’)|raw }}
// return html: <img title=“My title” alt=“Some ALT text” class=“img-fluid another‐classes” src=”/user/pages/01.home/03._about/about.jpg” />

Pobranie wszystkich obrazów z katalogu strony i wygenerowanie struktury HTML:

{% set images = page.media.images %}

{% for image in images %}
    <div class=“swiper-slide” data‐image‐src=”{{ image.url()|e }}”></div>
{% endfor %}

Warunkowe tworzenie obiektu obrazu:

{% if page.header.cover %}
    {% set imageObject = page.media.images[page.header.cover] %}
{% else %}
    {% set imageObject = page.media.images|first %}
{% endif %}

Jeżeli w pliku .md znajduje się właściwość page.header.cover to zostanie użyta jej wartość. W przeciwnym wypadku zostanie użyty pierwszy plik z katalogu strony.

Pliki w folderze głównym user/pages/images

W tym przypadku w plikach .md strony podajemy pełną ścieżkę do pliku:

![Some ALT text](/user/pages/images/photos/about.jpg?classes=img-fluid “My title”)

W szablonach Twig używamy metody find() podając jako argument ścieżkę do katalogu wewnątrz /user/pages:

{% set image = page.find(‘/images’).media[‘image.jpg’] %}

Funkcje do manipulowania plikami multimedialnymi

System CMS GRAV udostępnia szereg przydatnych funkcji do manipulowania plikami multimedialnym w tym dla plików graficznych umożliwia m.in.: zmianę rozmiaru, przycinanie, obrót, manipulowanie barwą i kontrastem.

Przykład

Przycięcie obrazu z zachowaniem współczynnika proporcji:

{{ image.cropZoom(600,200).html(‘My title’, ‘Some ALT text’, ‘img‐fluid another-classes’)|raw }}
// return html: <img title=“My title” alt=“Some ALT text” class=“img-fluid another‐classes” src=”/images/5/e/9/2/4/5e924cb845628e33c8decad8415e08e7c58fd083-about.jpg”>

Pełna lista metod dostępna jest w dokumentacji.

Metafiles

Każdy plik multimedialny, może posiadać w tej samej lokalizacji własny metaplik. Format nazwy pliku wygląda następująco: <filename.extension>.meta.yaml. Na przykład dla obrazu o nazwie image1.jpg można utworzyć metaplik o nazwie image1.jpg.meta.yaml.

Zawartość tego pliku powinna być sformatowana w składni YAML i mogłaby wyglądać następująco:

title: My title
alt: Some ALT text

Do zapisanych danych w metapliku odwołujemy się poprzez obiekt meta, np:

// referencja do pliku
{% set image = page.media.images[‘about.jpg’] %}

{{ image.html(meta.title, meta.alt, ‘img-fluid’)|raw }}
// return html: <img title=“My title” alt=“Some ALT text” class=“img-fluid” src=”/user/pages/01.home/03._about/about.jpg”>

Responsywne obrazy

Dostosowanie rozmiaru:

{% set image = page.media.images|first %}

{{ image.derivatives(320,940,300).sizes(‘(max-width:991px) 100vw, (max-width:1200px) 50vw, 636px’).html(meta.title, meta.alt, ‘img-fluid’)|raw }}

Pierwszym parametrem jest szerokość najmniejszego z generowanych obrazów. Drugi to maksymalna szerokość generowanych obrazów. Trzeci i jedyny opcjonalny parametr określa interwały generowania zdjęć (domyślnie 200).

Dla powyższego przykładu zostaną wygenerowane obrazy oraz kod HTML:

<img title=“Some title” alt=“Some ALT text” class=“img-fluid” src=”/user/pages/01.home/03._about/about2.jpg” srcset=”/images/8/b/6/7/e/8b67ef4d13aed80c44790c35cb5269ff0018519f-about2320w.jpg 320w, /images/f/2/f/a/a/f2faa200c5c374fde514d8db1320f9363709db65-about2620w.jpg 620w, /images/f/4/b/0/7/f4b07c90e660728a989ccf064b790d8a06895b44-about2920w.jpg 920w, /user/pages/01.home/03._about/about2.jpg 992w” sizes=”(max-width:991px) 100vw, (max-width:1200px) 50vw, 636px”>

Konfiguracja może zostać zapisana w pliku .md:

settings:
    images:
        min: 276
        max: 478
        threshold: 100
        mediaQuery: ‘(max-width:576px) 100vw, (max‐width: 768px) 456px, 276px’

// get settings from parent page
{% set settings = page.parent().header.settings  %}
// get first image in page
{% set firstImage = page.media.images|first %}

// create images and img tag with attributes
{{ firstImage
    .derivatives(settings.images.min, settings.images.max, settings.images.threshold)
    .sizes(settings.images.mediaQuery)
    .html(meta.title, meta.alt, ‘img‐fluid’)
    |raw 
}}

Można również przekazać konkretne rozmiary do wygenerowania:

{{ firstImage
    .derivatives([212, 257, 302, 332,])
    .sizes(‘(max-width:768px) 240px, (max-width:992px) 332px, (max-width:1200px) 212px, (max-width:1400px) 257px, 302px’)
    .html(meta.title, meta.alt, ‘img‐fluid’)
    |raw
}}

W powyższym przykładzie metoda derivatives jako argument przyjmuje tablicę z wymiarami obrazów.