Zarządzanie układem strony

O ile wszelkie zmiany treści dokonywane przez Redaktorów (np. za pomocą opcji Zarządzaj elementem → Edytuj) odbywają się w centralnej części strony w ramach bloku Treść i są do tego aspektu ograniczone, tak zmiana układu strony stanowi edycję na poziomie nadrzędnym wobec czynności redaktorskich. Zarządzanie układem pozwala bowiem na modyfikację sposobu organizacji treści na stronie internetowej w ramach CMS Drupal. W ten sposób można uzyskać odmienny wygląd strony niż domyślny.

Modyfikacji układu przeprowadzanego na poziomie roli Super Redaktora nie należy zatem mylić z edycją treści dokonywaną przez Redaktora.

Włączenie trybu edycji układu

Dla każdej (pod)strony, do której użytkownik posiada uprawnienia, ustalić można indywidualny układ treści. Aby przejść do trybu edycji układu, będąc na danej stronie kliknij na: Zarządzaj elementem → Układ.

Dzięki temu wyświetlony zostanie widok zarządzania układem.

Sposób pracy z układem strony

W górnej części widoku zarządzania układem dostępne są trzy przyciski:

  • Zapisz szablon - służy do zapisania zmian wprowadzonych w układzie

  • Porzuć zmiany - służy do anulowania (porzucenia) zmian naniesionych w układzie

  • Przywróć do stanu domyślnego - służy do awaryjnego przywracania układu strony (usuwane są bloki niestandardowe, zwłaszcza bloki z prawej kolumny), treść wprowadzona przez Redaktora w standardowym bloku Treść (zwykle w centralnej części) nie zostanie usunięta. Opcja służy głównie centralnym administratorom CMS-a (wybranym pracownikom CUI PG) i może nie funkcjonować na poziomie roli Super Redaktor.

W głównej części tego widoku odbywa się zarządzanie układem strony za pomocą następującej koncepcji:

  1. Cała przestrzeń wybranej strony podzielona jest na umowne sekcje, których na stronie może być wiele. Sekcje pełnią rolę „rusztowania” dla treści strony.

  2. Sekcje są miejscem przechowywania bloków funkcjonalnych, które realizują konkretne zadania. Na przykład domyślnie wbudowany blok Treść wyświetla zawartość redagowaną na poziomie Redaktora, blok Microsite Menu wyświetla nawigację boczną strony, zaś przeznaczeniem bloku Photo gallery jest wyświetlanie galerii grafik umieszczonych we wskazanej lokalizacji menedżera mediów files.pg.edu.pl. Każdy rodzaj bloku realizuje odrębne, z góry określone zadanie. Katalog dostępnych bloków jest wyświetlany w momencie dodawania nowego bloku w układzie.

  3. Jedna sekcja może przechowywać wiele bloków.

  4. Każdy blok funkcjonalny może istnieć wyłącznie w ramach sekcji (nie istnieją bloki, które można umieścić poza siatką sekcji).

  5. Bloki można przemieszczać pomiędzy sekcjami, na przykład wyżej lub niżej albo do kolumny bocznej (jeżeli taka jest dostępna w siatce sekcji).

  6. Zgodnie z szablonem przewidzianym dla CMS-a, istnieją trzy z góry określone rodzaje sekcji:

    1. PG - 2 kolumny - domyślna dla każdej podstrony

    2. PG - Strona główna - 1 kolumna bez ograniczenia szerokości - 100% fluid

    3. PG - 1 kolumna - z ograniczeniem szerokości

      Poszczególne sekcje różnią się budową: (a) składa się z dwóch kolumn: szerokiej lewej (przeznaczonej zwykle do przechowywania głównej treści strony) i wąskiej prawej (zwykle przeznaczonej na potrzeby nawigacji bocznej). Jest domyślnie stosowana na stronach.
      Sekcja (b) posiada możliwość wyświetlania barwnego tła na pełną dostępną szerokość bez ograniczeń, tj. od lewej krawędzi ekranu do prawej krawędzi ekranu - zwykle przeznaczona jest dla stron reprezentacyjnych (głównych).
      Z kolei sekcja (c) stosowana jest zwykle na podstronach i umożliwia wyświetlanie treści na 100% dostępnej szerokości zgodnie z szablonem (czyli włączając to marginesy boczne). Często stosowana w przypadku rezygnacji z wyświetlania nawigacji bocznej.

  7. Na stronie można umieszczać wyłącznie wyżej przewidziane sekcje i nie można definiować własnych rodzajów sekcji.

  8. Bloki osadzone w sekcjach dostosowują się do nich dynamicznie, m.in. swoją szerokością i wysokością.

Zarządzanie układem strony polega więc dodawaniu/usuwaniu sekcji określonego rodzaju oraz na rozmieszczeniu w tych sekcjach odpowiednich bloków dostępnych w CMS-ie. Dobór sekcji oraz bloków funkcyjnych zależy od przeznaczenia konkretnej strony.

Przykład układu

W celu lepszego zrozumienia ww. koncepcji posłużymy się przykładem układu.

Na ilustracji przedstawione są dwie sekcje:

  • górna sekcja o nazwie Sekcja 1 typu PG - 2 kolumny - domyślna dla każdej podstrony - przechowująca dwa bloki:

    • Treść (to właśnie w tym bloku mieści się cała treść strony, jaką na swoim poziomie redagują Redaktorzy) - blok osadzony jest w lewej szerokiej kolumnie tej sekcji

    • Microsite Menu (ten blok automatycznie wyświetla nawigację boczną, zgodnie z kontekstem strony) - blok osadzony jest w prawej wąskiej kolumnie tej sekcji

  • dolna sekcja o nazwie Sekcja 2 typu PG - 1 kolumna - z ograniczeniem szerokości - przechowująca jeden blok z galerią zdjęć.

Korzystając z możliwości zarządzania układem, można na przykład usunąć domyślny blok Treść, a na jego miejsce przesunąć blok z galerią zdjęć. Można również zamienić oba bloki miejscami. Ponadto można usunąć całą sekcję (wraz z osadzonymi tam blokami): na przykład po usunięciu górnej sekcji z menu bocznym na stronie pozostanie wyłącznie jedna sekcja z blokiem galerii, która będzie wyświetlana na 100% dostępnej szerokości strony.

Poniżej opisano sposób przeprowadzania konkretnych czynności w układzie strony.

Dodawanie i usuwanie sekcji

Zarówno nad sekcją, jak i pod każdą z sekcji wyświetlane są dodatkowe wiersze z szarym tłem oraz z opisem + Add section, tak jak na ilustracji.

Zależnie od tego, czy chcesz dodać nową sekcję wyżej lub niżej względem istniejącej sekcji, kliknij na opcję Add section w odpowiednim miejscu. Wyświetlona zostanie szara kolumna z listą typów dostępnych sekcji:

  • PG - 2 kolumny - domyślna dla każdej podstrony - sekcja stosowana na większości podstron, składa się dwóch kolumn: szerokiej lewej (przeznaczonej zwykle do przechowywania głównej treści strony) i wąskiej prawej (zwykle przeznaczonej na potrzeby nawigacji bocznej). Sekcja ta jest domyślnie wbudowana w układzie stron (o ile nie zostanie świadomie usunięta).

  • PG - Strona główna - 1 kolumna bez ograniczenia szerokości - 100% fluid - sekcja stosowana wyłącznie dla stron reprezentacyjnych (głównych), posiada możliwość wyświetlania barwnego tła na pełną dostępną szerokość bez ograniczeń, tj. od lewej krawędzi ekranu do prawej krawędzi ekranu.

  • PG - 1 kolumna - z ograniczeniem szerokości - sekcja stosowana uzupełniająco na podstronach, składa się z jednej kolumny, w której można wyświetlić treść na 100% dostępnej szerokości zgodnie z szablonem (czyli włączając to marginesy boczne); często używana razem sekcją 2-kolumnową



Wybierz rodzaj dodawanej sekcji, klikając na dany typ sekcji. Następnie wyświetlona zostanie możliwość nadania własnej etykiety (umownej nazwy) dla nowo dodawanej sekcji. Nadanie etykiety nie jest obowiązkowe, choć jest zalecane ze względów praktycznych. Etykiety przypisywane sekcjom stanowią wsparcie w przypadku przenoszenia bloków pomiędzy sekcjami. Dobrą praktyką jest stosowanie nazw (etykiet) związanych z funkcjonalnym przeznaczeniem danej sekcji, na przykład: Slider, Kafle dolne, Galeria i tym podobne. 

Sekcja zostanie umieszczona w układzie. Dysponując sekcją, możesz następnie osadzić w niej blok/bloki w celu wyświetlenia treści tekstowej, galerii, listy aktualności itp.



W celu usunięcia sekcji wykonaj następujące czynności:

  1. W obszarze ustalonej sekcji zlokalizuj opcję Configure (nazwa sekcji). Na samą opcję nie klikaj.

  2. Kliknij na ikonę szarego krzyżyka umieszczonego w okręgu - na lewo od powyższej opcji, tak jak pokazano na ilustracji.

  3. Po prawej stronie wyświetlona zostanie szara kolumna z zapytaniem potwierdzenia usunięcia sekcji.

  4. Kliknij na przycisk Usuń. Sekcja zostanie usunięta (włącznie z blokami, które są w niej umieszczone).

Operacji usunięcia sekcji nie można cofnąć.

Nadanie lub zmiana etykiety (nazwy) sekcji

Jak już wspomniano, nadanie etykiety nie jest obowiązkowe, choć jest zalecane ze względów praktycznych. Etykiety przypisywane sekcjom stanowią wsparcie w przypadku przenoszenia bloków pomiędzy sekcjami. Dobrą praktyką jest stosowanie nazw (etykiet) związanych z funkcjonalnym przeznaczeniem danej sekcji, na przykład: Slider, Kafle dolne, Galeria i tym podobne. 

W celu nadania nazwy danej sekcji wykonaj następujące czynności:

  1. W obszarze ustalonej sekcji zlokalizuj opcję Configure (nazwa sekcji) i kliknij na nią. Nie klikaj natomiast na ikonę szarego krzyżyka umieszczonego w okręgu (na lewo od powyższej opcji) - służy ona do usuwania sekcji.

  2. Wyświetlona zostanie szara kolumna z polem tekstowym służącym do nadania lub zmiany etykiety.

  3. Potwierdź zmiany za pomocą przycisku Aktualizuj.

Dodawanie bloku funkcyjnego - w obszarze sekcji

W obszarze każdej istniejącej sekcji dostępne są opcje + Add block o jasnoniebieskim tle. Zależnie od podziału na kolumny, który obowiązuje w danej sekcji, wyświetlana będzie jedna lub dwie kolumny z opcjami + Add block.

Kliknięcie na konkretnej opcji + Add block spowoduje wyświetlenie katalogu dostępnych bloków funkcyjnych z możliwością wyszukiwania bloku po nazwie. Dla potrzeb szablonu stosowanego na Uczelni, opracowane są następujące bloki funkcjonalne:


  • Aktualności Witryny (Lista) - blok wyświetlający automatycznie listę wpisów typu Artykuł w kontekście danej mikrowitryny i jej wersji językowej; opcjonalnie lista może być zawężona wg tagów i/lub przypisania Artykułów do danej mikrowitryny

  • Aktualności Witryny (Karty - Białe tło) - blok wyświetlający wiersz (rząd) lub kilka wierszy klikalnych kart z opisem i grafikami (popularnie nazywanych „kafelkami”) - na podstawie wpisów typu Artykuł w kontekście danej mikrowitryny, wizualnie stosowane jest białe tło

  • Aktualności Witryny (Karty - Szare tło) - blok wyświetlający wiersz (rząd) lub kilka wierszy klikalnych kart z opisem i grafikami (popularnie nazywanych „kafelkami”) - na podstawie wpisów typu Artykuł w kontekście danej mikrowitryny, wizualnie stosowane jest szare tło

  • Aktualności Witryny (Prawa kolumna) - blok wyświetlający automatycznie listę wpisów typu Artykuł w kontekście danej mikrowitryny i jej wersji językowej - przeznaczony wyłącznie do osadzania w prawej wąskiej kolumnie w ramach układu

  • Directory listing - blok automatycznie wyświetlający listę plików (opcjonalnie wraz z podkatalogami) we wskazanej ścieżki menadżera mediów files.pg.edu.pl

  • Karta z licznikiem czasu - blok służący do automatycznego odliczania czasu do określonego wydarzenia, akcji

  • Karta z licznikiem dziennego przyrostu - blok o charakterze marketingowym służący do wyświetlania umownego przyrostu danej określonej wielkości

  • Karty w rzędzie - blok wyświetlający wiersz (rząd) lub kilka wierszy klikalnych kart z opisem i grafikami (popularnie nazywanych „kafelkami”)

  • Kalendarium - blok wyświetlający siatkę kalendarza wraz z opisem najbliższego/ostatniego wydarzenia - w kontekście wpisów typu Wydarzenia w danej mikrowitrynie

  • Lista pracowników - blok automatycznie wyświetlający listę pracowników (osób mających umowy o pracę z PG) dla wskazanej jednostki organizacyjnej Uczelni na podstawie informacji z portalu Moja PG

  • Metryczka - wyświetla informacje o autorze treści oraz datach utworzenia, modyfikacji itp.

  • Microsite Menu - blok automatycznie wyświetlający nawigację boczną zgodnie z kontekstem danej mikrowitryny lub (pod)strony 

  • MOST Wiedzy - blok wyświetlający automatyczną listę rekordów danego typu wg danych zawartych w portalu MOST Wiedzy

  • Multiwyszukiwarka BPG - blok dedykowany dla potrzeb witryny Biblioteki PG

  • Photo gallery - blok automatycznie wyświetlający galerię z grafikami (wykaz miniatur tych grafik) na podstawie zawartości wskazanego katalogu zawierającego te grafiki - w ramach menadżera mediów files.pg.edu.pl

  • Promowane Aktualności (Lista) - blok wyświetlający automatycznie listę wpisów typu Artykuł w kontekście danej mikrowitryny i jej wersji językowej, jednocześnie oznaczonych jako promowane

  • Promowane Aktualności (Kafelki) - blok wyświetlający cztery „kafelki” na podstawie wpisów typu Artykuł w kontekście danej mikrowitryny i jej wersji językowej, jednocześnie oznaczonych jako promowane (blok stosowany wyłącznie na reprezentacyjnych stronach frontowych)

  • Promowane Aktualności (Prawa kolumna) - blok wyświetlający automatycznie listę wpisów typu Artykuł w kontekście danej mikrowitryny i jej wersji językowej, jednocześnie oznaczonych jako promowane - przeznaczony wyłącznie do osadzania w prawej wąskiej kolumnie w ramach układu

  • Treść - blok przechowujący treść danej strony redagowaną w wizualnym edytorze treści na poziomie roli Redaktor


W układzie należy umieszczać wyłącznie wyżej wymienione bloki przewidziane dla potrzeb PG.

Pozostałe bloki w katalogu wynikają z potrzeb technicznych CMS-a, bądź stanowią rozwiązania oryginalnie wbudowane w CMS-a (które mogą być nieprzystosowane do szablonu Uczelni i sposobu wykorzystywania CMS-a na PG). Nie należy ich zatem wykorzystywać w układzie.

Wyszukaj interesujący blok funkcyjny i wybierz go, klikając na nazwę bloku. Następnie wyświetlone zostanie okno z konfiguracją dodawanego bloku. W większości wypadków zaleca się wyłączyć opcję Wyświetlana nazwa - ze względów estetycznych.

Finalnie wstawienie bloku należy potwierdzić przyciskiem Dodaj blok. Chcąc mieć pewność, że dodany blok został na stałe wpisany do układu, zapisz zmiany w układzie za pomocą przycisku Zapisz szablon dostępnego w górnej części widoku układu.

Wyjaśnienie

Dodawany w układzie blok funkcjonalny zwykle nie jest prezentowany w pełnej postaci. Nie jest to błąd, bowiem widok zarządzania układem ma charakter techniczny. O ile spełnione są warunki logiczne (odpowiednia konfiguracja bloku + istnienie treści do wyświetlana), blok zostanie wyświetlony w sposób docelowy po zapisaniu zmian i po wyjściu z trybu zarządzania układem.

Usuwanie bloku funkcyjnego

Jeśli skierujesz wskaźnik myszki w miejscu osadzenia danego bloku funkcjonalnego (w ramach danej sekcji), to dla konkretnego bloku wyświetlona zostanie szara ikona ołówka wpisanego w okrąg, tak jak na ilustracji.

Kliknij na tę ikonę, po czym z wyświetlonego menu wybierz opcję Usuń blok. Potwierdź zamiar usunięcia bloku. Chcąc mieć pewność, że blok został na stałe usunięty z układu, zapisz wprowadzone modyfikacje za pomocą przycisku Zapisz szablon dostępnego w górnej części widoku układu.

Czynności usunięcia bloku nie można cofnąć.

Przenoszenie bloku do innego miejsca - w ramach tej samej lub innej sekcji

Jeśli skierujesz wskaźnik myszki w miejscu osadzenia danego bloku funkcjonalnego (w ramach danej sekcji), to dla konkretnego bloku wyświetlona zostanie szara ikona ołówka wpisanego w okrąg, tak jak na ilustracji.

Kliknij na tę ikonę, po czym z wyświetlonego menu wybierz opcję Przenieś. Następnie wskaż docelowe miejsce, dokąd blok ma zostać przesunięty w ramach układu strony (wybierz jedną z dostępnych sekcji oraz jej konkretny fragment - zgodnie z kontekstem danego układu). Finalnie potwierdź zmianę niebieskim przyciskiem Przenieś.
Blok funkcyjny zostanie przemieszczony do wskazanego miejsca w układzie strony. Bloków nie można przenosić pomiędzy stronami, lecz wyłącznie w ramach bieżącego układu tej samej strony. Chcąc mieć pewność, że blok został na stałe wpisany do nowego miejsca w układzie, zapisz wprowadzone modyfikacje za pomocą przycisku Zapisz szablon dostępnego w górnej części widoku układu.

Czynności przesunięcia bloku nie można bezpośrednio cofnąć (można jednak przenieść blok z powrotem w poprzednie miejsce - o ile nadal istnieje w układzie strony).

Konfigurowanie bloku funkcyjnego

Jeśli skierujesz wskaźnik myszki w miejscu osadzenia danego bloku funkcjonalnego (w ramach danej sekcji), to dla konkretnego bloku wyświetlona zostanie szara ikona ołówka wpisanego w okrąg, tak jak na ilustracji.



Kliknij na tę ikonę, po czym z wyświetlonego menu wybierz opcję Konfiguruj. Wyświetlone zostanie okno konfiguracji bloku, które może mieć różną zawartość, w zależności od rodzaju konfigurowanego bloku. Zamierzoną konfigurację bloku zapisz w tym oknie. Następnie chcąc mieć pewność, że konfiguracja bloku została trwale zastosowana w układzie, zapisz wprowadzone modyfikacje za pomocą przycisku Zapisz szablon dostępnego w górnej części widoku układu.

Zmian w konfiguracji bloku nie można cofnąć (można jednak z powrotem manualnie ustawić blok do poprzedniej konfiguracji, o ile w CMS-ie nie usunięto informacji związanych z poprzednią konfiguracją, np. strony, tagi, mikrowitryny, itp. dalej istnieją i nie zostały usunięte).

Centrum Usług Informatycznych Politechniki Gdańskiej 2024