5202

ein Blog über technische Fragen zu Blogger

Bilder automatisch auf 100% Postbreite bringen

von

Update! Ich habe das Script in nativem Javascript neu & besser geschrieben!

Ich bin immer mehr davon überzeugt, dass Bilder auf 100% Postbreite einem Blog ein professionelleres Gesicht geben.

Grundsätzlich könnt ihr in einem Blogger Blog kein Bild auf exakt 100% Postbreite bringen, ohne es händisch anzupassen. Das liegt einerseits an einem Attributen innerhalb des img Tags, andererseits daran, dass wenn ihr Bilder vergrößert ohne die Auflösung anzupassen, diese pixelig werden. Jedes Bild im Blog einzeln umzuschreiben ist natürlich nicht so prickelnd - ich denke ein Script ist die bessere Option.

Ich habe dazu so ein Script geschrieben, dass in jedem Blogger Standardlayout alle drei Bildtypen [mit und ohne Untertitel + Bilder aus der HTML-Ansicht vom Editor] automatisch auf 100% Breite bringt.

Praktisch sieht das ganze so aus - beachtet, dass die Bilder im Original nur 10px groß sind [sic!]:

Das Script

Die Idee dahinter geht auf David Kutcher zurück. Danke für die inspirierende Arbeit!

Mein Ziel war, ein Script für alle Bildtypen aus dem Blogger Editor und allen Browser zu schreiben. Das Script ist getestet und funktioniert in FF, Chrome, Opera, Safari und Internet-Explorer8/9/10/11. Es funktioniert außerdem unter Android und iOS. Ihr findet das Script in diesem Gist

Anwendung

Die Anwendung ist denkbar simpel. Ihr kopiert das Script aus dem Gist und legt es direkt _über_ den schließenden </body> Tag [ziemlich tief!] von eurem Layout. Fertig! Der Rest macht das Script.

Falls ihr auch auf eurer mobilen Vorlage Bilder auf 100% Postbreite wollt, müsst ihr im Dashboard unter Vorlage > Mobile Vorlage auswählen die Option Benutzerdefiniert wählen. Danach wird euer Blog auf mobilen Geräten genauso angezeigt wie jetzt, nur dass alle Bilder exakt 100% Postbreite haben ... sowohl im Hoch.- wie Querformat. Die Bilder werden dabe übrigens runterskaliert, d.h. ihr müsst euch keine Sorgen um die Bandbreite machen.

Fehler, Probleme, Fragen

Ich versuche dieses Script so Fehlerfrei wie möglich zu halten. Falls ihr es also einsetzt und ihr ein Darstellungsprobleme habt, irgendetwas nicht wie erwartet funktioniert oder ihr Fragen dazu habt, würde ich mich über eine Rückmeldung freuen!