Mehrere Bilder im Tumblr-Style einbinden [Tutorial]

Heute hab ich für die (wenn auch nur ein bisschen?) HTML-Begeisterten wieder was Feines. Irgendjemandem da draußen ist es wahrscheinlich gar nicht recht wenn ich mehr Code-Schmarrn als Büchriges poste, aber ich möchte mich bezüglich des Blogthemas sowieso nicht ganz festlegen. Außerdem wirds total cool und ziemlich simpel, ich versprechs! Ich hab diese Methode mal gewählt um einen langen (Laber-)Post mit ein paar Bildern aufzulockern. Außerdem ist es mal eine andere Art der Bilddarstellung und schaut interessant aus :) Danke an den genialen Oliver der das Skript geschrieben hat, ich bin hier ja nur fürs Einbinden zuständig!
©We♥It

• 
• 
• 
• 
• 
• 
• 
• 
• 

Als erstes bestimmt ihr, wie viele und welche Bilder ihr darstellen wollt. Das macht ihr direkt im Post im HTML-Modus. Im Beispiel sind bereits 6 Bildcodes gegeben, bei denen ihr nur noch die URL einfügen müsst. Ihr könnt aber natürlich auch mehr oder weniger als 6 Bilder nehmen ;)


<div id="container"> <ul id="content"> <li><img src="URL DES BILDES" style="width: 233px;" /></li> <li><img src="URL DES BILDES" style="width: 233px;" /></li> <li><img src="URL DES BILDES" style="width: 233px;" /></li> <li><img src="URL DES BILDES" style="width: 233px;" /></li> <li><img src="URL DES BILDES" style="width: 233px;" /></li> <li><img src="URL DES BILDES" style="width: 233px;" /></li> </ul> </div>




Ich weiß, dass das Ergebnis bis jetzt katastrophal aussieht, aber das ändern wir nun unter Vorlage → Anpassen → Erweitert → CSS hinzufügen. Dort fügt ihr folgenen Code ein.

/* You have to overwrite some Blogger CSS */ .post-body #content img, .Image #content img { border: 0; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; background: transparent !important; padding: 2px; } #content img { width: 233px; } /* Columne Style */ #content { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 4px; -moz-column-gap: 4px; column-gap: 4px; width: 700px; font-size: 0 !important; line-height: 0 !important; } #container { width: 700px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0 auto; }



Im Prinzip ist man jetzt fertig! Wenn ihr alles gespeichert und aktualisiert habt, solltet ihr jetzt eine Tumblr-Galerie mit drei Spalten haben. Die geht natürlich auch anpassen - auf zwei oder vier Spalten zum Beispiel. Dazu muss man allerdings den Code ein wenig umschreiben, damit die Bildbreite mit der Postbereichbreite übereinstimmt und der ganze Käse. Zum Beispiel: Mein nutzbarer Postbereich ist etwa 700px breit, wenn ich drei Spalten will sollte ein Bild also 233px breit sein. Bei zwei Spalten wären das 350px. Wenn man die Zahlen hat, kann man die wie folgt im Code anpassen:

Wie breit soll die Galerie insgesamt sein? Kann man sich ungefähr ausrechnen mit Vorlage → Anpassen → Breite anpassen, gesamte Breite minus der Sidebar und dann noch minus 100px, damit die Galerie nicht ganz so an den Rand gequetscht wird. Bei mir wäre die optimale Größe 700px - also eure Zahl statt der 700 einfügen (2 Stellen)!

Wie viele Spalten soll die Galerie haben? Empfehlen würde ich spontan entweder 2, 3, oder 4. Die 3 unter # content { müsst ihr dadurch ersetzen.

Wie breit muss ein Bild sein? Geht wie gesagt ganz leicht ausrechnen indem ihr die Breite der Galerie durch die Spalten dividiert. Dafür ersetzt ihr 233 (auch in Schritt 1) durch eure Zahl.

Das ist vielleicht etwas flapsig erklärt, aber wenn ihr das einmal verstanden habt, steht euch in eurem Leben nichts mehr im Weg :D Wenn es zu diesem Schritt noch Fragen gibt helf ich euch gerne. Und zu den vorherigen Schritten natürlich auch!