.

Jak skutecznie przycinać zdjęcia w Drupalu? Crop API - przegląd modułu

Podczas tworzenia strony, której edytorzy będą pracować nad treściami ze zdjęciami, często pojawia się problem: jak zarządzać obrazami tak, aby edytor nie musiał ich manualnie edytować, gdy chce opublikować tą samą treść w innym wyglądzie? W Drupalu można trafić na ten problem podczas tworzenia nowych trybów widoku dla dowolnej encji ze zdjęciami. Celem trybów widoku jest serwowanie tej samej treści w formie innej niż domyślna. Dla pól tekstowych czy dat użyjemy innych formatterów. A dla obrazów?

Crop API oraz moduły UI korzystające z tego interfejsu API

Drupal Core pozwala na przycinanie obrazów bez dodatkowych modułów, lecz ta funkcjonalność nie jest na tyle elastyczna, aby odpowiadała wszelkim potrzebom. Moduł Drupala Crop API dostarcza podstawowe API, pozwalające na bardziej dopasowane przycinanie obrazów. Z jego interfejsu korzysta miedzy innymi Image Widget Crop. Zapewnia UI do wycinania zdjęć, używając wcześniej zdefiniowanych typów przycinania. Jest bardzo przydatny dla stron internetowych, na których są publikowane artykuły ze zdjęciami lub witryn do zarządzania mediami.

Kolejnym modułem wykorzystującym Crop API jest Focal Point. Pozwala na ustalenie, która część obrazu jest najważniejsza. Fragment ten jest używany podczas przycinania czy też skalowania zdjęcia, aby - przykładowo - jedna z obecnych na nim osób nie straciła głowy.

Moduł Drupala Crop API - informacje ogólne

Moduł wydano 17 listopada 2014 roku, jego najnowsza wersja 2.2 została opublikowana 18 lutego 2022. Moduł jest stale aktywnie wspierany i rozwijany. Jest kompatybilny z PHP 8.1 oraz z Drupalem ^8.8 i 9.

Popularność Crop API

Moduł posiada ponad 90 tysięcy instalacji. Z tygodnia na tydzień jest ich coraz więcej, tendencja wzrostowa utrzymuje się od czasu pierwszego wydania. Nowsza wersja 2.x potrzebowała trzech lat, aby wyprzeć starszą wersję 1.x. Aktualnie znaczna większość stron internetowych korzystających z Crop API używa nowszej wersji.

Statystyki przedstawiające liczbę instalacji modułu Drupala Crop API

Źródło: Drupal.org 

Autorzy Crop API

Oryginalnym twórcą modułu jest Janez Urevc (slashrsm). Pracuje na stanowisku Senior Performance Engineer w firmie Tag1 Consulting, w której zajmuje się tworzeniem i utrzymaniem aplikacji webowych. Jest aktywnym członkiem społeczności Drupala - w 2014 roku pomógł zainicjować media initiative for Drupal 8, gdzie wraz z innymi członkami społeczności pracował nad wprowadzeniem mediów w Drupalu na unowocześniony poziom.

Moduł Crop API jest oficjalnie wspierany przez MD Systems GmbH, a głównymi maintainerami modułu, poza Janezem, są też Adam G-H (phenaproxima), Alexandre Mallet (woprrr) oraz Drupal Media Team.

Instalacja

Crop API nie wymaga instalacji dodatkowych bibliotek. Posiada zależności jedynie do modułów Image oraz User, które są częścią rdzenia Drupala. Instalacja przebiega więc standardowo. Jak zawsze, rekomendujemy instalację modułu za pomocą Composera.

composer require 'drupal/crop:^2.2'

Moduł dostarcza dwa nowe uprawnienia: Administer crop settings, pozwalający na zarządzanie podstawowymi ustawieniami Crop API oraz Administer crop types, który umożliwia dodawanie, usuwanie oraz edycję zdefiniowanych typów przycinania.

Miejsce do zarządzania uprawnieniami dla modułu Crop API, gdzie można dodawać typy przycinania

 

Użycie modułu Crop API

Jak zaznaczyliśmy we wstępie, sam moduł Crop API nie pozwala na wiele. Należy traktować go jako interfejs, który mogą wykorzystać inne moduły. Niemniej posiada on kilka opcji konfiguracyjnych, które postaramy się przybliżyć.

Crop API udostępnia nowy typ encji - Crop type. W tej encji definiujemy typy przycinania, których chcemy używać.

Definiowanie typów przycinania w encji Crop type w module Drupala Crop API

 

Podczas dodawania nowego typu przycinania mamy możliwość wprowadzenia kilku ustawień.

Dodając nowy typ przycinania w module Crop API, możemy wprowadzić nowe ustawienia

Soft limit rozciąga obrazek, aby uzyskać podane proporcje. Hard limit zmienia wymiary i ucina część obrazka.

Hooki

Crop API dostarcza jeden dodatkowy hook: hook_crop_entity_provider_info_alter. Dzięki niemu możemy zmieniać informacje na temat entity providera, które domyślnie są kalkulowane w klasie \Drupal\crop\Annotation\CropEntityProvider. W hooku mamy dostęp do tablicy $providers. Możemy ją zmienić, żeby na przykład zedytować tytuł media providera.

Moduły rozszerzające

Crop API został stworzony, aby służyć jako interfejs, z którego mogą korzystać inne moduły. W celu uzyskania pełni możliwości, należy wybrać jeden z modułów rozszerzających, który swoją funkcjonalnością najbardziej odpowiada naszym potrzebom.

 

Image Widget Crop

Moduł dostarcza widget pozwalający na wybranie jednego z predefiniowanych typów przycinania. Posiada responsywny tryb umożliwiający zmianę typu oraz dostosowanie manualne.

Wybór jednego z predefiniowanych typów przycinania za pomocą modułu Image Widget Crop

 

Możliwość manualnego przycinania obrazu w module Drupala Image Widget Crop

 

Focal Point

Moduł pozwala na określenie kluczowego punktu obrazka, który będzie traktowany jako jego centrum podczas procesu przycinania. Jeśli używałeś lub używałaś kiedyś obrazka, którego ważna dla Ciebie część została ucięta przez skalowanie z hard cropem - ten moduł okaże się zbawienny.

Moduł Drupala Crop API - podsumowanie

CropAPI to przydatne narzędzie, które w połączeniu z modułami wspierającymi dostarcza funkcjonalność szytą na miarę. Instalacja tego modułu jest rekomendowana w przypadku, w którym Twoja strona wymaga rozwiązań bardziej elastycznych, niż te dostępne w rdzeniu.

Zastanawiasz się nad wyborem modułów do Twojegu projektu? Chętnie podpowiemy, które narzędzia będą dla niego najbardziej odpowiednie. Na co dzień tworzymy strony internetowe na Drupalu i wykorzystujemy do tego wiele modułów lub tworzymy własne.

3. Najlepsze praktyki zespołów programistycznych