Jak paragrafy usprawniają tworzenie i edycję treści w Drupalu?

Czym są paragrafy w Drupalu?

Moduł Paragraphs umożliwia przygotowanie modułów (paragrafów), za pomocą których można budować podstrony w witrynach internetowych utworzonych z wykorzystaniem Drupala. Aby skorzystać z paragrafów, należy w typie treści lub w bloku dodać pole typu Paragraph, które jest zapewniane wraz z instalacją modułu Paragraphs, a następnie wybrać, które typy paragrafów mają być dostępne w danym polu. Redaktor tworzący lub edytujący treści będzie mógł dodać dowolną liczbę paragrafów z dostępnych typów, a także zmieniać ich kolejność zgodnie z własnymi preferencjami.

Instalacja modułu Paragraphs nie dostarcza domyślnych typów paragrafów. Każdy typ paragrafu użytkownik musi skonfigurować samodzielnie. Jest to jednak bardzo intuicyjne: użytkownik ma pełną kontrolę nad tym, z jakich pól powinien składać się dany typ paragrafu. Ponadto może zarządzać nim w pełnym stopniu.

Jakie są zalety korzystania z paragrafów?

Prostota

Obsługa paragrafów jest prosta i intuicyjna. Korzystając z paragrafów, osoba tworząca lub edytująca treść nie musi się martwić o to, czy zawartość, którą akurat tworzy, będzie na pewno wyglądać w oczekiwany sposób oraz czy nie spotka się z problemami na wersji mobilnej witryny, jeśli typ paragrafu zostanie w odpowiedni sposób przygotowany (w tym ostylowany).

Konfiguracja paragrafów nie jest również skomplikowana: wystarczy za pomocą kilku kliknięć stworzyć typ paragrafu oraz dodać odpowiednie pola. Po ustawieniu konfiguracji pozostaje stylowanie oraz (opcjonalnie) stworzenie własnego szablonu. Raz przygotowany typ paragrafu będzie służył niezliczoną ilość razy.

Paragrafy umożliwiają także przeprowadzenie różnorakich operacji, takich jak wcześniej wspomniane już stworzenie własnego szablonu dla typu paragrafu, obsługę tłumaczeń oraz wiele innych. Najważniejsze aspekty paragrafów omówimy w dalszej części artykułu.

Uporządkowanie

Dzięki paragrafom możliwe jest znaczne uporządkowanie procesu tworzenia i edycji treści w CMS Drupal. Bez wykorzystania paragrafów redaktorzy wielokrotnie tworzą treści w edytorze WYSIWYG, które zawierają teksty, zdjęcia, filmy, i inne. Niestety edytor WYSIWYG nie zawsze umożliwia wyświetlanie dodanych elementów dokładnie w taki sposób, w jaki oczekiwałby tego edytujący lub tworzący treść użytkownik.

Jeszcze większe problemy pojawiają się na mniejszych rozdzielczościach ekranów, na przykład w wersjach mobilnych. Z pomocą przychodzi modyfikowanie kodu źródłowego w edytorze WYSIWYG. Jednak to wymaga umiejętności programowania od użytkownika modyfikującego treść lub wsparcia programistów. Natomiast paragrafy raz skonfigurowane są “samowystarczalne” - redaktor edytujący treść tylko uzupełnia pola, a treść będzie wyświetlać się w zaplanowany sposób. Redaktor nie musi posiadać umiejętności programowania.

Konfigurowalność

W paragrafach możliwe jest stworzenie pól, które niekoniecznie będą służyć wyświetlaniu treści, zdjęć czy multimediów, ale będą wykorzystywane jako pola konfiguracyjne. Użytkownik może w nich wybrać na przykład klasę CSS lub tryb wyświetlania paragrafu w zależności od podstrony, na której tworzy lub edytuje wybrany paragraf. W ten sposób redaktor może mieć jeszcze większą kontrolę nad ostatecznym wyglądem i układem treści. Takie rozwiązanie jest o wiele bardziej przyjazne niż dodawanie kodu wbudowanego w kodzie źródłowym edytora WYSIWYG.

Modułowość

Paragrafy zapewniają także modułowość, która eliminuje powtarzalność elementów strukturalnych i bloków kodu w projekcie. Jeśli w dwóch lub więcej typach zawartości czy blokach potrzebna jest ta sama struktura, na przykład moduł logotyp oraz odnośnik, wystarczy stworzyć jeden typ paragrafu, który będzie zawierał w sobie oba pola (logotyp, odnośnik) i stworzyć możliwość umieszczenia go wszędzie tam, gdzie redaktor chciałby mieć do niego dostęp. Nie trzeba wówczas tworzyć wielu tych samych struktur pól w różnych miejscach projektu, na przykład w kilku rodzajach zawartości.

Możliwości

Paragrafami mogą być komponenty z treściami, zdjęciami, układy wielokolumnowe, slidery, odtwarzacze wideo oraz audio, mapy, formularze, aplikacje (stworzone na przykład w Vue.js lub za pomocą innej technologii). Możliwości jest wiele. Możesz zdefiniować wiele typów paragrafów, z których bez problemu będą korzystać osoby niezwiązane z programowaniem, a zajmujące się zarządzaniem treścią.

Guidebook tworzenia paragrafów w Drupalu dla programistów

Prześledźmy zatem, jak można w prosty, podstawowy sposób wykorzystać zalety paragrafów w Drupalu 9. Stworzymy galerię, która będzie składać się z elementów zawierających zdjęcie, tytuł, tekst oraz odnośnik (zewnętrzny lub wewnętrzny). Aby to zrobić, utworzymy dwa typy paragrafów: Galeria oraz Element galerii. Jak możesz się domyślić, galeria będzie wrapperem dla elementów galerii. Paragraf galerii umieścimy w typie zawartości Artykuł i następnie stworzymy dla niego własny szablon. Końcowy efekt będzie następujący:

1. Zainstaluj moduł Paragraphs w swoim projekcie opartym na Drupalu 9

Informacje na temat aktualnej wersji modułu możesz znaleźć na jego stronie internetowej. Jeśli używasz Composera, uruchom komendę:

composer require drupal/paragraphs

Warto wiedzieć, że moduł Paragraphs do poprawnego działania wymaga modułu Entity Reference Revisions. Uruchamiając wyżej wymienioną komendę, Composer zatroszczy się o to, by moduł Entity Reference Revisions również został zainstalowany, oczywiście w odpowiedniej wersji.

2. Stwórz pierwszy typ paragrafu

Aby utworzyć typ paragrafu, w menu administracyjnym przejdź do Structure 🠖 Paragraph types 🠖 Add paragraph type (/admin/structure/paragraphs_type/add).

Wypełnij wszystkie pola, tak jak na przedstawionym wyżej zrzucie ekranu: uzupełnij etykietę typu paragrafu, oraz (opcjonalnie) ikonę i opis. Następnie zapisz typ paragrafu.

3. Dodaj pola do typu paragrafu

Dodawanie pól w typie paragrafu funkcjonuje w sposób identyczny jak w dodawaniu pól w typie zawartości czy w bloku. Stwórz nowe pola lub wybieraj istniejące pola z listy dostępnych pól. Spróbuj odwzorować strukturę, którą przedstawiono na zrzucie ekranu zamieszczonym poniżej: odnośnik, tekst, tytuł oraz zdjęcie.

Wykorzystaliśmy tutaj moduł Media do utworzenia pola Zdjęcie, jednak możesz zmodyfikować ten krok i wykorzystać pole typu Obraz (lub stworzyć inne pola).

4. Stwórz drugi typ paragrafu

W kolejnym kroku utwórz drugi typ paragrafu - Galeria, który będzie wrapperem na paragrafy typu Element galerii.

Po utworzeniu drugiego typu paragrafu lista typów paragrafów dostępna pod Structure 🠖 Paragraph types będzie prezentować się następująco:

W kolejnym kroku stworzymy pole typu Paragraph.

5. Dodaj pole typu Paragraph

Dodaj nowe pole typu Paragraph z kategorii Reference revisions - tak jak przedstawiono to na zrzucie ekranu umieszczonym poniżej.

W ustawieniach pola zdefiniuj limit paragrafów, które będzie można dodać w tworzonej właśnie galerii lub ustaw nielimitowaną ilość paragrafów - w zależności od tego, czego potrzebujesz. Następnie wybierz, jakie typy paragrafów mają być dostępne w typie paragrafu Galeria. Wybierz jedynie Element galerii, jednak istnieje możliwość wyboru wielu typów paragrafów.

Zapisz ustawienia.

6. Dodaj paragraf do typu treści

Wybierz typ zawartości, w którym chcesz dodać paragraf lub paragrafy i dodaj w nim nowe pole typu Paragraph. Typem zawartości, który wybraliśmy w tym guidebooku, jest Artykuł. Następnie skonfiguruj ustawienia pola, tak jak opisywane było to wcześniej. W sekcji Reference type z dostępnych typów paragrafów wybierz Galeria.

Zapisz zmiany. Rezultat powinien wyglądać następująco:

7. Napisz własny szablon

Możliwe jest tworzenie własnych (customowych) szablonów dla paragrafów. Paragrafy wykorzystują sugestie nazewnictwa plików, takie jak w przypadku podstawowych drupalowych modułów. Dostępne są sugestie od najbardziej do najmniej szczegółowych – z trybem wyświetlania, z typem paragrafu, z trybem wyświetlania oraz typem paragrafu - więcej informacji na ten temat można znaleźć w dokumentacji modułu Paragraphs. Po dodaniu własnego szablonu konieczne jest przebudowanie pamięci podręcznej.

W przypadku naszego guidebooka, gdzie paragraf Galeria ma nazwę systemową gallery, wystarczy utworzenie pliku: paragraph--gallery.html.twig.

8. Zadbaj o tłumaczenia

Paragrafy doskonale obsługują tłumaczenia, jednak jest kilka ważnych kwestii, o których trzeba pamiętać, aby uniknąć błędów. Nigdy nie włączaj tłumaczeń w polu typu Paragraph – takie działanie nie jest wspierane i spowodowałoby w przyszłości szereg błędów związanych z dodawaniem lub edytowaniem tłumaczeń, a także z zapisywaniem treści. Drupal ostrzega Cię przed niepoprawnymi ustawieniami:

Ostrzegany jesteś także w ustawieniach Content language and translation:

Przy polu Paragrafy znajduje się etykieta “(* unsupported)”.

Jak więc możesz uruchomić tłumaczenia dla paragrafów? To proste – włączaj tłumaczenia tylko w tych polach, które nie są typu Paragraph. Spójrz na przykład:

Polecamy również w każdym paragrafie, który ma włączone tłumaczenia, zaznaczenie pola Hide non-translatable fields on translation forms. Pole to zaznaczasz w widoku Content language and translation (admin/config/regional/content-language).

Guidebook obsługi paragrafów dla redaktorów

Korzystanie przez redaktorów ze skonfigurowanych już paragrafów nie różni się niczym od uzupełniania pól dodanych do typów zawartości lub bloków bez użycia paragrafów.

Na początek dodaj paragraf poprzez kliknięcie Add (nazwa paragrafu):

W tym momencie powinien dodać się paragraf wraz z jego polami. Uzupełnij je: wgraj zdjęcie, dodaj tytuł, wprowadź tekst, który można sformatować oraz dodaj link. Tak jak możesz zauważyć, na dole w dalszym ciągu znajduje się przycisk Add (nazwa paragrafu) - za jego pomocą możesz dodać kolejny element galerii.

Zapisz zmiany, kiedy skończysz edytować treści.

Paragrafy w Drupalu - co jeszcze jest możliwe?

Poniżej przedstawiamy inne przykłady wykorzystania paragrafów w Drupalu 9.

Wiele typów paragrafów dostępnych z jednego pola

Tak jak wspomniano wcześniej, możliwe jest ustawienie wielu typów paragrafów jako dostępnych w jednym polu.

Redaktor, dodając paragrafy, może zmieniać ich kolejność, przesuwając je za pomocą mechanizmu drag&drop.

Podłączenie aplikacji Vue.js do paragrafu

Problem

Wyobraź sobie hipotetyczną sytuację: za pomocą typu treści Strona podstawowa stworzono kilka podstron: Koncerty, Wernisaże oraz Warsztaty. W bazie danych przechowywane są informacje na temat koncertów, wernisaży i warsztatów. Celem jest stworzenie kilku wyszukiwarek, które można byłoby umieścić na wymienionych podstronach, z których każda będzie wyszukiwać kolejno: koncerty, wernisaże oraz warsztaty.

Rozwiązanie

Z wykorzystaniem Vue.js stworzono wyszukiwarkę, która przeszukuje bazę danych według zadanego typu wydarzenia. Stworzono również paragraf Wyszukiwarka, w którym redaktor może wybrać typ wydarzenia (koncerty, wernisaże lub warsztaty) w dedykowanym do tego polu wyboru. Aplikację wyszukiwarki podpięto w paragrafie Wyszukiwarka. W typie zawartości Strona podstawowa dodano opcjonalną możliwość zamieszczenia paragrafu Wyszukiwarka.

Rezultat

Dzięki takiemu zabiegowi redaktor może umieścić wyszukiwarkę na dowolnej podstronie typu Strona podstawowa oraz ma możliwość wyboru typu wyszukiwania w wyszukiwarce. Na podstronie Koncerty umieszcza więc wyszukiwarkę, która przeszukuje koncerty, a na podstronie Wernisaże umieszcza wyszukiwarkę, która przeszukuje wernisaże. Uniknięto w ten sposób tworzenia trzech prawie identycznych wyszukiwarek (osobna dla każdego typu wydarzenia) i dano redaktorowi możliwość decydowania, czy i na jakiej podstronie chce umieszczać wyszukiwarkę. Redaktor może umieścić paragraf wyszukiwarki z dowolną konfiguracją na jakiejkolwiek podstronie typu Strona podstawowa oraz w dowolnym momencie może usunąć paragraf lub zmienić jego konfigurację.

Drupal Paragraphs – podsumowanie

Paragrafy to potężne narzędzie, które pozytywnie wpływa na doświadczenie tworzenia treści w Drupalu. Dostarcza wielu elastycznych rozwiązań, umożliwiających nieograniczone wręcz tworzenie treści. Z naszą instrukcją będzie to z pewnością łatwiejsze, szczególnie dla początkujących webmasterów.