5202

ein Blog über technische Fragen zu Blogger

Update: Bilder-Galerie für Blogger

von

Wer sich noch erinnert - vor einiger Zeit hatte ich ein Script für eine Bilder-Galerie vorgestellt. Seither gab's einige Rückmeldungen, was zu verbessern wäre. Ich habe mir natürlich selber auch Gedanken gemacht und letztlich das ganze Script neu geschrieben.

Die größten Änderungen zum ursprünglichen Script sind, dass ihr aus dem Blogger Editor heraus jetzt jede Art von Bilder zu einer Galerie verarbeiten könnt, dass bei den Bildern das Verhältnis Länge zu Breite erhalten bleibt und das sich die Abstände der Bilder untereinander definieren lassen.

Wie das letztlich ausschaut, seht ihr in der Demo:

Was kann das Script?

Heads up! Falls ihr ein Grid-Layout mit allen möglichen Features sucht, seit ihr hier falsch. Schaut euch Masonry an.

Die Idee hinter dem Script ist, dass ihr damit etwas habt, mit dem ihr schnell & simpel aus dem Blogger-Editor heraus eine Galerie mit Bildern erstellen könnt. Prinzipiell würdet ihr das auch mit CSS und ein bisschen rumgefummel hinbekommen. Nur: Viele überfordert das massiv. Andere haben keine Lust, tagelang HTML-Tabellen zu bauen.

Das Script ordnet euch Bilder in Kolumnen an. Diese Kolumnen füllen innerhalb eines Posts 100% der verfügbaren Breite aus. Ihr könnt die Anzahl der Kolumnen und den Abstand der Bilder frei bestimmen. Die Bilder selber behalten dabei ihr ursprüngliches Verhältnis von Länge zu Breite.

Im Unterschied zur ersten Fassung, verarbeitet das Script jetzt alle Arten von Bilder - was meint das genau?

Bilder im Blogger Editor

Wenn ihr einen Blog-Post verfasst, habt ihr mit dem Blogger Editor zwei Möglichkeiten, Bilder in euren Posts zu bekommen, nämlich einmal in der HTML-Ansicht und einmal im Verfassen-Modus. Ihr greift mit dem Editor zwar auf die gleichen Bilder zu, im Post selber unterscheiden sie sich aber in ihrer HTML-Struktur.

Die Bilder im Verfassen-Modus könnt ihr außerdem mit und ohne Untertitel veröffentlich. In HTML ausgedrückt schaut das ganze so aus:

Verfassen-Modus ohne Untertitel

<div class="separator" style="clear: both; text-align: center;">
    <a href="http://bild.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">        
        <img border="0" src="http://bild.jpg" />
    </a>
</div> 

Verfassen-Modus mit Untertitel

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;">
    <tbody>
        <tr>
            <td style="text-align: center;">
                <a href="http://bild.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;">
                    <img border="0" src="http://bild.jpg" height="320" width="240" />
                </a>
            </td>
        </tr>
        <tr>
            <td class="tr-caption" style="text-align: center;">Bild
            </td>
        </tr>
     </tbody>
</table>

HTML-Ansicht

<a href="http://bild.jpg" imageanchor="1" >
    <img border="0" src="http://billd.jpg" />
</a>

Ohne tiefer auf die HTML einzugehen, sollte allein von der Struktur der Tags her klar sein, dass der Blogger-Editor ziemlich unterschiedliche Ansätze verfolgt. Die Bilder mit Untertitel werden etwa in eine HTML-Tabelle eingefasst, in der HTML-Ansicht bekommen die Bilder dagegen überhaupt kein Markup.

Ich habe mich deswegen in der ursprünglichen Fassung des Posts nur auf Bilder im Verfassen-Modus ohne Untertitel beschränkt ... mit dem Ergebnis, dass viele unbedingt Untertitel wollten und das hat dann nicht geklappt. Jetzt ist es so, dass ihr jede Art von Bilder verwenden könnt, auch gemischt, dass Script kommt damit zurecht.

Was kann das Script nicht?

Das Script arbeitet nur in richtigen Browsern. In Asbach-Uralt Browsern wie IE9- macht es gar nichts, d.h. dort werden die Bilder ganz normal eins unter dem anderen angezeigt. Außerdem funktioniert das Script nur mit Bildern aus Picasa oder Google Fotos. Bilder, die woanders gehostet werden, bleiben unbearbeitet.

Die Idee hinter dem Script war eine simple Lösung für Blogger und keine Universal-Galerie für alle möglichen Plattformen!

Wie bringt ihr das Script zum laufen?

Das Script findet ihr in einem Gist. Sucht in eurem Blog diesen schließenden Tag und kopiert das Script direkt über diesen Tag:

</body>

Fertig!

Wie wendet ihr das Script an?

Probiert das Script am besten in einem neuen Post aus. Öffnet den Editor und sucht alle Bilder aus, die in die Galerie sollen. Es ist dabei egal, wie groß die Bilder sind und wo ihr sie platziert. Wenn ihr wollt, könnt ihr euren Bildern durch anklicken Untertitel geben.

Wenn ihr fertig seid, wechselt ihr in den HTML-Modus vom Editor. Vor den Code schreibt ihr ein DATA-Attribut - Beispiel:

<div class="gallery" data-col="3" data-padding="4">

Ganz am Ende vom Code schließt ihr das Attribut:

</div>

Dabei bedeutet die Werte von data-col die Anzahl der Kolumnen und von data-padding der Abstand der Bilder untereinander in Pixel. Probiert verschiedene Werte und seht, was sie bewirken.

Wie bekommt ihr verschiedene Galerien in einen Post?

Ihr habt jetzt den Code für eine Galerie! Kopiert diesen Code in einen Post oder statische Seite in der HTML-Ansicht vom Editor. Wollt ihr eine zweite Galerie im gleichen Post, dann baut eine neue Galerie in einem separaten Post und kopiert sie. Baut keine Galerie direkt in einem Post mit viel Text oder Bildern. Ihr könntet in zu viel Code schnell die Übersicht verlieren.

Wie geht es weiter?

Mir ist klar, dass hier auf 5202 gerade wenig neues kommt. Das liegt weniger an meiner mangelnden Lust zu schreiben, vielmehr an meinem zunehmend kritischeren Gefühl zur Qualität der Posts. Inzwischen arbeite ich lieber lange an einer Idee, die dann wirklich funktioniert und von der ich denke, dass sie für viele Blogger nützlich ist, als schnell mal etwas einfach so zu veröffentlichen.

Ich habe diese Galerie unter anderem für ein Layout geschrieben, dass mir schon längere Zeit im Kopf rum geht. Der nächste Post wird über eine Off-Canvas Navigation für dieses Layout gehen und dann wird das Layout selber kommen ... es geht also auf jeden Fall weiter, ich kann nur nicht versprechen, wie schnell es gehen wird.