Quadratische Bildgalerien mit Bootstrap

Bootstrap Bildergalerie in Kachel-Optik

So erstellst du eine quadratische Bildergalerie mit Hilfe des Bootstrap Frameworks.

Wir sehen sie jeden Tag und mittlerweile ist sie fester Bestandteil jeder großen Webseite oder App. Die Rede ist von der Bildergalerie. Sei es auf Facebook die Übersicht aller Bilder oder Alben, auf WhatsApp die Übersicht aller gesendeten Bilder oder auf dem Smartphone die Übersicht aller geschossenen Bilder.

Grundlegendes

Eine Bildergalerie ist übersichtlich und macht Einiges her. In Kombination mit dem responsive Grid-System von Bootstrap wird daraus ein echter Hingucker, egal auf welchem Endgerät.

Eine quadratische Kachelgalerie klingt im Prinzip recht einfach, doch die ersten Probleme tauchen auf, sobald die Bilder in verschieden Größen vorliegen (z.B. Hoch- oder Querformat). Man könnte natürlich alle Bilder auf eine gemeinsame Größe skalieren, wobei man aber Teile des Bildes verlieren wird.

Abhilfe schafft hier der CSS Befehl background-image.

#beispiel{
  background-image: url('...');
}

Auf diese Wiese wird ein Bild nicht per Image-Tag eingebunden, sondern über CSS als Hintergrundbild. Somit brauchen wir nur einen definierten Bereich, dem wir dieses Hintergrundbild geben können.

Aufbau

Kommen wir nun zum strukturellen Aufbau unserer Galerie. Als erstes Brauchen wir ein div, das uns als Container für die Galerie dient. Darin befinden sich die einzelnen Kacheln. Eine Kachel besteht aus einem div der Klasse .outerContent mit einem div der Klasse .innerContent darin. Damit die Bilder auch irgendwo hinführen wird die Klasse .innerContent von einem Anchor-Tag umschlossen. Ihr könnt den Klassen natürlich auch eigene Namen geben.

<div class="galery-container">
  <div class="outerContent">
    <a href="#" title="...">
      <div class="innerContent">
      </div>
    </a>
  </div> 
</div>

Der .outerContent

Das div mit der Klasse .outerContent bildet unsere eigentliche Kachel. Da wir unsere Galerie auch responsive machen wollen, implementieren wir Sie in das Gridsystem von Bootstrap. So basieren unsere Kachel auf dem “col-**” Grid System.

...
<div class="col-xs-4 col-sm-3 col-md-2 outerContent">
  <a href="#" title="...">
    <div class="innerContent">
    </div>
  </a>
</div> 
...

In diesem Fall hat unsere Kachel auf einem xs Display eine Breite von 4/12 (3 in einer Reihe), auf einem sm Display 3/12 (4 in einer Reihe) und ab einem md Display und größer 2/12 (6 in einer Reihe).

Da wir die Kacheln aber nicht untereinander sondern nebeneinander haben möchten, brauchen wir noch folgende CSS Befehle:

.outerContent{
  float: left;
  position: relative;
}

Damit wir nun ein Hintergrundbild anzeigen können, brauchen wir aber Größenangaben. Die Breite der Kachel wird ja durch die Klasse col-** definiert, aber wie sieht es mit der Höhe aus? Um eine Quadratische Kachel zu bekommen muss die Höhe gleich der Breite sein. Hier können wir einen CSS Kniff anwenden. Denn wenn man eine padding-Angabe in Prozent angibt errechnet sich diese immer aus der Breite (width) desselben Elements.

Ein Quadrat bekommen wir also mit folgenden CSS Befehlen:

.Quadrat{
  width: 25%;
  padding-bottom: 25%;
}

Beim responsive Grid System von Bootstrap wird die Breite der Kachel aber abhängig von der Bildschirmgröße verändert. Dies geschieht mit Hilfe von Media Queries. Das sind CSS Regeln die nur bei einer bestimmten Bildschirmgröße Anwendung finden.

Um immer ein Quadrat zu erhalten müssen wir also den padding-bottom Wert an den gleichen “Umbruchstellen” verändern, an denen sich auch die Breite der Kachel verändert.

CSS Klasse Breite (width) benötigte Höhe (padding-bottom)
.col-xs-4 33.33% 33.33%
.col-sm-3 25% 25%
.col-md-2 16.66% 16.66%

Per Media Queries verändert sich die Breite der Kachel bei folgenden Größen: xs gilt bis zu einer Größe von 767px, sm ab 768px und md ab 992px.

Damit sich nun unser padding-bottom-Wert gleichzeitig mit der width verändert, müssen wir nur eine entsprechende Media Query schreiben.

@media(max-width:767px){  
  .outerContent{
    padding-bottom: 33.33%;
  }
}
@media(min-width:768px){
  .outerContent{
    padding-bottom: 25%;
  }
}
@media(min-width:992px){  
  .outerContent{
    padding-bottom: 16.66%;
  }
}

Der .innerContent

Da wir jetzt die Höhe und die Breite der Kachel geklärt haben kommen wir nun zum div .innerContent, in welchem wir das Bild platzieren wollen. Der Grund warum es einen div .innerContent und einen div .outerContent gibt rührt daher, dass wir mit den Abständen der einzelnen Bilder zueinander und einem :hover Effekt sonst Probleme bekommen würden.

Das div .innerContent wird absolut im div .outerContent platziert und mit genauen Pixel-Angaben fixiert.

Danach werden alle Eigenschaften, die die Klassen .innerContent gemeinsam haben, in eine CSS Klasse geschrieben. Somit minimiert man den Code und nur der Dateipfad zum Bild muss als Style in das div geschrieben werden.

Folgende Eigenschaften muss die Klasse .innerContent haben:

  • .innerContent wird von jeder Seite aus 3px entfernt platziert
  • .innerContent hat einen hellgrauen Rand von einem Pixel.
  • Das Bild soll das div komplett ausfüllen
  • Das Bild soll sich nicht wiederholen
  • Das Bild soll vertikal und horizontal zentriert sein

Der fertige CSS-Code:

.innerContent{
  position: absolute;
  left: 3px;
  right:3px;
  top: 3px;
  bottom: 3px;
  border: 1px solid #d3d3d3;	
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;  
}

Das Bild, welches angezeigt werden soll wird nun direkt in das div.innerContent geschrieben:

<div class="innerContent" style="background-image: url('assets/img/beispiel.jpg')"></div>

Warum zwei divs?

Man kann eine quadratische Bildergalerie auch nur mit einem Div erstellen, jedoch reihen sich die Bilder dann nahtlos aneinander. Hätte jedes Bild eine Breite von 25%, könnte man keinen margin mehr einbauen, da sonst die 100% Gesamtbreite überschritten werden und das letzte Bild in eine neue Zeile rutscht. Also nutzen wir zwei divs. Die Klassen .outerContent reihen sich zwar auch nahtlos aneinander, doch die Klassen .innerContent sind im Inneren mit einem Abstand von 3 Pixeln platziert worden. Rechnet man nun noch den border drauf, hat man einen umlaufenden Abstand von 4 Pixeln.

Bootstrap quadratische Bildgallerie

Abbildung 1: Darstellung CSS-Klassen

Die gesamte Bildergalerie wird nun in einem div.gallery- container platziert. Dieser hat ein padding von 4 Pixeln. Somit ergibt sich ein Abstand von Kachel zu Kachel, sowie von Kachel zum Rand von 8 Pixel (siehe Bild).

.gallery-container{
  padding: 4px;
}

Noch eine Prise CSS

Damit das Ganze noch ein wenig schicker wird, geben wir noch ein Wenig CSS obendrauf. Und zwar soll das Bild, über dem wir den Mauszeiger haben einen blauen Rand bekommen. Dazu nutzen wir die CSS-Pseudoklasse :hover

.innerContent:hover{
  border-color: #4863a0;
  transition: 0.4s;    
}

Live Demo – quadratische Bildgalerie mit Bootstrap

Du möchtest regelmäßig mit interessanten Neuigkeiten zum Thema "Twitter Bootstrap" versorgt werden? Trag Dich in den Bootstrapaholic Newsletter ein. Wir versenden keinen Spam! Du kannst Dich jederzeit austragen.

Dieser Beitrag wurde unter Bootstrap Tutorials abgelegt am von .

4 Gedanken zu „Bootstrap Bildergalerie in Kachel-Optik

  1. Patrick H-N

    Guten Tag, klasse Ansatz!
    Ich habe probiert, dies zu adaptieren. Bei mir wird jedoch nur ein senkrechter Strich angezeigt. Mit Mouseover erscheint der Link zum Bild. Es lässt sich auch anklicken und damit öffnen. Nur fehlt mir die Minivorschau. Woran liegt das?

    Antworten
    1. Dominik Fingerle Artikelautor

      Hallo Patrick,
      werden bei dir die Bilder gar nicht angezeigt? Oft passieren ja kleine Leichtsinnsfehler wie z.B. im Bildpfad ;)

      Antworten
        1. Dominik Fingerle Artikelautor

          Guten Abend Patrick,
          ich glaube jetzt weiß ich was das Problem. Kann es sein, dass deine Seite noch auf Bootstrap 2 basiert. Sieht nämlich dem css nach so aus. In der Version 2 gibt es die Klassen col-xs, col-md, etc nicht, sondern erst ab der Dritten. Es kann also gar nicht gehen ;)

          Antworten

Hinterlasse einen Kommentar zu Patrick H-N Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>