Galeria zdjęć..

Poznaj DXPR BuilderBuduj stronySamouczek

Tu zbudujesz galerię zdjęć: wyśrodkowany nagłówek, trzy zdjęcia obok siebie z tekstem alternatywnym i pokaz slajdów na szarym pasie. Użyj jej, aby pokazać miejsce albo wydarzenie na zdjęciach. Projekty z opisem każdy pokaż zamiast tego według galerii portfolio.

Film buduje galerię obrazów studentów dla uniwersytetu.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma co najmniej sześć zdjęć, przyciętych do tych samych proporcji.
  • Strona jest otwarta w kreatorze. Nową utworzysz w Content > Add content > Landing Page (/node/add/landing_page) przyciskiem Save.

Krok 1: dodaj nagłówek

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout.
  2. Najedź na sekcję i otwórz More > Settings. W HTML classes wybierz Align text center, a potem kliknij Save.
  3. Kliknij + na sekcji i wybierz Text z karty Content.
  4. Wpisz „Student art gallery” jako Heading 2, dodaj jedną linijkę wprowadzenia i kliknij Save. Motyw drukuje tytuł strony jako jej nagłówek Heading 1. Aby ten nagłówek stał się nagłówkiem Heading 1, zobacz projektowanie stron przyjaznych SEO.

Krok 2: dodaj siatkę zdjęć

  1. Najedź na sekcję i kliknij Add Section Below. Kliknij + na nowej sekcji i wybierz Row; powstaje z dwiema równymi kolumnami.
  2. Kliknij ikonę siatki wiersza (Column layout), wybierz preset 1/3 + 1/3 + 1/3 i kliknij Save.
  3. Kliknij + w pierwszej kolumnie i wybierz Image.
  4. Kliknij Select Image, przeszukaj bibliotekę mediów opcją Apply filters, kliknij zdjęcie i kliknij Insert selected.
  5. Otwórz panel SEO i wpisz Alt attribute: co powinna wiedzieć osoba, która nie widzi zdjęcia. Kliknij Save.
  6. Powtórz dla drugiej i trzeciej kolumny.

Zdjęcia przycięte do tych samych proporcji trzymają wiersz równo.

Krok 3: dodaj pokaz slajdów

  1. Dodaj trzecią sekcję opcją Add Section Below i otwórz jej More > Settings. Wybierz Align text center w HTML classes i jasnoszary Background w panelu Style. Kliknij Save.
  2. Kliknij + na sekcji i wybierz Image carousel.
  3. Kliknij Select Image, przeszukaj bibliotekę, kliknij trzy zdjęcia i kliknij Insert selected, a potem kliknij Save.
  4. Kliknij + na sekcji jeszcze raz i wybierz Text; ląduje nad karuzelą. Wpisz „Slideshow” jako Heading 2 i kliknij Save.

Krok 4: zapisz i podejrzyj

  1. Kliknij Save na pasku narzędzi DXPR Builder.
  2. Otwórz menu widoku (ikona oka) i wybierz Preview.

Idź dalej

Niepokazane w filmie:

  • Podpisy: umieść Card w kolumnie i dodaj w środku element Text z podpisem. Potem dodaj Image w karcie; ląduje nad podpisem.
  • Zdjęcia w pełnym rozmiarze: ustaw Image link na plik w pełnym rozmiarze, a Image link target na New window.
  • Styl: na każdym zdjęciu ustaw Border radius na 4 i Drop shadow na 1 w panelu Style, aby lekko je unieść.
  • Czas pokazu slajdów: ustaw Interval na karuzeli, w milisekundach. W Hide zaznacz Hide pagination control albo Hide prev/next buttons, aby usunąć te kontrolki.
  • Galeria wypełniająca się sama: w Structure > Views > Add view utwórz widok multimediów Image z wyświetlaniem blokowym w formacie Grid. Wstaw go z karty Drupal Views, a nowe wysłane zdjęcia pojawiają się same.

Efekt

Wyśrodkowany nagłówek otwiera stronę, a za nim trzy zdjęcia obok siebie. Na szarym pasie pod spodem pokaz slajdów pokazuje jedno zdjęcie naraz i przechodzi do następnego co pięć sekund.

Jeśli nie widzisz zdjęć jak na filmie

  • Insert selected nie dodaje zdjęcia. Biblioteka wciąż przeładowywała się po Apply filters, więc kliknięcie nie zaznaczyło zdjęcia. Poczekaj, aż siatka się ustabilizuje, sprawdź, czy zdjęcie pokazuje znacznik, i kliknij Insert selected ponownie.
  • Biblioteka mediów jest pusta. Nie wysłano jeszcze żadnych obrazów albo przeglądarka mediów nie jest ustawiona. Zobacz Obrazy nie wysyłają się albo znikają.
  • Trzy zdjęcia mają różne wysokości. Ich proporcje się różnią. Przytnij je do tych samych proporcji, wgraj ponownie i wybierz nowe kopie.
  • Twoje zmiany zniknęły po przeładowaniu. Stronę opuszczono przed kliknięciem Save na pasku narzędzi kreatora. Jeśli Save pokazuje błąd, zobacz Zmiany nie zapisują się.

Co dalej?