Jak wyświetlić news'y na stronie startowej Joomla?

Design Cart News dla Joomla powstał z bardzo konkretnej potrzeby, którą przez lata widziałem w projektach opartych o Joomla – potrzeby wygodnego i powtarzalnego sposobu prezentowania treści bez dodatkowych opłat.

Zamiast kolejnego „jakoś działającego” rozwiązania lub ciężkiego kombajnu, chciałem stworzyć moduł, który daje pełną kontrolę nad tym, co i jak wyświetlamy, bez konieczności budowania wszystkiego od zera. To narzędzie, które łączy prostotę konfiguracji z realnymi możliwościami dopasowania do projektu – zarówno dla administratora, jak i wdrożeniowca.

Sprawdź ofertę tworzenia stron na Joomla!

 

Po co powstał Design Cart News

Przez lata pracy z Joomla zauważyłem, że przy tworzeniu sekcji aktualności, blogów czy poradników, wdrożeniowcy zawsze trafiają na ten sam mur: standardowe rozwiązania wymagają pisania widoków od zera albo wymuszają zgniły kompromis między „działa” a „wygląda tak, jak trzeba”.

W praktyce na rynku brakuje narzędzia, które jednocześnie:

• pozwala precyzyjnie wybrać kategorie źródłowe,

• posiada logiczne filtrowanie treści (np. tylko artykuły wyróżnione),

• zapewnia nowoczesny i responsywny układ grid,

• daje pełną kontrolę nad obrazem (pozycją, proporcjami i szerokością),

• oferuje realną zmianę stylu bez grzebania w plikach CSS szablonu.

Dodatkowym problemem jest fakt, że zaawansowane moduły są zazwyczaj drogie, a te darmowe rzadko działają tak, jakby się tego oczekiwało.

Właśnie dlatego stworzyłem Design Cart News 💡. Chciałem modułu, który wypełnia tę lukę – jest darmowy, a przy tym praktyczny dla administratora, przewidywalny dla wdrożeniowca i atrakcyjny dla użytkownika. Zależało mi, aby panel konfiguracji był prosty, ale oferował profesjonalny poziom personalizacji bez zbędnych kosztów i technicznych barier.

 

 

Filozofia modułu: szybki efekt, pełna kontrola

Kiedy projektowałem ten moduł, przyjąłem zasadę: „maksimum efektu przy minimum kliknięć” ⚙️. Dlatego konfigurację podzieliłem na dwie zakładki:

• Ogólne – decyduję, co ma się wyświetlać i w jakim układzie.
• Wygląd – decyduję, jak to ma wyglądać wizualnie.

Dzięki temu nawet osoba, która nie pisze kodu, może uruchomić moduł i dopasować go do identyfikacji wizualnej strony. A jeśli ktoś jest bardziej techniczny, nadal dostaje czysty, przewidywalny HTML i CSS.

 

Pobieranie i instalacja modułu krok po kroku

Moduł możesz pobrać z naszej strony:

lub z GitHub:

 

Instalacja modułu w Joomla 6 jest prosta. Jeżeli masz już paczkę instalacyjną modułu ZIP, wykonaj:

1. Zaloguj się do panelu administratora Joomla.
2. Przejdź do System → Rozszerzenia → Instalacja.
3. Wgraj paczkę ZIP modułu mod_dc_news.
4. Po poprawnej instalacji przejdź do Zawartość → Moduły witryny.
5. Utwórz nowy moduł typu Design Cart News lub edytuj istniejący.
6. Przypisz pozycję modułu w szablonie i menu, gdzie ma być widoczny.
7. Zapisz i opublikuj moduł.

To wszystko. Od tej chwili moduł może prezentować treści na froncie. Potem zostaje już tylko konfiguracja pod Twoje potrzeby.

 

 

Co moduł potrafi – najważniejsze możliwości

Design Cart News został przygotowany jako moduł do wyświetlania najnowszych artykułów z komponentu treści Joomla. Poniżej najważniejsze funkcje, które wykorzystuję najczęściej:

• Pobieranie artykułów z wybranych kategorii.
• Opcja wyświetlania tylko artykułów wyróżnionych.
• Limity liczby artykułów pobieranych z bazy.
• Elastyczny układ siatki (liczba kolumn).
• Przełączanie pozycji obrazu: góra lub lewa strona.
• Konfiguracja szerokości kontenera obrazu (wartość + jednostka px/%).
• Różne proporcje i kształt obrazu, w tym koło 1:1.
• Włączanie/wyłączanie elementów: tytuł, intro, tagi, obraz, button „więcej”.
• Pełna personalizacja typografii i kolorystyki dla tytułu, intro, tagów i przycisku.
• Konfigurowalne tło pojedynczej karty artykułu.
• Wybór znacznika nagłówka artykułu od H1 do H6.

 

 

Zakładka „Ogólne” – co dokładnie mogę ustawić

Zakładka Ogólne odpowiada za logikę wyświetlania treści. To tutaj definiuję, jakie artykuły mają wejść na listę i jak ma zachowywać się układ.

 

1) Kategorie źródłowe

Mogę wskazać jedną lub wiele kategorii artykułów. Dzięki temu moduł nie musi pokazywać wszystkiego z całego serwisu. Na przykład na stronie głównej mogę pokazać tylko „Aktualności” i „Komunikaty”, a na podstronie bloga tylko „Poradniki”.

 

2) Tylko artykuły wyróżnione

Jednym kliknięciem zawężam wynik do artykułów oznaczonych jako wyróżnione. Ta funkcja przydaje się, gdy chcę utrzymać wysoką jakość sekcji „Top news” lub „Polecane”.

 

3) Liczba artykułów

Ustawiam, ile najnowszych wpisów ma zostać pobranych. Moduł zawsze opiera się o najnowsze treści, więc sekcja aktualizuje się naturalnie wraz z publikacją nowych materiałów.

 

4) Widoczność elementów

Mogę niezależnie decydować, czy pokazywać:

• tytuł artykułu,
• tekst intro,
• tagi,
• obraz,
• przycisk „więcej”.

To bardzo ważne, bo różne sekcje strony potrzebują innego poziomu szczegółowości. Czasem wystarczy sam tytuł i miniatura, a czasem chcę dodać intro i tagi dla lepszej orientacji użytkownika.

 

5) Treść przycisku „więcej”

Tekst przycisku mogę ustawić samodzielnie, np. „Czytaj więcej”, „Zobacz artykuł”, „Przejdź do wpisu”. Dzięki temu język CTA dopasowuję do stylu komunikacji marki.

 

6) Pozycja obrazu

Wybieram pozycję obrazu:

• góra – klasyczny układ „karta newsowa”,
• lewa strona – bardziej magazynowy, świetny dla list artykułów.

Przy pozycji „lewa strona” dobrze działa dodatkowe ustawienie szerokości kontenera obrazu.

 

7) Szerokość kontenera obrazu (wartość + jednostka)

To jedna z bardziej praktycznych opcji 🎯. Mogę wpisać liczbę i wybrać jednostkę:

• % – gdy chcę responsywnych proporcji względem karty,
• px – gdy potrzebuję stałej szerokości niezależnej od kontenera.

Przykłady:

• 35% – subtelna miniatura po lewej, więcej miejsca na treść.
• 45% – mocniejszy akcent graficzny.
• 280px – stały blok obrazu przy listingu desktopowym.

 

8) Grid – liczba kolumn

Ustawiam ilość kolumn, np. 2, 3 lub 4. To pozwala dopasować sekcję do układu strony: szerokie strony główne dobrze wyglądają z 3–4 kolumnami, a węższe sekcje z 2.

 

9) Kształt/proporcje obrazu

Mogę wybrać:

• koło 1:1,
• 1:1, 1:2, 2:3, 1:3, 3:1, 3:2, 2:1.

Dzięki temu wizualnie spajam sekcję z charakterem strony. Dla bloga lifestyle często wybieram 3:2, dla katalogowych listingów 1:1, a dla formatów eksperckich czasem 2:1.

 

10) Rodzaj nagłówka artykułów (H1–H6)

Dodałem także wybór znacznika nagłówka od H1 do H6. To ważne nie tylko wizualnie, ale też semantycznie i SEO. Mogę dopasować hierarchię nagłówków do struktury konkretnej podstrony: zwykle dla modułów używam H2/H3, a H1 zostawiam dla głównego tytułu strony.

 

Zakładka „Wygląd” – pełna kontrola warstwy wizualnej

Druga zakładka to miejsce, gdzie dopasowuję moduł do brandingu. W praktyce mogę zbudować bardzo różne warianty designu bez tworzenia osobnych plików stylów.

 

1) Tło pojedynczego artykułu

Mogę ustawić kolor tła każdej karty artykułu. To drobna rzecz, ale ma ogromny wpływ na czytelność i kontrast. Na jasnych template sprawdza się biel lub bardzo jasny szary, a na ciemnych – przytłumione odcienie grafitu.

 

2) Styl nagłówka

Dla tytułu artykułu konfiguruję:

• kolor,
• rozmiar czcionki,
• grubość (200–900),
• uppercase (włącz/wyłącz).

To pozwala łatwo przechodzić między stylem minimalistycznym a bardziej „magazynowym”.

 

3) Styl intro

Dla intro mam analogiczne ustawienia: kolor, rozmiar, grubość i uppercase. Dzięki temu mogę subtelnie odróżnić opis od tytułu lub – przeciwnie – wzmocnić jego rolę.

 

4) Styl tagów

Tagi mają rozbudowaną konfigurację:

• kolor tekstu,
• kolor tła,
• kolor tekstu hover,
• kolor tła hover,
• rozmiar, grubość, uppercase.

To bardzo przydatne, jeśli tagi mają pełnić rolę dodatkowego wyróżnika kategorii tematycznych.

 

5) Styl przycisku „więcej”

Przycisk ma osobną konfigurację:

• kolor tekstu i tła,
• kolory hover,
• rozmiar i grubość fontu,
• uppercase.

Dzięki temu CTA mogę zrobić spokojne (neutralne) lub mocno akcentujące konwersję 🚀.

 

Jak wygląda przepływ danych w module

Od strony technicznej moduł pobiera treści z tabeli artykułów Joomla, filtruje je według ustawień, sprawdza uprawnienia dostępu i publikuje listę zgodnie z kolejnością od najnowszych. Dodatkowo, dla każdego wpisu pobieram tagi i dane obrazu (intro/fulltext).

Potem wszystkie parametry stylistyczne i układowe przekazuję do widoku frontowego, który renderuje karty artykułów. Dzięki temu logika i prezentacja pozostają czytelnie rozdzielone.

 

Praktyczne scenariusze użycia

Scenariusz A – „Aktualności firmowe”

Ustawiam 3 kolumny, obraz na górze, proporcję 3:2, widoczny tytuł i intro, bez tagów. Przycisk: „Czytaj dalej”. Tło kart jasne, delikatnie odcięte od tła strony. To uniwersalny układ dla większości stron firmowych.

 

Scenariusz B – „Blog ekspercki”

Obraz po lewej, szerokość np. 35%, tytuł H2/H3, intro włączone, tagi aktywne. Ten wariant dobrze prowadzi użytkownika przez dłuższą listę wpisów i daje dobry balans obrazu do tekstu.

 

Scenariusz C – „Polecane wpisy premium”

Włączam tylko artykuły wyróżnione, redukuję liczbę wpisów do 3–4, zwiększam rozmiar tytułu, mocniej styluję button i tagi. To dobry wariant dla sekcji o wysokim priorytecie biznesowym.

 

SEO i semantyka – dlaczego dodałem wybór H1–H6

Wiele osób patrzy na nagłówki tylko przez pryzmat wyglądu, a ja traktuję je też jako element porządku semantycznego. Jeżeli na stronie jest już główny H1, modułowe nagłówki mogę ustawić jako H2 albo H3. To porządkuje dokument, poprawia czytelność dla crawlerów i ułatwia pracę narzędziom dostępności.

Innymi słowy: ta opcja nie jest „gadżetem”. To świadome narzędzie do utrzymania poprawnej struktury treści.

 

Dlaczego w stylach stosuję !important

W normalnych warunkach staram się używać CSS bez agresywnych nadpisań. Jednak w świecie Joomla wiele template i frameworków ma własne reguły o bardzo wysokiej specyficzności. Efekt bywa taki, że administrator ustawia kolor lub rozmiar, ale na froncie „nic się nie dzieje”.

Dlatego w kluczowych miejscach modułu zastosowałem !important, żeby ustawienia z panelu administratora rzeczywiście były respektowane. Dla mnie to pragmatyczna decyzja: panel ma działać tak, jak obiecuje.

 

Najczęstsze błędy przy wdrożeniu i jak ich uniknąć

1. Brak widocznych zmian po konfiguracji
   Najczęściej winny jest cache Joomla lub cache przeglądarki. Po zmianach warto wykonać czyszczenie cache i twarde odświeżenie.
2. Niepoprawna pozycja modułu w szablonie
   Moduł może działać, ale nie być widoczny tam, gdzie trzeba. Sprawdź przypisanie pozycji i menu.
3. Pusta lista artykułów
   Zwykle problem to filtry: wybrane kategorie bez publikacji, włączone „tylko wyróżnione” bez wyróżnionych wpisów, albo ograniczenia dostępu.
4. Zbyt ciężki układ na mobile
   Warto zmniejszyć liczbę kolumn i dopasować proporcje obrazów do mniejszych ekranów.

 

Jak ja konfiguruję moduł na start (moja rekomendacja)

Jeśli nie wiesz od czego zacząć, polecam taki „bezpieczny preset”:

• 3 kolumny,
• obraz na górze, proporcja 3:2,
• tytuł + intro + button włączone, tagi opcjonalnie,
• H3 jako nagłówek artykułu,
• rozmiar tytułu 20–24 px, intro 14–16 px,
• button o wyraźnym kontraście, ale spójnym z brandem.

Potem dopiero szlifuję detale: szerokość obrazu przy układzie lewym, wagę fontu i hovery. Taka ścieżka daje szybki i przewidywalny efekt.

 

Dla kogo jest ten moduł

Design Cart News przygotowałem dla:

• firm, które chcą prowadzić sekcję aktualności bez budowy custom komponentu,
• agencji i freelancerów, którzy wdrażają Joomla i potrzebują powtarzalnego narzędzia,
• redakcji i blogów, które chcą szybko publikować treści w estetycznym układzie.

Jeżeli zależy Ci na praktycznym module „do roboty”, który można szybko ustawić i nie walczyć godzinami ze stylami, to właśnie taki był cel tego projektu.

 

Co dalej planuję rozwijać

Moduł już teraz jest mocny funkcjonalnie, ale stale myślę o kolejnych usprawnieniach 🔧:

• bardziej zaawansowane warianty układu (presety kart),
• dodatkowe opcje responsywne per breakpoint,
• bardziej szczegółowe sterowanie spacingiem i borderami,
• opcjonalne warianty animacji hover.

Rozwój zawsze prowadzę z myślą o realnych wdrożeniach i feedbacku od użytkowników. Jeśli coś ma sens biznesowy i poprawia codzienną pracę, chętnie to dodaję.

 

Podsumowanie

Tworząc Design Cart News, chciałem rozwiązać konkretny problem: jak w Joomla 6 pokazać artykuły nowocześnie, szybko i bez bólu konfiguracyjnego. Dzisiaj moduł pozwala mi:

• zarządzać źródłem treści i logiką wyświetlania,
• kontrolować układ kart i obrazów,
• precyzyjnie dopasować wygląd do identyfikacji strony,
• utrzymać semantyczną strukturę nagłówków,
• zachować skuteczność ustawień nawet przy „silnych” template.

Jeśli szukasz modułu, który nie tylko „wyświetla listę”, ale daje prawdziwą kontrolę nad prezentacją treści, to właśnie po to stworzyłem ten projekt ❤️.

Dziękuję za zaufanie i korzystanie z mojego modułu. Mam nadzieję, że pomoże Ci budować strony, które są jednocześnie estetyczne, czytelne i skuteczne.