5202

ein Blog über technische Fragen zu Blogger

Bilder auf der Startseite beliebig verkleinern

von
Eine Leserin wollte im Anschluss zu dem Post Profilfoto beliebig vergrößern wissen, ob man Bilder auch nur auf der Startseite verkleinern kann - etwa um sie vor einem 'Jump-Break' optisch besser anzupassen. Ein 'sehr großes' Bild und ein sehr kurzer Text vor einem Jump-Break schauen nicht besonders schön aus.

Probleme
Um es kurz zu machen - ja das geht natürlich (so wie eigentlich alles 'geht', was auch immer ihr euch vorstellt) dabei ergeben sich aber verschiedene Schwierigkeiten. Das erste ist, Bilder haben normalerweise unterschiedliche Proportionen (Länge zu Breite) und die sollten in der 'Verkleinerung' natürlich erhalten bleiben, ansonsten schauen sie 'verzerrt' aus. Dann ist die Länge des Teaser's (d.h. des Textes vor dem 'Jump-Break') nicht immer gleich lang. Mal möchte ihr nur ein paar Worte machen, mal drei Sätze. Drittens - wollt ihr vielleicht mehr als nur ein Bild auf der Startseite haben?
Auto Jump-Break
Alles in allem ist das also ein kniffeliges Problem, über das natürlich schon andere nachgedacht haben. Die einzige bisher funktionierende Lösung ist vom genialen Blogger Greenlava mithilfe eines Auto-Jump-Breaks. Alle andere Lösungen, die ihr im Internet findet, sind nur von ihm abgeschrieben. Wenn ihr euch für so etwas interessiert, könnt ihr euch es ja mal anschauen, vielleicht ist das was für euch. Die Greenlava-Lösung ist gut, aber in meinen Augen nicht ganz befriedigend, weil im Endeffekt alle Posts vor dem 'Jump-Break' monoton gleich ausschauen. Ich habe deswegen etwas völlig neues entworfen und in meinem Post werde ich beschreiben, wie ihr jedes Bild vor einem frei gewähltem Jump-Break automatisch proportional verkleinert bekommt.

Beispiel

Damit ihr euch das besser vorstellen könnt, habe ich ein Beispiel-Blog gebaut. Ihr seht, dass ihr Text vor oder nach dem Bild stellen könnt, dass ihr zwei Bilder oder mehr posten könnt, dass ihr die Länge des Textes vor dem 'Jump-Break' frei bestimmen könnt und vieles mehr. Im Unterschied sind bei der Lösung von Greenlava alle Posts immer gleich lang, es ist nur ein Bild möglich, das Bild steht immer am Anfang vom Text usw. Seine Lösung schaut wohl 'ordentlicher' aus, meine Lösung lockert den Weißraum vom Blog mehr auf. Ist im Endeffekt Geschmackssache.

Test-Blog benützen

Testet das bitte zuerst in einem Test-Blog, nicht in eurem Haupt-Blog. Macht außerdem eine Sicherung eures Haupt-Blogs, falls ihr das tatsächlich 'produktiv' einsetzt.

Vorbereitung

Für den Hack benütze ich jQuery - falls ihr das noch nicht habt, müsst ihr das Framework in euren Blog einbinden. Falls ihr das Framework schon benützt, könnt ihr diesen Punkt überspringen - aber: Überprüft bitte, ob ihr das Script an der richtigen Stelle eingebaut habt, nämlich direkt _vor_ dem </head> Tag. Für das Script ist es in diesem Fall tatsächlich entscheidend, das ihr die richtige Stelle erwischt.
jQuery-Framework
Zum einbinden sucht ihr in eurem HTML-Code den </head> Tag. Beachtet bitte die _genaue_ Schreibweise.

Der </head> Tag
Direkt _vor_ dem Tag setzt ihr das Script für das Framework ein:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" 
type="text/javascript">
</script>

jQuery Framework vor </head> Tag
Erweiterung des Body Tags
Neben dem jQuery Framework benütze ich in diesem Tutorial noch die erweiterte Attribution des Body-Tags - es gilt das gleiche wie beim Framework, falls ihr das schon benützt, könnt ihr diesen Punkt überspringen.

Ansonsten sucht ihr euren Body Tag:
<body expr:class='&quot;loading&quot;  + data:blog.mobileClass'>
und schreibt ihn so um:
<body expr:class='&quot;loading&quot;  + data:blog.mobileClass +  &quot; &quot;  + data:blog.pageType'>
Das ist alles an Vorbereitung, jetzt geht's zum eigentlichen Script.

Script

Das ist mein Script - wer sich dafür interessiert, ich hab's auskommentiert:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {

/*   Die aktuelle Höhe und
            Breite des Bildes wird ausgelesen */
        var thisheight = $(this).attr('height');
        var thiswidth = $(this).attr('width');

/*  Das Seitenverhältnis
            des Bildes wird bestimmt */
            var ratio = thiswidth / thisheight;

/*  Die neue Höhe des Bildes wird gesetzt
            die Breite wird berechnet */
        var newheight = 100; // Hier die neue Höhe des Bildes einsetzen
        var newwidth = newheight * $(this).attr('ratio');

 /*  Die neue Höhe/Breite wird
              in den <img> Tag geschrieben*/
 $('.index .post-body').find('img').each(function(n, image){
  var image = $(image);
  image.attr('width',newwidth);
  image.attr('height',newheight);
 });
});
//]]>
</script>
Weitere Erklärung
Mein Script arbeitet sehr simpel. Es liest im ersten Schritt von jedem Bild die Länge und Breite aus. Im zweiten Schritt wird aus diesen beiden Werten das Seitenverhältnis bestimmt. Danach wird die 'neue' Höhe des Bildes als Wert bestimmt (den müsst ihr einsetzen!) - die Breite des Bildes wird als proportionaler Wert aus dem Seitenverhältnis vom zweiten Schritt berechnet. Am Ende schreibe ich die neuen Höhe und Breite als Style Anweisung direkt in den img Tag. Fertig! Ich bin echt nicht der Held in jQuery, falls jemand eine noch einfachere Lösung kennt, würde mich das interessieren!
Anpassen
Ihr könnt die _Höhe_ eures 'verkleinerten Bildes in diesem Wert anpassen:
var newheight = 100; // Hier die neue Höhe des Bildes einsetzen
Der Wert "100" entspricht 100px. Ihr könnt hier jeden beliebigen Wert eintragen, nur muss er _kleiner_ sein als die ursprüngliche Höhe (ansonsten würde das ganze ja eh keinen Sinn machen ...).
Einbau
Kommen wir zum Einbau dieses Scripts - das ist kniffelig, weil es genau an die richtige Stelle muss und zwar _vor_ dem </head> Tag und _hinter_ dem Javascript-Framework. Ihr sucht noch einmal in eurem HTML-Code den </head> Tag - direkt darüber kommt das Script.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {

/*   Die aktuelle Höhe und
            Breite des Bildes wird ausgelesen */
        var thisheight = $(this).attr('height');
        var thiswidth = $(this).attr('width');

/*  Das Seitenverhältnis
            des Bildes wird bestimmt */
            var ratio = thiswidth / thisheight;

/*  Die neue Höhe des Bildes wird gesetzt
            die Breite wird berechnet */
        var newheight = 100; // Hier die neue Höhe des Bildes einsetzen
        var newwidth = newheight * $(this).attr('ratio');

 /*  Die neue Höhe/Breite wird
              in den <img> Tag geschrieben*/
 $('.index .post-body').find('img').each(function(n, image){
  var image = $(image);
  image.attr('width',newwidth);
  image.attr('height',newheight);
 });
});
//]]>
</script>
Alles zusammen sollte danach so ausschauen:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {

/*  Liest die aktuelle Höhe und
            Breite des Bildes aus */
        var thisheight = $(this).attr('height');
        var thiswidth = $(this).attr('width');

/*  Das Seitenverhältnis
            des Bildes wird bestimmt */
            var ratio = thiswidth / thisheight;

/*  Die neue Höhe des Bildes wird gesetzt
            die Breite wird berechnet */
        var newheight = 100; // Hier die neue Höhe des Bildes einsetzen
        var newwidth = newheight * $(this).attr('ratio');

 /*  Die neue Höhe/breite des Bildes werden
              in den img Tag geschrieben*/
 $('.index .post-body').find('img').each(function(n, image){
  var image = $(image);
  image.attr('width',newwidth);
  image.attr('height',newheight);
 });
});
//]]>
</script>
  </head>
Zuerst kommt das Framework, dann kommt das Script und als letztes der </head> Tag. Ihr könnt das mit einem Bild auf der Startseite testen, wenn ihr alles richtig gemacht habt, werden alle Post-Bilder auf der Startseite auf 100px Höhe verkleinert.

CSS Anpassung

Passen wir die Bilder auf der Startseite noch a bisserl an. Der Code kommt immer in den Vorlagen-Designer > CSS hinzufügen > hinter der letzten geschweiften Klammer } der letzten Zeile auf die Taste 'Eingabe' drücken und ihr seht die Vorschau.

Alle Bilder sollen auf der Startseite nach links, der Text 'recht' umfließend:
.index .post-body img { float: left}
Und umgekehrt:
.index .post-body img { float: right}
Ihr wollt zwischen Bild und Text noch einen kleinen Abstand:

Für Bild links:
.index .post-body img {float: left; margin: 0 10px 10px 0}
Für Bild rechts:
.index .post-body img {float: right; margin: 0 0 10px 10px}
Den Jump-Link a bisserl aufbretzeln:
.jump-link {text-align: right; font-size: 2.5em}
usw. In dem Bereich ist so viel möglich, falls ihr konkrete Wünsche für eine bestimmte Gestaltung habt, fragt einfach in den Kommentaren nach.

Posten

Ab jetzt werden alle Bilder auf der Startseite auf die gewählte Größe verkleinert. Ihr müsst euch also überlegen, ob ihr das wirklich wollt. Es gäbe auch die Möglichkeit, dass nur bestimmte Fotos verkleinert werden - falls das jemand will, kann ich es auch noch beschreiben. Ihr könnt nun ganz normal posten, ihr setzt den Jump-Break wo immer ihr wollt, eure Bilder werden auf der Startseite 'verkleinert' dargestellt, im Post selber wie gewohnt.

Nix funktioniert

Das ist eine sehr komplizierte Arbeit - falls was nicht klappt und ihr den Fehler nicht findet, hinterlasst _hier_ einen Post; nicht im Blogger-Hilfe-Forum oder sonst wo, die werden damit nichts anfangen können. Ich wünsch euch auf jeden Fall viel Erfolg!