Mittwoch, 12. August 2009

Blogger.com: Größe und Auflösung für hochgeladene Bilder anpassen

Zur besseren Ansicht für den Leser ändere ich in der Regel bei Bilder die in ein Blog-Post eingebunden sind, einige Werte im Rückgabe-Code von Blogger:
  • die Bildgrösse
  • die Auflösung
  • ALT-Text zum Bild hinzufügen
Nachfolgendes Bild nach dem Upload im Originalzustand (ich habe als Bildgröße "Groß" als Standard eingestellt):


Um die Änderungen vorzunehmen, gehe ich nach dem Bilder-Upload im Blog-Editor auf den Tab-Reiter "HTML bearbeiten".
Der Code für das hochgeladene Bild sieht so aus (wer über draft.Blogger.com reingeht, hat einen anderen Code).
Die Stellen an denen ich Änderungen vornehme sind Fett markiert:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkmlfJjyF7kQwBqs8MUwHxDGJmBU569lbvX6mad6Lkto2xWI94LEj7jnY7Pd8a0fQA_bwEli4FP5LeO69TICZlKOJ5sRHOYPzLa2aKuYFhSnM-UkBrMukotnzZhT6eL2YmtGKZ_EoT2AT/s1600-h/Blogger-Bild-Code-ändern.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 161px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkmlfJjyF7kQwBqs8MUwHxDGJmBU569lbvX6mad6Lkto2xWI94LEj7jnY7Pd8a0fQA_bwEli4FP5LeO69TICZlKOJ5sRHOYPzLa2aKuYFhSnM-UkBrMukotnzZhT6eL2YmtGKZ_EoT2AT/s400/Blogger-Bild-Code-ändern.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5368961726854337346" /></a>

Für die Bildgröße andere ich die Pixel-Werte in width: und height:.

Für die Auflösung ändere ich den Wert in der Pfadangabe /s400/ nach s800 ab (1600 geht auch, bringt aber nicht immer die gewünschte Qualitätverbesserung (ist auch abhängig vom Bildmaterial)!

Zusätzlich wird der Parameter alt="" mit einem aussagekräftigen Text zum Bild befüllt. Der Alt-Wert wird angezeigt, falls der Browser etc. das Bild nicht anzeigen kann. Außerdem haben die Suchmaschinen mehr Informationen für die Bildersuche.

Nach der Code-Anpassung, wird das Bild so angezeigt:

Google Docs Pagerank-Checker und Blogger Bild-Code ändern(das Bild zeigt mein Experiment mit "Google Text und Tabellen", automatische PageRank-Abfrage über mehrere Google Datacenter)

Zusätzlich kann man auch noch einen Parameter title="" als Tooltip dem Code hinzufügen.
Ich habe im letzten Bild hinter border="0" noch die Anweisung title="zum Vergößern auf das Bild klicken" hinzugefügt. Beim überfahren mit der Mouse wird der Hinweistext dann angezeigt.

Ich denke, am letzten Bild kann man erkennen, was für den Blog-Leser am besten ist.
Und, auf das Bild kann man immer noch zum weiteren vergrößern klicken ;-).

NoodleGei.blogspot.com

Ähnliche Beiträge zum Thema/Kategorie:



11 Kommentar(e) zum Beitrag:

Unknown hat gesagt…

Vielen Dank für diesen Tipp. Als neuer Blogger war ich heute genau mit diesem Problem konfrontiert. Ich wusste nicht wo die Auflösung erhöht werden kann.

Dapema hat gesagt…

Klasse Tip und ich habe endlich einen Fehler von mir entdeckt. Ich habe nämlich immer die Größe geändert, aber nicht die Auflösung.

Anonym hat gesagt…

super, 1000 dank, genau das, was ich immer gesucht habe!

Anonym hat gesagt…

ich schließe mich dem dank an: DANKESCHÖN! jetzt ist mein blog das was ich haben wollte =)

Gabriele hat gesagt…

Hallo und danke für deine Tips (habe dein blog gerade erst entdeckt und werde wohl noch ein paar Stunden weiter lesen *gg*)!

Die Sache mit dem Foto-Titel kenne ich schon, aber ich weiß nicht, wie man diesen Text eventuell formatieren kann. Wenn ich zum Beispiel ein Bild zentriert einstellt, passt mein Foto-Untertext nicht zu dieser Zentrierung... sieht blöde aus *gg*
Hast du einen Tip?

Danke schon mal und
Greets
Gabriele

Gabriele hat gesagt…

Verdammt... eigentlich wehre ich mich ja gegen dieses "Hobby-Blogger-Bastel-Frauen"-Image, leider muss ich es bestätigen. Such a Pech ;-)
Sorry, mein Kommentar hat einen gravierenden Fehler. Ich meinte nicht den alt"" Text, sondern den Text vor dem (/a), also die Bildunterschrift. Habe jetzt erst mal mit normalen Formatierungs-Tags gearbeitet damit der Text unter dem Bild erscheint... und das funzt. Werde erst mal weiter probieren, bevor ich hier noch mehr dumme Fragen stelle...
Ich geh mich dann mal ne Runde schämen.
Gruß nochmal
Gabriele

NoodleGei hat gesagt…

@Gabriele Du hast:

1. Nicht aufgegeben
2. Selbstständig nach Lösungsmöglichkeiten gesucht
3. Selbstständig das Problem gelöst

Mein RESPEKT ist dir sicher!

kf hat gesagt…

Bin ich schwer von Begriff, oder warum wird bei mir das Bild durch klicken nicht automatisch grösser in einem neuen Fenster geöffnet? Liegt das an meinem Designe, hab ein standard Designe.


kf-ography.blogspot.com

NoodleGei hat gesagt…

@kf
Ich konnte auf deinem Blog alle (letzten) Bilder anklicken und in vergrößerter Darstellung ansehen.

Zur Zeit scheint es ein Problem mit dem neuen Blogger-Editor(?) zu geben.
Meine letzten Screenshots können nicht angeklickt werden.
Der Code ist allerdings ein anderer, als der oben beschriebene und funktionierte bis vor einigen Tagen einwandfrei.

Ich muss mal eine Codevergleich mit den bisher funktionierenden Bildern machen, vielleicht hat sich dort etwas geändert.
Im Google Hilfeforum gibt es bereits einige Anfragen zum Problem.

kf hat gesagt…

Ja, ich habe das Problem erkannt. *rotwerd*
Solange eine Bildunterschrift aktiviert ist, kann das Bild per Klick nicht vergrössert werden... ;)
Aber danke trotzdem für die Hilfe :)

HammerFall hat gesagt…

Kann man irgendwo die Standardgröße mit der die hochgeladenen Bilder eingebunden werden einstellen? Ich finde die Einstellung nirgends. :(

Kommentar veröffentlichen

Kommentare bitte fair und im rechtlich erlaubten Rahmen verfassen!
Die Kommentare und ggf. hinterlassene URLs werden von mir überprüft. Kommentare die für blaue Pillchen, Glücksspiele, bestimmte Bilder/Videos, Abzocker-Dienste usw. werben, werden gelöscht.

Kommentare von SEO-Link-Builder sind ebenso unerwünscht!

In den Kommentare können die HTML-Tags für:
kursiv = <i>Testwort</i>
fett = <b>Testwort</b>
Links = <a href="http://www.deineURL.de/">Link Text</a>
genutzt werden. Einfach die o.g. Beispiele kopieren und mit den eigenen Werten ersetzen.

  © Blogger template Columnus by Ourblogtemplates.com 2008

Back to TOP