Ich werde in regelmässigen Abständen mit dem Thema Galerie bei WordPress konfrontiert. Es gibt dazu zwar tausende von Plugins, aber viele Plugins sind so unnütz übersichtlich und aufgebläht programmiert worden, dass es die WP Installation unübersichtlich und oder langsam macht.

Heute möchte ich euch mal zeigen, dass es eigentlich gar nicht so schwer ist eine eigene Galerie mit reinem CSS zu erstellen. Und zwar habe ich hier ein Masonry Beispiel (Keine Ahnung wie man das korrekt ausspricht 😉) ausgesucht. Eine Masonry Galerie ist nichts weiteres eine Galerie wo Bilder dynamisch aneinander gereiht werden die auch unterschiedlich gross sein dürfen – so richtig à la Mauer.

Ihr denkt jetzt dass dies furchtbar kompliziert ist, aber nein – es ist sehr einfach und kann eigentlich jeder einbauen.

Video / Anleitung

HTML

Wie man sehen kann der HTML Bereich ist sehr einfach aufgebaut. Man hat einen Obercontainer „Masonryholder“ und darin sind dann die Bilder als eigene Klasse definiert. Wie man sehen kann, gibts sogar die Möglichkeit einen eigenen Text zu jedem Bild zu schreiben – da empfehle ich dann diesen Text als eigene Div Class zu verpacken, dann kann man sie nämlich selbst stylen.

Aus diesem Grund habe ich für euch noch die Grössen der Media Queries rausgesucht wie man sie als Standard definiert hat

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {…}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {…}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {…}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {…}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {…}

Hier aber nun der HTML Code für diese Masonry Galerie. Ihr seht ihr könnt eigentlich so viele Bilder reinpacken wie ihr wollt – es gibt nur etwas was euch stoppen wird – und zwar die Scrollzeit 🙂 Es gibt ja nichts schlimmeres sich zu Tode zu scrollen wenn man eine Webseite auf dem Smartphone betrachtet….

1
2
3
4
5
6

<div class="masonryholder">
   <div class="masonryblocks"><img src="bild1.jpg">Text</div>
   <div class="masonryblocks"><img src="bild2.jpg"></div>
   <div class="masonryblocks"><img src="bild3.jpg"></div>
   ...
</div>

CSS

Wie ihr sehen könnt die maximale Breite der Galery liegt bei 1600px und zu dem wurden die Media Querys angepasst. Wenn ihr jetzt aber lieber andere Grössen haben möchtet, dann müsst ihr die max-width und die Media Queries anpassen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

.masonryholder{
    column-count: 4;
    column-gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    }
 
  .masonryblocks{
    display: inline-block;
    background: #D2D2D2;
    padding: 20px;
    margin: 0 0 20px;
    width: 100%;
    box-sizing: border-box;
    }
 
  .masonryblocks img{
    width: 100%;
    }
 
  @media screen and (max-width:768px){
    .masonryholder{
      column-count: 1;
    }
    }
 
  @media screen and (min-width:769px){
    .masonryholder{
      column-count: 2;
    }
    }
 
  @media screen and (min-width:1080px){
    .masonryholder{
      column-count: 3;
    }
    }
 
  @media screen and (min-width:1200px){
    .masonryholder{
      column-count: 4;
    }
    }