1.8. Bild – Arbeiten mit Bildern, Bildstilen.
Drupal kann nicht nur mit Textseiten, sondern auch mit Bildern arbeiten. Dazu muss das Modul Bild (Image) aktiviert werden. Das Bildmodul erlaubt es, Fotos an Knoten anzuhängen und diese Fotos in der benötigten Größe anzuzeigen. An verschiedenen Stellen können diese Größen unterschiedlich sein. So kann man im Teaser eines Knotens ein kleines Foto verwenden, während im vollständigen Knoten das Foto groß angezeigt wird.
In den vergangenen Lektionen haben wir den Inhaltstyp Mitarbeiter (Employee) erstellt. Öffnen wir die Verwaltung der Felder des Inhaltstyps Mitarbeiter und fügen ein Bildfeld hinzu.
Nun wird im Formular zur Erstellung/Bearbeitung eines Mitarbeiters ein Bild-Uploadfeld vorhanden sein:
Dieses Bild wird auf der Seite des Mitarbeiters angezeigt, jedoch in der Originalgröße und mit der Beschriftung "Bild". Um die Ausgabe anzupassen, muss man zur Registerkarte Anzeige verwalten (Manage display) in den Einstellungen des Inhaltstyps Mitarbeiter gehen.
Wir verschieben das Bildfeld nach oben, entfernen die Anzeige des Feldnamens und klicken auf das Zahnrad (Einstellungen), um die Größe des angezeigten Bildes festzulegen. Standardmäßig gibt es bereits Größen – Bildstile: Groß (480x480), Mittel (220x220), Miniatur (100x100). Für den Teaser wählen wir Miniatur und für den vollständigen Knoten Mittel. Außerdem machen wir im Teaser das Bild zum Link auf den Mitarbeiterknoten:
Nun sind in den Teasern die Mitarbeiter als Link zur vollständigen Mitarbeiterseite angezeigt. Neben den fertigen Bildstilen Groß, Mittel, Miniatur kann man auch eigene Bildgrößen erstellen. Gehen wir zu Konfiguration - Bildstile:
/admin/config/media/image-styles
Dort sieht man bereits vorhandene Bildstile und die Schaltfläche zum Hinzufügen eines Bildstils:
Die Größe soll 150x150 Pixel sein, und wir geben einen passenden Namen ein, um die Übersicht zu behalten. Auf der Bearbeitungsseite sehen wir Aktionen, die hinzugefügt werden können:
Konvertieren – konvertiert ein Bild in ein anderes Format.
Zuschneiden – schneidet das Bild ohne Skalierung zu.
Entsättigen – macht das Bild schwarz-weiß.
Größe ändern – ändert die Größe ohne Beibehaltung der Proportionen.
Drehen – dreht das Bild um einen gewünschten Winkel.
Skalieren – ändert die Größe unter Beibehaltung der Proportionen.
Skalieren und zuschneiden – skaliert unter Beibehaltung der Proportionen und schneidet anschließend an der größeren Seite zu.
Man kann mehrere Aktionen auswählen, zum Beispiel skalieren auf 150x150 und anschließend das Bild schwarz-weiß machen.
Skalieren:
Das Ergebnis sollte so aussehen:
Gehen wir nun zurück zur Seite zur Verwaltung der Feldanzeige und stellen für den Teaser Mitarbeiter den Bildstil 150x150 ein.
Der Mitarbeiter-Teaser sieht jetzt so aus:
Jetzt wissen Sie, wie man Fotos in Drupal hochlädt und wie man sie in der gewünschten Weise anzeigt. In den nächsten Lektionen erklären wir, wie man auf ähnliche Weise eine Fotogalerie erstellt.