UNSER BLOG

3

Es wird eine Galerie Übersichtsseite basierend auf Views-Relationships aufgebaut. Von dieser ausgehend wird auf die Detailgalerieseite mit allen enthaltenen Bildern verlinkt. Für die Ansicht des Vollbildes kann das Fancybox-Plug-In genutzt werden. Dieses muss aber entsprechend in Drupal konfiguriert werden (Javascripts einbinden).

(Featured: HTML5-Tags ergänzen, Gesamtsumme der Bilder, Bild URL hinzufügen)
Beispielseite: http://www.welterbe-schule.at/bildergalerie

Schritt für Schritt-Anleitung (Download .pdf: Drupal_Views_Bildergalerie)

1 – Aufbau eines Inhaltstyps Galerie

Bild: Inhaltstyp festlegen

Bild: Inhaltstyp festlegen

Zuerst wird ein neuer Seitentyp mit allen dazugehörigen Felder aufgebaut.

Felder: Galeriebild (zum Hochladen des Bildes), Titel und die Taxonomietags (hier mit der Bezeichnung „Galerietags“, auf diese wird später verweisen werden)

URL-Alias-Einstellungen falls Pathauto verwendet wird.

2 – Bildstile anlegen

Für die Vorschau und das Vollbild wurden 2 Bildstile angelegt: „galeriebildvorschau“ und „galeriebildgrossansicht“. Die Vorschau wurde mit 96 x 96 Pixel begrenzt.

3 – Neue View anlegen

Die Einstellungen für Views werden von den Taxonomiebegriffen aus gestartet. Es wird ein Block angelegt mit dem Format Raster von Feldern. Alle Beiträge sollen angezeigt werden (0 entspricht unendlich). Die Taxonomiebegriffe wurden verwendet um die Bilder einzelnen Kategorien zuzuordnen. Diese sind frei wählbar. Dabei sind Mehrfachzuordnungen ebenfalls möglich.

Bild: View anlegen

Bild: View anlegen

Nachdem die View angelegt wurde werden die Felder definiert.

  1. Begonnen wird mit dem hinzufügen der Taxonomiebegriffen. Felder hinzufügen: Begriffs-ID und Name
  2. Beziehung hinzufügen: Die einzelnen bereits angelegten Inhalte mit Bild werden nun mit den Taxonomiebegriffen in Beziehung gebracht. So erhält man alle Inhalte die mit einem bestimmten Taxonomiebegriff belegt wurden. In diesem Fall benutzt man „Inhalt using Galerietags“. Galerietags ist die Bezeichnung die aus Inhaltstyp stammt (siehe 1).
  3. Beziehung als erforderlich anwählen (dann gibt es keine Null-Einträge)
  4. Use aggregation auf „Ja“ umstellen
  5. Aggregationseinstellungen: Group results together
  6. Weiteres Feld hinzugügen: Begriffs-ID
  7. Aggregationseinstellungen: Anzahl
  8. Alle diese Felder werden später von der Anzeige ausgeschlossen
Bild: Felder hinzufügen

Bild: Felder hinzufügen

Bild: Felder

Bild: Felder

Bild: Beziehung hinzufügen

Bild: Beziehung hinzufügen

Bild: Beziehung hinzufügen, Details festlegen

Bild: Beziehung hinzufügen, Details festlegen

Bild: Erweiterte Einstellungen: Beziehung, Use aggregation

Bild: Erweiterte Einstellungen: Beziehung, Use aggregation

Bild: Aggregation einstellen für Anzahl

Bild: Aggregation einstellen für Anzahl

Bild: Summe der Bilder festlegen

Bild: Summe der Bilder festlegen

Bild: Allgemeine Einstellungen der View: Format, Felder und Filter

Bild: Allgemeine Einstellungen der View: Format, Felder und Filter

Wenn alle Felder in der Reihenfolge angezeigt werden und die Beziehung festgelegt wurde erhält man folgende Vorschau (Summe aller Bilder ist ausgeblendet).

Der Link entspricht dem Taxonomiebegriff und darunter wird die ID angezeigt. Es werden alle Begriffe und ihre dazugehörige ID-Nummer aufgelistet.

Bild: Grundeinstellungen ohne Beziehung

Bild: Grundeinstellungen ohne Beziehung

Bild: Grundeinstellungen mit Beziehung und Anzahl der Bilder

Bild: Grundeinstellungen mit Beziehung und Anzahl der Bilder

4 – Filter hinzufügen

In diesem Beispiel sollen alle Bilder herausgefiltert werden die mit der Taxonomie-ID 14 verknüpft sind. Mit ID 21 sind keine Bilder verknüpft, dieser Begriff fällt schließlich durch die Beziehung heraus weil vorher definiert wurde, dass keine Leereinträge erwünscht sind.

Filter anlegen:

  1. Filter hinzufügen: Taxonomie-ID als Feld wählen und in den weiteren Einstellungen den Ungleich-Operator auswählen
  2. Wert ist 14 (zeige alle Einträge die ungleich 14 sind)
Bild: Filtere ID 14 aus dem Ergebnis

Bild: Filtere ID 14 aus dem Ergebnis

Bild: Vorschau der gefilterten Resultate mit Beziehung und Anzahl der verknüpften Bilder

Bild: Vorschau der gefilterten Resultate mit Beziehung und Anzahl der verknüpften Bilder

5 – Ergebnisse sortieren

Unter Sortierkriterium wird ja nach Wunsch ein neues Feld hinzugefügt das die Reihenfolge der Liste bestimmt. In diesem Fall wurde die Taxonomie gewählt.

  1. Sortierkriterium hinzufügen: Feld Name
  2. Einstellungen wie gewünscht: aufsteigend oder absteigende Reihenfolge

6 – Beziehung hinzufügen Dateipfad

Um in Drupal auf den Dateipfad des Bildes zugreifen zu können wird eine weitere Beziehung ergänzt.

  1. Beziehung hinzufügen: Unter „File Usage“ : „Datei“ wählen.
  2. Beziehung ist erforderlich muss nicht angewählt werden – das wurde bereits mit der ersten erledigt.
  3. Feld hinzufügen: Datei: Pfad
  4. Einstellungen: „Formatter“ : „Image URL“, aus Anzeige ausschließen

Damit die Ergebnissmenge erhalten bleibt sollte die Dateibeziehung gewählt werden die mit der Taxonomie verbunden ist (nicht mit dem Inhalt). Ansonsten verliert man die Gruppierung und damit auch die Summenbildung.

Bild: Beziehung: Datei

Bild: Beziehung: Datei

Bild: Feld Dateipfad

Bild: Feld Dateipfad

Bild: Einstellungen des Feldes Dateipfad

Bild: Einstellungen des Feldes Dateipfad

Durch die Einstellung des Formates „Image URL“ wird anstelle des HTML-Quellcodes des gesamten Bildes nur der Dateipfad ausgegeben. Dieser kann später in einer manuellen Einstellung dazu verwendet werden um auf das Vollbild zu verlinken (kann dann in Fancybox angezeigt werden). Dabei muss auch die Darstellung auf den entsprechenden Bildstil eingestellt werden: hier galeriegrossbildansicht.

7 – Sortieren der Felder für die Ausgabe

Die Reihenfolge der Felder bestimmt auch die Ausgabe

Bild: Sortierung der Felder

Bild: Sortierung der Felder

  1. Felder: Sortieren: Reihenfolge festlegen

Die Reihenfolge sollte so gewählt werden, dass das letzte Feld alle verfügbaren Informationen der zuvor angelegten nutzen kann (siehe dazu nächster Schritt).

8 – Ausgabe umformatieren

Die Ausgabe des HTML-Quellcodes kann für jedes Feld eigens eingestellt werden (z.B. eigene CSS oder eigenes HTML-Element).

Um semantische HTML5 Elemente für die Bilder und deren Bildunterschriften nutzen zu können ist empfohlen die Ausgabe des Feldes zu überschreiben.

Es gibt noch einen weiteren Vorteil beim Überschreiben, nämlich die Informationen der zuvor hinzugefügten Felder zu nutzen (wie ein Platzhalter oder eine Variable). Auf diese Weise lässt sich eine völlig individuelle Ausgabe erzeugen.

Um die Ausgabe eines Feldes zu verändern:

  1. Alle Felder die nicht ausgegeben werden sollen und deren Inhalte später genutzt werden sollen von der Ausgabe ausschließen
  2. Im gewünschten Feld die Einstellung „Rewrite results“ : „Rewrite the output of this field“ wählen
  3. Eingaben tätigen, dabei können die Platzhalter genutzt werden die unter „Replacement patterns“ verfügbar sind
Bild: Von Ausgabe ausschließen und Prefix wählen

Bild: Von Ausgabe ausschließen und Prefix wählen

Bild: Replacement patterns, Platzhalter

Bild: Replacement patterns, Platzhalter

Die Platzhalter werden in der Reihenfolge der Felder aufgelistet. Es können Duplikate entstehen. Diese sind dann mit „_1“ gekennzeichnet. Die Einstellungen der jeweiligen Felder beeinflussen den Inhalt der Felder. Zur besseren Übersicht können die Bezeichnungen individuell benannt werden.

Bild: Administrativer Titel

Bild: Administrativer Titel

Bild: Bezeichnung eines Platzhalters (siehe oben) und die Liste dazu

Bild: Bezeichnung eines Platzhalters (siehe oben) und die Liste dazu

9 – HTML-5 Elemente ergänzen, eigene Struktur bilden

Für die Ausgabe werden alle nötigen Felder ergänzt um auf deren Inhalte zugreifen zu können (Ausgabe ausblenden nicht vergessen). An letzter Stelle können die Felder eingefügt werden, die dazu genutzt werden um die endgültige Ausgabe zu erzeugen.

Folgende Felder werden benötigt:

  1. Image: Formatiert als URL
  2. Image: Formatiert als Bild, administrativeb Titel vergeben zur besseren Unterscheidung (hierTeaserbilder)
  3. Summe: Feld ID mit Aggregation Anzahl
  4. Taxonomiebegriff: Name
  5. Taxonomie: ID
  6. Die Felder von der Ausgabe ausschließen die nur als Platzhalter genutzt werden
  7. Ausgabe der Felder überschreiben die die Inhalte erzeugen

Erzeugen der Ausgabe für das Bild (mit HTML5-Tags)

  1. Im Feld Image (formatiert als Bild) die Einstellung „Rewrite results“ : „Rewrite the output of this field“ wählen (siehe oben)
  2. Im Text den Namen des Platzhalters für das Bild wählen: hier [field_image_1]
  3. „Output this fiel das a link“ wählen: Link eintragen z.B. bildergalerie/[tid] oder [field_image]
  4. Prefix text: <figure>
  5. Suffix text: </figure>
Bild: Überschreiben der Bildausgabe

Bild: Überschreiben der Bildausgabe

Erzeugen der Ausgabe für die Bildunterschrift (mit HTML5-Tags)

  1. Im Feld ID (muss nach dem Bild folgen) die Einstellung „Rewrite results“ : „Rewrite the output of this field“ wählen
  2. Im Text den Namen des Platzhalters für den Taxonomiebegriff wählen: hier [name]
  3. „Output this fiel das a link“ wählen: Link eintragen z.B. bildergalerie/[tid] oder [field_image]
  4. Prefix text: <figcaption>
  5. Suffix text: nach dem Text soll die Anzahl der Bilder folgen (Platzhalter [tid_1]), HTML-Tag abschließen<br />[tid_1]</f igcaption >
Bild: Überschreiben der Ausgabe für die Bildunterschrift

Bild: Überschreiben der Ausgabe für die Bildunterschrift

Für die Verlinkung sind unterschiedliche Aspekte zu beachten. Vom Vorschaubild kann direkt auf die Vollgröße verlinkt werden (Platzhalter mit URL des Bildes nutzen). Oder es kann auch zu einer weiteren Seite führen, die die gesamten Bilder der betreffenden Galerie anzeigt. In dem Fall ist die hier erzeugte Seite (bzw. der Block) als Übersicht konzipiert. So ist es auch in dem Beispiellink zu sehen. Um dies umzusetzen wird allerdings ein weiterer Block benötigt der die URL des Links auswertet und über die ID die korrekte Galerie anzeigt. Das kann alles mittels einer einzigen View vorgenommen werden. Der 2. Block mit den Detailbildern muss dann folgende Einstellungen beinhalten:

Seiteneinstellungen: /url/% (hier /bildergalerie/% entsprechend dem Link Bsp.: /bildergalerie/15)

Contextual Filters: Taxonomie-Begriff: Begriffs-ID (Beispiel-Einstellungen siehe Bild)

Bild: Seiteneinstellungen

Bild: Seiteneinstellungen

Bild: Contextual filters

Bild: Contextual filters

Bild: Contextual filters, Einstellungen für die Parameterübergabe

Bild: Contextual filters, Einstellungen für die Parameterübergabe

Bild: Komplette View

Bild: Komplette View

Bild: Endgültige Ansicht

Bild: Endgültige Ansicht

Kommentare ( 3 )

Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht publiziert. Erforderliche Felder sind gekennzeichnet. *

%d Bloggern gefällt das: