Einfache Foto-Galerie erstellen

Module

• multiupload_filefield_widget
• multiupload_imagefield_widget
• imagecache_actions
• colorbox

Step 1:
Bildstile anlegen:   hier 220x220 Pixel und 960x960 Pixel  
Idee:

• Breite 690 Pixel
• 2 Abstände a 15 Pixel bleiben 660 Pixel
• 3 Bilder nebeneinander gibt 220 Pixel/Bild

Step 2: Inhaltstyp Galerie anlegen:
Felder:

• Titel
• (Body?)
• Bild hier als Widget Multiupload eintragen

Step 3:
Anzeige einstellen für Vollansicht (default)

• Beim Bildfeld als Formatter die Colorbox auswählen
• Die beiden Bildstile eintragen
• Galerie pro Seite auswählen

Step 4:
Einstellungen im CSS

/**
*  Galerie-Node
*/
.node-galerie .field-name-field-bild .field-item {
   float: left;
   margin-right: 20px;
}
.node-galerie .field-name-field-bild .field-item:nth-child(4n) {
   margin-right: 0;
}

Step 5:

• Übersichtsseite für die Galerien mittels Views
• Es wird ein View erstellt, der Inhalte vom Typ Galerie zeigt
• Sortierung nach Erstellungsdatum Absteigend (d.h. Neustes zuerst)
• Es wird eine Seite erzeugt
• Die Seite wird als Menüpunkt im Hauptmenü verankert (mittlere Spalte)
• Der View zeigt Felder
• es werden Titel und Bildfeld gezeigt (erst Bild, dann Titel)
  
• Bild 
  - Unter Mehrfachauswahl beim Bild wird nur das erste Bild ausgewählt
  - Das Bild wird mit nichts verlinkt
  - als Formatter wird Bild eingetragen
  - als Bildstil nehmen wir wieder 220x220
  - Das Bild wird von der Anzeige ausgeschlossen (!!)    
  

• Titel
  - Wird mit Inhalt verlinkt (normales Verhalten)
  - Ergebnisse werden überschrieben (kleiner Trick)
    <div class="album">[field_bild]<br />[title]</div>
  

Step 6:
Einstellungen im CSS
.view-fotoalben .views-field-title ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.view-fotoalben .views-field-title ul li {
  padding: 0;
}
.view-fotoalben .views-row .views-field-title .album {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  width: 225px;
  height: 288px;
  overflow: hidden;
}
.view-fotoalben .views-row:nth-child(4n) .views-field-title .album {
  margin-right: 0;
}