DC Liquid Alerts dla Joomla 6 – Animowane Alerty, Których Nie Da Się Przeoczyć

Prowadzę serwisy oparte na Joomla od lat. Przez większość tego czasu robiłem to samo, co tysiące innych autorów treści: ważną informację — termin, ostrzeżenie, warunek promocji, zmianę regulaminu — wklejałem do artykułu jako akapit pogrubiony albo jako kolejny „alert Bootstrapa”. I przez większość tego czasu miałem nieprzyjemne wrażenie, że czytelnik i tak ją przeoczy.

Nie dlatego, że tekst był słaby. Dlatego, że wzrok już dawno nauczył się ignorować ten wzorzec.

Stąd powstał plugin DC Liquid Alerts (plg_content_dcalerts) — wtyczka do Joomla 6, która w treści artykułu zamienia prosty shortcode na animowany, wyrazisty komunikat z falującą obwódką. W tym artykule przedstawię Ci me najmłodsze dziecko w LAB, opiszę po co je stworzyłem, jaki problem rozwiązuje, czym różni się od „kolejnego alertu BS5” oraz jak z niego korzystać na co dzień.

Tu warto też zaznaczyć że jeśli nie jesteś biegły w Joomla możesz skorzystać z naszej pomocy:

1. Tworzenie stron WWW firmowych
2. Tworzenie stron internetowych Joomla

 

Dlaczego w ogóle powstał ten plugin

Pytanie: jak sprawić, by kluczowa informacja w długim tekście nie ginęła? Na blogach technicznych, w poradnikach, w artykułach dla klientów — mam sekcje, które są „do przeczytania”, i sekcje, które są „muszą zostać przeczytane”. Te drugie to zwykle:

• termin ważności oferty lub ceny,
• ostrzeżenie prawne lub techniczne (np. konieczność backupu przed aktualizacją),
• warunek, od którego zależy sens całego artykułu,
• informacja o zmianie procedury, API, cennika.

Przez lata stosowałem alerty Bootstrapa 5 — alert alert-warning i jego warianty. Są poprawne, dostępne, przewidywalne. Są też wszechobecne. Na każnej stronie dokumentacji, w każdym panelu admina, w każdym szablonie komercyjnym. Mózg użytkownika robi z nich szum: „to tylko kolejny żółty pasek”. Nie czyta — skanuje obok.

Chciałem czegoś, co:

• wygląda jak element premium, a nie jak fragment szablonu admina,
• delikatnie „żyje” na krawędzi — przyciąga wzrok bez krzykliwego migotania całego bloku,
• daje mi jeden, powtarzalny shortcode w edytorze, zamiast wklejania kilkunastu linii HTML,
• pozwala ustawić domyślny charakter alertów globalnie, a w pojedynczym artykule tylko nadpisać to, co trzeba.

Połączyłem dwa swoje wcześniejsze komponenty front-endowe: warstwę wizualną alertów (WOW Alerts) oraz animowaną, organiczną obwódkę (Liquid Border). Efekt jest spójny, rozpoznawalny i — co dla mnie najważniejsze — nie wygląda jak kolejna kopia Bootstrapa. Stąd nazwa „Liquid Alerts”: płynna granica, która sugeruje „tu jest coś istotnego”, zanim czytelnik przeczyta pierwsze słowo.

 

Jaki problem rozwiązuję

Problem : słaba widoczność informacji kluczowych. Nie chodzi o SEO ani o nagłówki H2. Chodzi o moment w środku artykułu, gdy czytelnik jest już zmęczony i skanuje tekst diagonalnie. Wtedy:

• pogrubienie w akapicie ginie wśród innych pogrubień,
• lista punktowana wygląda jak każda inna lista,
• standardowy alert BS5 jest poprawny, ale „wyblakły” semantycznie — widziany setki razy.

DC Liquid Alerts nie zastępuje dobrego pisania. Nie naprawi chaosu w strukturze artykułu. Ale daje mi narzędzie do wyróżnienia jednego, konkretnego komunikatu — tak, by trudniej było go pominąć wzrokiem. Animacja na obwodzie działa jak subtelna hipnoza peryferyjnego widzenia: coś się porusza, krawędź nie jest prostokątem, ikona i tytuł są duże i czytelne. To nie jest trik marketingowy — to świadoma decyzja projektowa: kosztem kilku kilobajtów CSS i JS kupuję attention na jednym fragmencie treści.

Plugin rozwiązuje też problem powtarzalności i utrzymania. Zamiast w każdym artykule wklejać ten sam blok HTML (który edytor WYSIWYG i tak rozlepi), wstawiam shortcode. Wygląd i zachowanie fal trzymam w konfiguracji wtyczki. Gdy kiedyś zmienię domyślną amplitudę czy motyw — zaktualizuje się cała witryna, o ile artykuły nie nadpisują parametrów lokalnie.

 

DC Liquid Alerts a alerty Bootstrap 5

Bootstrap 5 dostarcza komponent .alert — kolory semantyczne, ikonki z Font Awesome, dismiss button. To standard branży. I właśnie dlatego na stronach, które „robią wszystko poprawnie”, wszystkie wyglądają podobnie. Użytkownik końcowy nie myśli: „to alert ostrzegawczy”. Myśli: „to ten sam pasek co wczoraj”.

Porównanie traktuję pragmatycznie, nie jako „BS jest zły”:

• Bootstrap 5 — świetny do formularzy, paneli, powiadomień systemowych, UI aplikacji. Niski próg wejścia. Zero animacji obwódki. W artykule blogowym często zlewa się z szablonem.
• DC Liquid Alerts — celowo „redakcyjny”. Jeden shortcode, pięć typów semantycznych (success, error, warning, info, neutral), motyw jasny/ciemny, animowana krawędź. Nie udaje komponentu panelu administracyjnego — udaje redakcyjną ramę na myśl przewodnią.

Nie rezygnuję z BS w projektach — używam go tam, gdzie pasuje. Ale do „tego jednego akapitu, którego nie wolno przegapić” wybrałem własny plugin. Różnica jest jak między tabliczką „Uwaga ślisko” a podświetloną witryną sklepu: obie informują, tylko jedna została zaprojektowana, by zatrzymać krok.

 

Po co stosować takie alerty w artykułach

Używam ich oszczędnie — zwykle jeden, czasem dwa na długi tekst. Typowe scenariusze:

• Disclaimer lub ryzyko — zanim czytelnik skopiuje kod, który może uszkodzić produkcję.
• Oferta czasowa — data końca promocji, warunek „tylko dla nowych kont”.
• Zmiana w ekosystemie — „od wersji X procedura wygląda inaczej”; reszta artykułu opisuje szczegóły.
• Podsumowanie decyzji — „jeśli masz tylko minutę, przeczytaj ten blok”.
• Instrukcja krytyczna — jeden krok, którego pominięcie psuje cały proces.

Nie zastępują tym samym dobrego leadu ani spisu treści. Uzupełniają je w miejscu, gdzie czytelnik już wszedł w temat i mógłby „przeskoczyć” akapit. Animacja fal nie jest tam po to, by bawić — jest sygnałem: granica treści jest inna niż zwykle.

 

Co to jest technicznie

DC Liquid Alerts to wtyczka typu content dla Joomla 6. Działa w artykułach (com_content) na froncie witryny. W treści wstawiasz shortcode {dc-alerts} … {/dc-alerts} (albo wariant samozamykający). Wtyczka podmienia go na semantyczny HTML z klasami WOW Alerts, ładuje style i skrypty z katalogu pluginu (plugins/content/dcalerts/assets/) oraz inicjuje Liquid Border na elemencie alertu.

Assety nie muszą lądować w globalnym /media/ Joomla — trzymam je przy wtyczce, co ułatwia przenoszenie i wersjonowanie. Krótko: jeden ZIP, jedna wtyczka, przewidywalna ścieżka.

 

Instalacja i włączenie

Instalacja jest standardowa dla Joomla: pakiet plg_content_dcalerts.zip, Instalator rozszerzeń, następnie System → Zarządzanie → Wtyczki, wyszukanie „DC Liquid Alerts” i włączenie. Po aktualizacji warto wyczyścić cache witryny. Jeśli fale się nie animują, w zakładce Zaawansowane włącz „Załaduj jQuery” — Liquid Border opiera się na jQuery; wiele szablonów je ma, ale nie wszystkie.

 

Konfiguracja wtyczki — co ustawiam globalnie

W panelu wtyczki mam trzy logiczne grupy ustawień. To one definiują „domyślny charakter” alertów na całej stronie. Każdy shortcode może je nadpisać atrybutami — o tym za chwilę.

 

Zakładka Wygląd

• Domyślny motyw — light lub dark. Jasny sprawdza się na jasnych szablonach blogowych; ciemny na hero sekcjach i ciemnych tłach.
• Domyślny typ — success, error, warning, info, neutral. Semantyka kolorów i ikon; w artykule zmieniam tylko tam, gdzie komunikat tego wymaga.
• Kompaktowy układ — mniejsza ikona i padding; używam rzadko, gdy alert ma być krótką przypisówką bez przycisku zamykania.
• Przycisk zamykania — domyślnie włączony; czytelnik może odłożyć komunikat, ale najpierw musiał go zobaczyć.

Zakładka Fale (Liquid Border)

To serce „hipnotyzującej” obwódki. Parametry odpowiadają temu, co w laboratorium testowałem suwakami:

• Amplituda (2–12 px) — wysokość fali. Większa = wyraźniejsza, ale wymaga więcej oddechu w layoutcie.
• Częstotliwość (2–6) — ile „grzbietów” na dłuższej krawędzi.
• Prędkość (0,2–4) — tempo animacji. Trzymam umiarkowanie; zbyt szybko męczy.
• Fale organiczne — włączone domyślnie; każdy grzbiet delikatnie „oddycha”, zamiast machać jak sinusoida z laboratorium.
• Intensywność organiczna (0–1) — jak mocno poszczególne grzbiety mogą się różnić od siebie.
• Tylko góra i dół — boki proste; na szerokich alertach w artykule wygląda to czytelniej niż fala na czterech krawędziach.
• Padding treści — dodatkowy odstęp wewnętrzny poza falą; pomaga, by przycisk × nie wychodził poza obrys (lesson learned przy integracji).

 

Zakładka Zaawansowane

• Załaduj jQuery — włącz, jeśli szablon nie dostarcza jQuery na froncie. Wyłącz tylko wtedy, gdy wiesz, że jest już załadowane — unikasz podwójnego ładowania.

W zakładce Dokumentacja w panelu wtyczki mam ściągę shortcode — wygodne dla redakcji, ale do artykułu na blog nie kopiuję stamtąd shortcode w bloku kodu; patrz sekcja poniżej.

 

Shortcode — składnia

Podstawowa forma to para tagów. Atrybuty w pierwszym tagu są opcjonalne; treść między tagami może zawierać prosty HTML (np. strong). W każdym przykładzie poniżej najpierw pokazuję kod (nie renderuje się), a zaraz pod spodem ten sam shortcode na żywo — tak jak w normalnym akapicie artykułu.

 

Galeria: pięć typów semantycznych (motyw dark)

Motyw theme="dark" sprawdza się na jasnych szablonach blogowych i w sekcjach z białym tłem — kontrast jest mocny, a fala na obwódce dobrze „trzyma” wzrok. Poniżej wszystkie typy type, które obsługuje plugin.

Info (informacja)

{dc-alerts title="Informacja" type="info" theme="dark"}
Nowa wersja dokumentacji jest dostępna — odśwież zakładkę z cache przeglądarki wyłączonym.
{/dc-alerts}

Efekt:

 

 

 

Success (sukces)

{dc-alerts title="Sukces" type="success" theme="dark"}
Płatność została przyjęta. Potwierdzenie wysłaliśmy na adres Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript..
{/dc-alerts}

Efekt:

 

 

 

Warning (ostrzeżenie)

{dc-alerts title="Ostrzeżenie" type="warning" theme="dark"}
Twoja sesja wygaśnie za 2 minuty. Zapisz zmiany przed opuszczeniem strony.
{/dc-alerts}

Efekt:

 

 

 

Error (błąd)

{dc-alerts title="Błąd" type="error" theme="dark"}
Nie udało się zapisać formularza. Sprawdź połączenie z siecią i spróbuj ponownie.
{/dc-alerts}

Efekt:

 

 

 

Neutral (neutralny)

{dc-alerts title="Neutralny" type="neutral" theme="dark"}
Planowana konserwacja serwisu: niedziela, 02:00–04:00. Krótkie przerwy w dostępie są możliwe.
{/dc-alerts}

Efekt:

 

 

 

Galeria: motyw light

Motyw theme="light" ma jaśniejsze, pastele tła i ciemniejszy tekst — dobrze wygląda w artykułach na ciemnym tle sekcji albo w szablonach z mocnym kontrastem odwróconym. Te same typy semantyczne, inna paleta:

 

Info — light

{dc-alerts title="Informacja" type="info" theme="light"}
Komentarz redakcyjny: ten akapit możesz bezpiecznie pominąć, jeśli znasz już podstawy Joomla.
{/dc-alerts}

Efekt:

 

 

 

Success — light

{dc-alerts title="Sukces" type="success" theme="light"}
Ustawienia profilu zostały zapisane. Zmiany są widoczne po odświeżeniu strony.
{/dc-alerts}

Efekt:

 

 

 

Warning — light

{dc-alerts title="Ostrzeżenie" type="warning" theme="light"}
Ta procedura modyfikuje tabele w bazie danych. Wykonaj kopię zapasową przed kontynuacją.
{/dc-alerts}

Efekt:

 

 

 

Error — light

{dc-alerts title="Błąd" type="error" theme="light"}
Import pliku CSV przerwany w wierszu 124. Popraw format kolumny „email” i wgraj plik ponownie.
{/dc-alerts}

Efekt:

 

Neutral — light

{dc-alerts title="Neutralny" type="neutral" theme="light"}
Ten artykuł odnosi się do Joomla 6. Na Joomla 5.x część kroków może wyglądać inaczej.
{/dc-alerts}

Efekt:

 

 

 

Wariant kompaktowy

Atrybut compact="1" zmniejsza ikonę i padding; domyślnie nie pokazuje przycisku zamykania (zgodnie z logiką kompaktowego układu w CSS). Używam go do krótkich przypisów:

{dc-alerts title="Zapisano" type="success" theme="light" compact="1"}
Profil zaktualizowany.
{/dc-alerts}

Efekt:

 

 

 

W codziennej pracy nie nadużywam takich nadpisań — spójność fal na całym serwisie jest częścią „tożsamości” komunikatów. Ale opcja jest i warto o niej wiedzieć.

 

Dostępne atrybuty shortcode

• title — tytuł alertu,
• type — success, error, warning, info, neutral,
• theme — light lub dark,
• compact — 0 lub 1,
• close (aliasy: dismissible, dismiss) — 0 lub 1,
• amplitude, frequency, speed,
• organic, organic_intensity (lub organic-intensity),
• horizontal_only, content_padding.

Brak atrybutu oznacza: weź wartość z konfiguracji wtyczki. To oszczędza powtarzanie i utrzymuje spójność wizualną serwisu.

 

Dobre praktyki, których sam przestrzegam

• Mniej znaczy więcej — w zwykłym artykule jeden mocny alert wystarczy; ten wpis ma ich wiele celowo, żeby pokazać galerię typów i motywów.
• Dopasuj type do treści — nie oznaczaj wszystkiego jako warning; czytelnik przestanie wierzyć w semantykę.
• Nie chowaj krytycznej informacji tylko w alercie — alert ma wspierać tekst, nie zastępować sensu artykułu.
• Sprawdzaj na froncie — podgląd w administracji nie zastąpi widoku w szablonie; cache Joomla potrafi pokazać starą wersję.
• Przykłady składni w

   — tam shortcode zostaje kodem; w zwykłej treści działa.

• Szanuj ruch — przy prefers-reduced-motion animacje w WOW Alerts są ograniczane; to dobra praktyka dostępności, której nie chcę omijać.

 

Jak to wygląda „pod maską” — bez magii, za to z metodą

Dla osób technicznych krótko: warstwa wizualna to zestaw klas WOW Alerts (ikona SVG, tytuł, treść, opcjonalny przycisk ×, motywy jasny i ciemny). Obwódka to Liquid Border — skrypt oparty o jQuery, który generuje ścieżkę SVG i nakłada clip-path na element alertu. Wtyczka wstrzykuje konfigurację fal jako atrybut data-la-config w HTML, a skrypt inicjujący uruchamia animację po załadowaniu strony.

Shortcode parsuję regexem w PHP podczas zdarzenia onContentPrepare — standardowego punktu Joomla, w którym inne wtyczki content też przetwarzają treść. Bloki pre wyciągam z przetwarzania przed podmianą i przywracam po niej, żeby przykłady kodu w poradnikach nie zamieniały się przypadkiem w żywe alerty. To była świadoma decyzja po pierwszych testach redakcyjnych: dokumentacja wtyczki i artykuł instruktażowy muszą móc pokazać „surowy” shortcode obok działającego efektu.

Style i skrypty ładuję z katalogu plugins/content/dcalerts/assets/, nie z globalnego media/ Joomla. Ułatwia mi to paczkowanie, wersjonowanie i przenoszenie między instalacjami — jeden katalog wtyczki, jedna odpowiedzialność za front.

 

Gdzie pobrać DC Liquid Alerts?

Jak zawsze plugin możesz pobrać z naszej strony firmowej za pomocą poniższego linka:

1

DC Liquid Alerts możesz również pobrać z Github:

 

Pytania, które zwykle padają

Czy mogę wstawić kilka alertów w jednym artykule? Tak. Każdy shortcode renderuje się osobno. Nadal jednak radzę z umiarem — dwa mocne komunikaty obok siebie konkurują o uwagę tak samo jak trzy żółte paski BS5.

Czy działa w module Custom HTML? Obecnie skupiam się na artykułach com_content. Moduły to naturalny kierunek rozszerzenia, ale blog i baza wiedzy to mój główny use case.

Czy czytelnik może wyłączyć animację? W CSS WOW Alerts respektuję prefers-reduced-motion — animacje wejścia i tła są wtedy ograniczone. Sam alert pozostaje w pełni czytelny.

Czy to zastępuje cookie bar albo komunikaty RODO? Nie. To narzędzie redakcyjne w treści, nie system zgód. Do RODO używam dedykowanych rozwiązań; do „przeczytaj to przed dalszą lekturą” — DC Liquid Alerts.

 

Ograniczenia

Plugin nie jest modułem pozycji — działa w treści artykułów przez shortcode. Nie renderuje alertów w podglądzie administracji tak jak na froncie. Wymaga Joomla 6 i świadomego użycia — to narzędzie autora, nie magiczny przycisk „zrób ładnie całą stronę”.

Jeśli szablon nie ładuje jQuery i wyłączysz opcję ładowania w wtyczce, fale mogą nie ruszyć — alert nadal będzie czytelny statycznie, ale stracisz część „hipnotyzującej” obwódki. Warto to sprawdzić po wdrożeniu.

 

Podsumowanie

DC Liquid Alerts powstał z bardzo konkretnej frustracji redakcyjnej: mam coś ważnego do powiedzenia w środku długiego tekstu i nie chcę walczyć o uwagę standardowym, wypalonym komponentem. Łączy czytelny komunikat (typ, tytuł, treść, zamknięcie) z animowaną, organiczną granicą, która nie wygląda jak kolejny alert Bootstrapa.

Jeśli prowadzisz Joomla 6 i publikujesz treści, w których jedna informacja musi zostać zauważona — termin, ryzyko, warunek, podsumowanie — shortcode {dc-alerts} daje Ci to w jednej linii składni, z pełną kontrolą w panelu wtyczki i z możliwością pokazania czytelnikom przykładu kodu w tagach pre, nie psując żywego alertu niżej na stronie.

To nie jest rozwiązanie dla każdego akapitu. Jest narzędziem na momenty, gdy przeoczenie komunikatu kosztuje czytelnika czas, pieniądze albo spokój — a mnie reputację za jakość porady. Właśnie dlatego go napisałem i właśnie dlatego z niego korzystam we własnych artykułach. 📌