Eine Bildergalerie erstellen.

DXPR Builder lernenSeiten erstellenTutorial folgen

Hier bauen Sie eine Fotogalerie: eine zentrierte Überschrift, drei Fotos nebeneinander mit Alternativtext und eine Slideshow auf einem grauen Band. Nutzen Sie sie, um einen Ort oder ein Ereignis in Bildern zu zeigen. Um Projekte mit je einer Beschreibung zu zeigen, folgen Sie stattdessen Eine Portfoliogalerie erstellen.

Das Video baut eine Galerie mit Gemälden Studierender für eine Universität.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Medienbibliothek enthält mindestens sechs Fotos, auf dieselben Proportionen zugeschnitten.
  • Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu Content > Add content > Landing Page (/node/add/landing_page) und klicken Sie auf Save.

Schritt 1: Den Header hinzufügen

  1. Klicken Sie auf der leeren Seite auf Add Elements und wählen Sie Section aus dem Tab Layout.
  2. Fahren Sie über den Abschnitt und öffnen Sie More > Settings. Wählen Sie unter HTML classes Align text center und klicken Sie dann auf Save.
  3. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text aus dem Tab Content.
  4. Geben Sie „Galerie studentischer Kunst“ als Heading 2 ein, fügen Sie eine Einleitungszeile hinzu und klicken Sie auf Save. Das Theme gibt den Seitentitel als Heading 1 der Seite aus. Um stattdessen diese Überschrift zur Heading 1 zu machen, siehe SEO-freundliche Seiten erstellen.

Schritt 2: Das Fotoraster hinzufügen

  1. Fahren Sie über den Abschnitt und klicken Sie auf Add Section Below. Klicken Sie auf + auf dem neuen Abschnitt und wählen Sie Row; sie kommt mit zwei gleichen Spalten.
  2. Klicken Sie auf das Grid-Icon der Zeile (Column layout), wählen Sie das Preset 1/3 + 1/3 + 1/3 und klicken Sie auf Save.
  3. Klicken Sie in der ersten Spalte auf + und wählen Sie Image.
  4. Klicken Sie auf Select Image, durchsuchen Sie die Medienbibliothek mit Apply filters, klicken Sie auf ein Foto und klicken Sie auf Insert selected.
  5. Öffnen Sie das Panel SEO und geben Sie das Alt attribute ein: was jemand wissen sollte, der das Foto nicht sehen kann. Klicken Sie auf Save.
  6. Wiederholen Sie das für die zweite und dritte Spalte.

Fotos, die auf dieselben Proportionen zugeschnitten sind, halten die Zeile gerade.

Schritt 3: Die Slideshow hinzufügen

  1. Fügen Sie mit Add Section Below einen dritten Abschnitt hinzu und öffnen Sie sein More > Settings. Wählen Sie Align text center unter HTML classes und ein hellgraues Background im Panel Style. Klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Image carousel.
  3. Klicken Sie auf Select Image, durchsuchen Sie die Bibliothek, klicken Sie auf drei Fotos und klicken Sie auf Insert selected, und klicken Sie dann auf Save.
  4. Klicken Sie erneut auf + auf dem Abschnitt und wählen Sie Text; er landet über dem Karussell. Geben Sie „Slideshow“ als Heading 2 ein und klicken Sie auf Save.

Schritt 4: Speichern und Vorschau

  1. Klicken Sie in der Builder-Symbolleiste auf Save.
  2. Öffnen Sie das Ansichtsmenü (das Augen-Icon) und wählen Sie Preview.

Weiter gehen

Nicht im Video gezeigt:

  • Bildunterschriften: Setzen Sie eine Card in die Spalte und fügen Sie ein Text-Element mit der Bildunterschrift darin hinzu. Fügen Sie dann das Image in der Card hinzu; es landet über der Bildunterschrift.
  • Fotos in voller Größe: Setzen Sie Image link auf die Datei in voller Größe und Image link target auf New window.
  • Stil: Setzen Sie auf jedem Bild Border radius auf 4 und Drop shadow auf 1 im Panel Style für ein sanftes Anheben.
  • Slideshow-Timing: Setzen Sie Interval auf dem Karussell, in Millisekunden. Haken Sie unter Hide Hide pagination control oder Hide prev/next buttons an, um diese Steuerelemente zu entfernen.
  • Galerie, die sich selbst füllt: Erstellen Sie unter Structure > Views > Add view eine Ansicht von Bildmedien mit einer Blockanzeige im Format Grid. Fügen Sie sie aus dem Tab Drupal Views ein, und neue Uploads erscheinen von selbst.

Was Sie sehen

Die zentrierte Überschrift eröffnet die Seite, gefolgt von drei Fotos nebeneinander. Auf dem grauen Band darunter zeigt die Slideshow jeweils ein Foto und wechselt alle fünf Sekunden zum nächsten.

Wenn Sie die Fotos nicht wie gezeigt sehen

  • Insert selected fügt kein Foto hinzu. Die Bibliothek lud nach Apply filters noch neu, sodass Ihr Klick das Foto nicht angehakt hat. Warten Sie, bis das Raster stabil ist, prüfen Sie, dass das Foto ein Häkchen zeigt, und klicken Sie erneut auf Insert selected.
  • Die Medienbibliothek ist leer. Es sind noch keine Bilder hochgeladen, oder der Medienbrowser ist nicht eingerichtet. Siehe Bilder werden nicht hochgeladen oder verschwinden.
  • Die Fotos haben unterschiedliche Höhen. Ihre Proportionen unterscheiden sich. Schneiden Sie sie auf dieselben Proportionen zu, laden Sie sie erneut hoch und wählen Sie die neuen Kopien.
  • Ihre Änderungen sind nach einem Neuladen weg. Sie haben die Seite verlassen, bevor Sie auf Save in der Builder-Symbolleiste geklickt haben. Wenn Save einen Fehler zeigt, siehe Änderungen werden nicht gespeichert.

Wie geht es weiter?