5202

ein Blog über technische Fragen zu Blogger

Blogger: In 30s eine Bilder-Galerie erstellen

von

Heads up! Ich habe das Script weiterentwickelt!

Update: Ein Fehler in der Regex, der dazu geführt hat, dass in der Galerie 'leere' Platzhalter statt Bilder angezeigt werden, wurde behoben.

Der Blogger-Editor hat leider kein eigenes Tool, um Bilder nebeneinander in Galerie-Form anzuordnen. Da ist Tumblr Blogger weit voraus.

Ich habe immer wieder erlebt, wie schwierig es für Leute ist, die in HTML nicht sehr erfahren sind, auch nur zwei Bilder mit Tabellen oder CSS nebeneinander zu stellen.

Als grundsätzliche Lösung für das Problem habe ich jetzt ein kleines Script geschrieben, mit dem ihr in ein paar Sekunden im Blogger-Editor beliebigen viele Galerien in jeder gewünschten Form bauen könnt: Anzahl der Bilder, Anzahl der Spalten, Bildformat ... alles ist frei wählbar!

So sieht das ganze aus:

Der Hintergrund

Bilder landen bei Blogger standardmässig auf G+ beziehungsweise Picasa. Gegenüber anderen Hostern hat G+ den großen Vorteil, dass ihr innerhalb des Bild-Link mit Attributen das Bild manipulieren könnt. Seit neuestem könnt ihr etwa das Bild zuschneiden und verzerrungsfrei skalieren.

Diese Attribute im Picasa-Link hatten früher den Wert s - im Link schaut das so aus:

https://lh4.googleusercontent.com/-WOPS7HqNdk8/UGivXwoQGjI/AAAAAAAAC5E/J2Eyl2R-fNY/s100/1280px-Die_Bauernhochzeit-2.jpeg

Diesen s Wert könnt ihr nun durch einen h und einen w Wert ersetzen- etwa so:

https://lh4.googleusercontent.com/-WOPS7HqNdk8/UGivXwoQGjI/AAAAAAAAC5E/J2Eyl2R-fNY/w100-s700-no/1280px-Die_Bauernhochzeit-2.jpeg

Ihr könnt beide Links ausprobieren - sie führen zum identisch Bild:

Bild mit h/w Attribut

Bild mit s Attribut

Durch's manipulieren dieses Links bauen wir nun auf sehr einfache Art & Weise eine Bilder-Galerie. Die eigentliche Arbeit nimmt euch ein Script im Hintergrund ab. Ihr müsst nur noch bestimmen, wie die Galerie aufgebaut sein soll.

Arbeitsschritte

Heads up! Das Script funktioniert vorerst nur in Blogger-Templates mit Bildern aus Picasa oder G+!

Einbau des Scripts

Ihr müsst zunächst das Script an der richtigen Stelle einbauen. Dazu sucht ihr in eurem Blog diesen schließenden Tag:

</body>

Schaut genau - ihr findet diesen Tag sehr tief in eurem Layout.

Direkt _darüber_ baut ihr dieses Script ein:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 var s_attribut = /\/s\B\d{2,4}/;
 var w_attribut = /\/w\B\d{2,4}/;
 var h_attribut = /\/h\B\d{2,4}/;
 var wh_attribut = /[wh]\B\d{2,4}/;
 var post_width = $('.post-body').width()

$('.gallery .separator, .gallery .separator a').removeAttr("style");
$('.gallery .separator').next('br').remove();
$('.gallery .separator img').css({
      "padding": "2px",
      "border": "none",
      "float": "left",
      "-moz-box-sizing": "border-box", 
        "box-sizing": "border-box",
   "-webkit-box-shadow": "0 0 0 rgba(0, 0, 0, 0)",
      "-moz-box-shadow": "0 0 0 rgba(0, 0, 0, 0)",
           "box-shadow": "0 0 0 rgba(0, 0, 0, 0)",
    });
$( '.gallery' ).append( "<div style='clear:both' />" );
$('.gallery').find('br').each(function(){
 $(this).remove()
});
$('.post').find('.gallery').each(function(){
 var thiswidth = $(this).data('ratio-width');
 var thisheight = $(this).data('ratio-height');
 var ratio = thiswidth / thisheight;
 var thiscol = $(this).data('col');
 var newwidth = Math.floor(post_width / thiscol);
 var newheight = Math.floor(newwidth * ratio);
 
  $(this).find('img').each(function(n, image){
   var image = $(image);
   image.attr({src : image.attr('src').replace(s_attribut,'/' + 'w' + newwidth + '-h' + newheight + '-c')});
   image.attr('width',newwidth);
   image.attr('height',newheight);
  });
 });
});
//]]>
</script>
  

Damit seid ihr fertig mit dem Code!

Der Editor

Ihr könnt nun in euren Blogger Editor gehen. Probiert die Galerie am besten zuerst in einem neuen Post oder neuen statischen Seite aus.

Wählt als erstes alle Bilder aus, die in die Galerie sollen. Es ist dabei egal, wie groß die Bilder sind, ob Hoch.- oder Querformat oder sonst was.

Heads up! Das Script funktioniert vorerst nur mit Bildern ohne Untertitel!

Wenn ihr alle Bilder in dem Post/Seite drin habt, wechselt ihr im Editor vom 'Verfassen' auf den 'HTML' Modus

DATA Attribut schreiben

Ihr braucht jetzt nur noch eine DATA-Attribut für die Galerie schreiben. Dort legt ihr fest, wie viele Spalten die Galerie haben soll, wie groß die Bildern sein sollen und so weiter. Dazu schreibt ihr in die erste Zeile vor jedem Code diesen Tag:

<div class="gallery" data-col="3" data-ratio-height="4" data-ratio-width="3">

Dabei gibt data-col die Anzahl der Spalten und data-ratio-height beziehungsweise data-ratio-width das Verhältnis von Höhe zur Breite der einzelnen Bilder in der Galerie an. Eure ursprünglichen Bilder werden dabei in diesem Verhältnis ausgeschnitten und verzerrungsfrei skaliert.

Probiert verschiedene [ganzzahlige] Werte aus - auf dem Beispiel-Blog habe ich für die Galerien Seitenverhältnisse und Spaltenanzahl mit dazu geschrieben.

Als letztes müsst ihr das DATA Attribut noch schließen, indem ihr hinter der letzten Zeile im Editor das schließende Tag einsetzt:

</div>

Heads up! Ich kann euch bei Bedarf weitere DATA Attribute geben - etwa der Abstand der Bilder untereinander!

Fertig! Veröffentlich nun den Post und seht euch das Ergebnis an - wollt ihr etwas ändern, schreibt die entsprechenden DATA Attribute um!

Wie bekomme ich verschiedene Galerien in einen Post?

Ihr habt jetzt den Code für eine Galerie! Ich empfehle euch, den Code so wie er ist per c/p an die entsprechende Stelle in der HTML-Ansicht vom Blogger Editor in eurem Post/Seite zu kopieren. Wenn ihr eine zweite Galerie in dem gleichen Post haben wollt, dann baut eben das ganze neu auf und kopiert den zweiten Code rein.

Was ihr - zumindest am Anfang - nicht machen solltet, ist die Galerie direkt in einem Post mit viel Text, Bilder o.ä zu bauen. Bei dem vielem Code könnt ihr schnell die Übersicht verlieren ...

Was kann das Script?

Das Script füllt die Post-Breite zu 100% mit Bildern aus. Ihr könnt eure Post-Breite nachträglich ändern - das Script berechnet die Bild-Größe neu.

Ihr könnt innerhalb eines Post verschiedene Galerien benützen. Jede Galerie kann dabei unterschiedliche DATA Attribute besitzen.

Das Script funktioniert in allen Blogger-Layouts und ist unabhängig davon, was ihr an eigener CSS im Blog habt.

Wie schnell kann ich damit eine Galerie bauen?

In 30s :D. Zumindest ging das so schnell auf meinem Beispiel-Blog!

Wie geht es weiter?

Probiert das ganze erst mal aus. Ich habe über so ein Script schon lange nachgedacht und ich denke, es ist sehr nützlich. Meldet euch, wenn ihr Wünsche und Vorstellungen habt und ich werde sehen, was ich davon umsetzen kann. Falls es Probleme oder Fehler mit dem Script gibt, würde ich mich über eine Meldung sehr freuen!