5202

ein Blog über technische Fragen zu Blogger

Blogger: Fotos in Hoch- & Querformat auf gleiche Breite bringen

von
Ich wurde per Mail gefragt, wie man seinen Blogger-Fotos im Quer- und Hochformat die gleiche Breite geben kann - wobei natürlich die Skalierung beibehalten und die Bilder-Größen automatisch angepasst werden soll :=). Und das ganze soll sich auch auf alle Fotos im Blog nachträglich anwenden lassen. Ich muss zugeben, Bilder im Hoch.- wie Querformat die gleiche Breite zu geben hat schon was leicht ... hmhm ... verschrobenes? ... aber es soll ja nicht mir gefallen, sondern der Fragestellerin. Es ist auf jeden Fall ein interessantes Problem und ich denke ich hab's lösen können.

Beispiel

Um sich das ganze besser vorzustellen, habe ich zwei Links mit der Anpassung gebaut. Wie ihr seht, werden die Bilder gleich breit, bleiben aber trotzdem in ihrer ursprünglichen Länge/Breite (Skalierung). Auch bei 1000px Breite wirken die Bilder nicht verpixelt, weil ich die Größe der Bilder mit anpasse.


click 300px Breite
click 1000px Breite



Testblog

Vorneweg: Bitte probiert das zuerst in einem Test-Blog aus! Sichert die Vorlage eures Haupt-Blogs, bevor ihr irgendwelche Änderungen durchführt. Nehmt das ernst, ein Layout ist schnell zerschossen.

jQuery

Die Anpassung aller Blog-Fotos an eine bestimmte Breite geht nur mit Javascript - ich benütze das jQuery Framework dazu. Ich habe schon in diversen Posts beschrieben, wie ihr dieses Framework in eueren Blog einbauen könnt, ich wiederhole das jetzt an der Stelle nicht. Falls es irgendwelche Probleme damit gibt, meldet euch in den Kommentaren ...

Das Script

Ich gebe euch zuerst das Script, ich erkläre es danach noch genauer. Das Script kommt in ein HTML/Java Gadget und kann beliebig im Blog platziert werden, möglichst tief ist aber besser.
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
        var thisheight = $(this).attr('height');
         var thiswidth = $(this).attr('width');
         var ratio = thiswidth / thisheight;

         var newwidth = 100; // Hier die Breite der Bilder einsetzen
         var dimension = newwidth*2
         var newheight = newwidth* $(this).attr('ratio');

 $('.post-body .separator').find('img').each(function(n, image){
  var image = $(image);
 image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' +   dimension )});
  image.attr('width',newwidth);
  image.attr('height',newheight);
 });
});
//]]>
</script>
Anpassung
Die Breite eurer Bilder könnt ihr im Wert der Variablen var newwidth anpassen - "400" bedeutet, dass eure Bilder Hoch.- wie Querformat auf eine Breite von 400px kommen. Ich habe die Stelle auskommentiert, ihr könnt statt "400" jeden anderen Wert einsetzen, nur kann es bei Bilder größer als 1500px zu Problemen kommen - das liegt dann aber bei Blogger.
Die Klasse separator
Ihr müsst euch darüber klar sein, dass das Script in der obigen Version _alle_ eure Blog-Bilder auf die gleiche Breite bringt. Vielleicht ist das dem ein oder anderen doch a bisserl zuviel, deswegen eine Variante, wie ihr nur _bestimmte_ Bilder auswählen könnt, die das Script dann auf die gleiche Breite bringt.

Ihr geht dazu im Post-Editor auf "HTML bearbeiten" und schaut euch das HTML von euren Bildern an. Ein typisches Bild schaut so aus;
<div class="separator" style="clear: both; text-align: center;">
<a href="http://goo.gl/AKIuI" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="197" src="http://goo.gl/AKIuI" width="320" /></a></div>
Alle Bilder haben in Blogger die Klasse separator. Für die Bilder, die ihr auf die gleiche Breite bringen wollt, könnt ihr diese Klasse durch eine zweite Klasse target ergänzen, schaut dann so aus:
<div class="separator target" style="clear: both; text-align: center;">
<a href="http://goo.gl/AKIuI" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="197" src="http://goo.gl/AKIuI" width="320" /></a></div>
Das Script müsst ihr nun noch dementsprechend anpassen, statt nach der Klasse separator sortiert ihr nach der Klasse target
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
        var thisheight = $(this).attr('height');
         var thiswidth = $(this).attr('width');
         var ratio = thiswidth / thisheight;

         var newwidth = 100; // Hier die Breite der Bilder einsetzen
         var dimension = newwidth*2
         var newheight = newwidth* $(this).attr('ratio');

 $('.post-body .target').find('img').each(function(n, image){
  var image = $(image);
 image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' +   dimension )});
  image.attr('width',newwidth);
  image.attr('height',newheight);
 });
});
//]]>
</script>
Das ist alles, nicht besonders schwer, oder?

Kommentare

Nicht das was ihr sucht und funktionieren tut es auch nicht? Fragt in den Kommentaren nach, meistens lässt sich der Fehler schnell finden. Alles funktioniert und es ist genau das, was ihr gesucht habt? Könnt ihr natürlich auch ein Kommentar hinterlassen ...