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

Drupal CCK+Views. Inhaltstypen. Ausgabe von Seiten über Views. Erstellung einer Mitarbeitergalerie

26/05/2025, by Ivan

Im vorherigen Tutorial habe ich erklärt, was eine Node in Drupal ist. Nodes sind unsere Blogeinträge, Seiten, Stories. In diesem Tutorial erstellen wir einen neuen Inhaltstyp (Content type) „Mitarbeiter“, den wir für eine Liste von Mitarbeitern mit Foto und Beschreibung verwenden.

Welche Module brauchen wir dafür?

Drupal CCK

1. CCK (Content Construction Kit) – Dieses Modul ermöglicht es, neue Inhaltstypen zu erstellen und ihnen verschiedene Eingabefelder hinzuzufügen.

Drupal CCK Views

Das Modul Drupal CCK ist sehr umfangreich und wurde in mehrere Untermodule aufgeteilt. Wir benötigen folgende:

  1. Content – für die Erstellung neuer Inhaltstypen.
  2. Content Permissions – um Berechtigungen für das Bearbeiten und Anzeigen des Inhaltstyps zu setzen.
  3. Number – ermöglicht das Hinzufügen von numerischen Feldern, z.B. für eine Personalnummer.
  4. Option Widgets – ermöglicht Eingabefelder mit Auswahlmöglichkeiten (Checkbox, Select, Radio).
  5. Text – erlaubt die Eingabe von Textfeldern.

Weitere Untermodule:

  • Content copy – erlaubt das Kopieren von Inhaltstypen samt Feldern.
  • FieldGroup – gruppiert Eingabefelder (für uns derzeit nicht relevant).
  • NodeReference – fügt ein Feld hinzu, mit dem auf andere Nodes verwiesen werden kann, z.B. auf eine separate Seite des Mitarbeiters.
  • UserReference – ermöglicht ein Feld mit Verweis auf einen Benutzer.

Speichern Sie die Modulkonfiguration. Danach erscheint der Menüpunkt Content types im Admin-Menü unter Inhalt:

drupal admin menu

Später fügen wir den Inhaltstyp hinzu, zunächst installieren wir zwei weitere Module.

FileField und ImageField für Drupal

2. FileField und ImageField. FileField fügt ein Datei-Upload-Feld hinzu, das an die Node angehängt wird. ImageField ist speziell für Bilddateien (jpg, gif, png). Diese Module benötigen wir zum Hochladen von Mitarbeiterfotos.

Drupal FileField

Speichern Sie die Konfiguration und fahren Sie mit der Installation der nächsten Module fort.

ImageCache für Drupal

3. ImageCache und ImageAPI. ImageAPI ersetzt die Standard-API von image.inc. ImageCache erlaubt es, Presets zu definieren, damit alle Mitarbeiterfotos unabhängig von ihren ursprünglichen Maßen einheitlich dargestellt werden.

Drupal ImageCache

Optional kann das Modul lightbox2 installiert werden, um Bilder beim Anklicken in Originalgröße als Overlay darzustellen. Nach der Installation von lightbox2 wird automatisch ein Preset mit Lightbox-Effekt hinzugefügt.

4. Das Modul Views. Views ist ein Abfrage-Builder für die Datenbank, der es erlaubt, Listen von Daten ohne SQL-Kenntnisse zu erstellen. Installieren Sie Views.

Drupal Views

Speichern Sie die Konfiguration. Nun sind alle benötigten Module für eine Mitarbeiterliste mit Fotos bereit, wir beginnen mit der Erstellung.

Erstellung der Mitarbeiterliste in Drupal

Zuerst erstellen wir den Inhaltstyp „Mitarbeiter“. Gehen Sie im Admin-Menü zu Inhalt – Inhaltstypen – Inhaltstyp hinzufügen.

Drupal CCK

Achten Sie darauf, dass der Name für die Administration gut verständlich ist und auf Russisch ausgefüllt werden kann. Das Feld „Typ“ wird von Drupal verwendet und sollte daher in lateinischer Schrift ohne Leerzeichen oder Sonderzeichen (Unterstrich erlaubt) ausgefüllt werden.

Drupal views

Der neue Inhaltstyp „Mitarbeiter“ ist nun verfügbar. Fügen Sie Felder für die Dateneingabe hinzu, klicken Sie auf „Manage fields“.

Im Feld „New field“ füllen Sie alle Eingabefelder aus:

Bezeichnung – kann auf Russisch sein

field name – ohne Leerzeichen, nur lateinische Buchstaben und Unterstriche

Datentyp – wählen Sie „file“, danach wählen Sie als Widget „image“

Drupal Felder hinzufügen

Klicken Sie auf Speichern, im nächsten Fenster speichern Sie die Standardeinstellungen unverändert.

Drupal CCK

Das Mitarbeiter-Content-Type hat nun ein Upload-Feld für Mitarbeiterfotos. Fügen Sie außerdem zwei weitere Felder hinzu: „FIO“ (Textfeld, Länge z.B. 100 Zeichen) und „Über den Mitarbeiter“ (Textarea mit mehreren Zeilen, Textfilter „gefilterter Text“).

Drupal Felder

Eingabeformate

Die Eingabeformate werde ich in einem späteren Tutorial erläutern.

So sollten Ihre Felder aussehen:

Drupal cck

Jetzt können Sie Ihren ersten Mitarbeiter anlegen. Gehen Sie im Admin-Menü zu Inhalt – Inhalt erstellen – Mitarbeiter.

Drupal Mitarbeitergalerie

Füllen Sie die Mitarbeiterdaten ähnlich wie bei einem Blogeintrag, Page oder Story aus. Zusätzlich gibt es nun die Felder Foto, Name (FIO), und Über den Mitarbeiter.

Mitarbeiter

Vielleicht fragen Sie sich, was in „Titel“ und „Inhalt“ geschrieben wird. Tatsächlich doppelt FIO das Feld „Titel“, und „Über den Mitarbeiter“ entspricht dem Feld „Inhalt“. Man kann also den Titel für den vollständigen Namen und den Inhalt für weitere Informationen nutzen. Die Felder sind ein Beispiel, man könnte das Mitarbeiter-Content-Type um Position, Arbeitszeit, Büro usw. erweitern.

Speichern Sie den Mitarbeiter. Alle Mitarbeiter sind Nodes, z.B. ist der Link zu meinem Mitarbeiter „Vasya“ node/9. Falls URL-Aliase genutzt werden (z.B. durch Pathauto), sieht man den Namen oder kyrillisch, aber im Bearbeitungsmodus ist es immer node/[nummer]/edit.

Nun wissen wir, wie man Mitarbeiter hinzufügt. Als nächstes gestalten wir die Ausgabe. Erstellen Sie ein Preset mit ImageCache (falls noch nicht installiert). Gehen Sie zu Admin – Site building – ImageCache – Add new preset.

Drupal cck

Geben Sie dem Preset einen Namen, z.B. die gewünschte Breite und Höhe in Pixeln, getrennt mit einem „X“. Verfügbare Aktionen sind z.B. Crop, Resize, Scale etc.

  • Add Crop – Bild zuschneiden
  • Add Scale and Crop – Bild proportional skalieren und zuschneiden
  • Add Resize – Bildgröße ändern, ohne Proportionen zu erhalten
  • u.v.m.

Wir wählen „Add scale and crop“ und setzen die Größe auf 100x100 Pixel. Speichern Sie das Preset.

Drupal cck

Jetzt nutzen wir das Modul Views, um die Abfrage zu erstellen, die alle Mitarbeiter mit ihren Bildern ausgibt. Installieren Sie Views und Views UI.

Drupal Views

Gehen Sie im Admin-Menü zu Site Building – Views. Standardmäßig gibt es einige deaktivierte Views (Archiv, Neueste Kommentare, Frontpage etc.).

Klicken Sie auf „Add“ und erstellen Sie eine View für die Mitarbeitergalerie. Der Name sollte mit „view_“ beginnen.

Drupal Views

Wählen Sie bei View type „Node“, da Mitarbeiter Nodes sind.

Nach Klick auf Next gelangen Sie in das Views UI.

Drupal CCK

Wichtig sind für uns die Bereiche Arguments, Sort criteria, Filters und Fields.

  • Arguments – Filterung nach URL-Argumenten, z.B. node/17 → 17
  • Fields – Auswahl der auszugebenden Felder
  • Sort criteria – Sortierung der Ergebnisse
  • Filters – Einschränkung der Ergebnisliste

Fügen wir ein Feld hinzu:

Views Felder

Wählen Sie Felder aus der Gruppe „Content“ (z.B. FIO, Über den Mitarbeiter, Foto). Diese Felder könnten bei Ihnen auch in einer anderen Gruppe liegen.

Drupal Felder hinzufügen

Die Einstellungen für das Feld „Über den Mitarbeiter“ können unverändert bleiben, klicken Sie auf „Edit“. Für das Feld FIO entfernen Sie die Anzeige des Titels.

Views Titel

Für das Feld Mitarbeiterfoto entfernen Sie ebenfalls den Titel und wählen das zuvor erstellte Preset aus.

Drupal Format

Fotodarstellungen können z.B. sein:

100x100 - einfaches Bild ohne Link.
100x100 - Bild als Link zur Node.
100x100 - Bild als Link auf das Bild selbst (Originalgröße).

Wenn lightbox2 installiert ist, können Sie ein Preset mit Lightbox-Effekt auswählen: