logo

Extra Block Types (EBT) - Neue Erfahrung im Layout Builder❗

Extra Block Types (EBT) - gestylte, anpassbare Blocktypen: Diashows, Registerkarten, Karten, Akkordeons und viele andere. Eingebaute Einstellungen für Hintergrund, DOM Box, Javascript Plugins. Erleben Sie die Zukunft der Layouterstellung schon heute.

Demo EBT-Module EBT-Module herunterladen

❗Extra Absatztypen (EPT) - Erfahrung mit neuen Absätzen

Extra Paragraph Types (EPT) - analoger, auf Absätzen basierender Satz von Modulen.

Demo EPT-Module EPT-Module herunterladen

Scroll
  1. Startseite
  2. Drupal Book
  3. 1. Drupal: Grundfunktionen

1.8. Bild: Arbeiten mit Bildern, Voreinstellungen.

27/05/2025, by Ivan

Menu

Drupal kann nicht nur mit Textseiten arbeiten, sondern auch mit Bildern. Dazu müssen Sie das Image-Modul aktivieren. Das Image-Modul erlaubt es, Fotos an Nodes anzuhängen und diese Fotos in der gewünschten Größe anzuzeigen. Außerdem können diese Größen an verschiedenen Stellen unterschiedlich sein. So können wir beispielsweise im Teaser eines Nodes ein kleines Foto verwenden, während es im vollständigen Node schon groß dargestellt wird.

In früheren Lektionen haben wir den Inhaltstyp Mitarbeiter erstellt. Öffnen wir die Verwaltung der Felder für den Inhaltstyp Mitarbeiter und fügen ein Bildfeld hinzu.

Feld Mitarbeiter

Nun wird im Formular zum Erstellen/Bearbeiten eines Mitarbeiters ein Feld zum Hochladen von Bildern angezeigt:

Mitarbeiterfoto

Dieses Bild wird auf der Mitarbeiterseite angezeigt, jedoch in Originalgröße und mit dem Label „Image field“. Um die Ausgabe zu konfigurieren, gehen Sie zum Reiter „Anzeige verwalten“ in den Einstellungen des Inhaltstyps Mitarbeiter.

Einstellungen für Drupal-Felder

Verschieben Sie das Bildfeld nach oben, entfernen Sie die Ausgabe des Feldnamens und klicken Sie auf das Zahnrad (Einstellungen), um die Größe des angezeigten Bildes festzulegen. Standardmäßig gibt es bereits Voreinstellungen: Groß (480x480), Mittel (220x220), Miniatur (100x100). Für den Teaser wählen wir „Miniatur“, für den vollständigen Node „Mittel“. Außerdem soll im Teaser das Bild als Link zum Mitarbeiter-Node fungieren:

Einstellungen für Drupal-Felder

In den Teaser-Listen wird nun das Mitarbeiterbild als Link zur vollständigen Mitarbeiterseite angezeigt.

Zusätzlich zu den fertigen Voreinstellungen Groß, Mittel, Miniatur können Sie eigene Bildgrößen erstellen. Gehen Sie dazu auf die Seite Konfiguration - Bildstile.

/admin/config/media/image-styles

Dort sehen Sie vorhandene Voreinstellungen und die Schaltfläche „Bildstil hinzufügen“:

Bildstil hinzufügen

Erstellen wir einen Bildstil mit 150x150 Pixel und geben ihm einen Namen. Auf der Seite zur Bearbeitung des Bildstils sehen Sie Aktionen, die hinzugefügt werden können:

Drupal Voreinstellungen

  • Convert – Bild in ein anderes Format konvertieren.
  • Crop – Zuschneiden des Fotos ohne Skalierung.
  • Desaturate – Foto in Schwarz-Weiß umwandeln.
  • Resize – Größenänderung ohne Beibehaltung der Proportionen.
  • Rotation – Drehen des Fotos um einen gewünschten Winkel.
  • Scale – Größenänderung unter Beibehaltung der Proportionen.

Sie können mehrere Aktionen auswählen. Zum Beispiel erstellen wir „Scale150x150“ und wandeln das Foto anschließend in Schwarz-Weiß um.

Skalierung:

Bild skalieren Drupal

Gehen wir zurück zur Seite „Anzeige verwalten“ und wählen das Bildfeld für den Mitarbeiter-Teaser mit dem neuen 150x150-Voreinstellung aus.

neue Drupal Voreinstellung

Der Mitarbeiter-Teaser sieht nun so aus:

Drupal Ankündigung

Jetzt wissen Sie, wie man Fotos in Drupal hochlädt und wie man sie so anzeigt, wie Sie es benötigen. In den folgenden Lektionen sehen wir, wie man auf ähnliche Weise eine Fotogalerie erstellt.