Einbindung von Bildern mit Picasa

In diesem Kapitel geht es darum, den Text eines Blog-Beitrags durch Bilder zu ergänzen, die beim Internetdienst Picasa gespeichert sind. Es gliedert sich in folgende Abschnitte:

Einführende Bemerkungen zu Picasa:

Es gibt einerseits den Internetdienst Picasa, in dem Bilder im Internet abgelegt und anderen Nutzern zugänglich gemacht werden können. Die Bilder werden in Alben organisiert und können als Diashow betrachtet werden. Für jedes Album kann bestimmt werden, ob es für die Allgemeinheit zugänglich sein soll. Um Links darauf in die Website einzubauen und so die Bilder innerhalb der Website zu nutzen, muss das Album allerdings “öffentlich” sein.

Außerdem gibt es die Computersoftware Picasa, die auf den lokalen PC heruntergeladen und dort installiert wird. Sie ist ein hervorragendes Werkzeug zur Organisation von Bildern und hilft erheblich dabei, den Überblick über die Bilder auf dem Rechner zu behalten. Darüber hinaus bietet die Software vielfältige Möglichkeiten der Bildbearbeitung. In unserem Zusammenhang ist aber vor allem von Bedeutung, dass die beiden Software-Systeme (PC-Programm und Internet-Dienst) hervorragend zusammenarbeiten. So können in der PC-Software Alben zusammengestellt werden und dann automatisch ins Internet synchronisiert werden.

Um den Internetdienst Picasa zu nutzen, ist es aber nicht notwendig, die PC-Software Picasa zu installieren oder zu benutzen!
Ebenso wie sich aber bei der Bearbeitung des Blogs die Verwendung eines Offline-Editors bewährt hat, hat sich die Benutzung der PC-Software Picasa als Offline-Editor der im Internet abgelegten Alben bewährt.

Für weitere Informationen über die Bedienung von Picasa wird auf die einschlägige Literatur und das Kursangebot z.B. der Volkshochschulen verwiesen.

Anleitung zur Integration von einzelnen Bildern in Blog-Beiträge

Die betreffenden Bilder müssen zuerst in den Webdienst Picasa als Elemente von Alben hochgeladen werden.

Für die Integration eines einzelnen Bildes gibt es zwei Varianten:

  1. Anzeige eines verkleinerten Bildes, das als Link auf das (evtl. hochauflösende) Original bei Picasa verweist.
  2. Anzeige des Bildes im Text ohne Link-Funktion.

In beiden Fällen muss zuerst das Bild in Picasa-Dienst aufgesucht werden. Dort ist in der rechten blauen Sidebar ein Eintrag “Link zu diesem Foto”. Klickt man hierauf, werden zwei Felder sichtbar: “Link” und “Bild einbinden”. Für die Integration ins Blog enthält das Feld “Bild einbinden” den notwendigen HTML-Code. Der Inhalt dieses Feldes wird durch die darunter befindlichen Parameter “Größe auswählen” und “Album-Link verbergen” zusätzlich modifiziert. Der Inhalt des Feldes “Bild einbinden” kann nun markiert und mit der Taste “Ctrl-C” (bzw. “Strg-C”) in den Kopier-Puffer übernommen werden.

Nun wird das Bild im Blog-Beitrag eingefügt. Leider kann man dafür weder im Online-Editor noch im Windows Live Writer die Methode “Bild einfügen” verwenden, da die von Picasa bereitgestellte URL diese Art der Verlinkung nicht unterstützt. Deswegen muss man den HTML-Code des Beitrags bearbeiten, siehe auch Kapitel Kleine Einführung in die HTML. Es ist ganz einfach:

Man sucht im visuellen Editor den Text auf, vor oder nach dem das Bild eingefügt werden soll. Dort merkt man sich ein paar Worte und wechselt dann in den HTML-Editor (bzw. “Quellcode”-Ansicht). Hier sucht man nach dem Text, den man sich gerade gemerkt hat und fügt dort dann mit der Taste “Ctrl-V” (bzw. “Strg-V”) den Inhalt des Kopier-Puffers ein. Dies sieht dann z.B. so aus:

<p>vorheriger text</p>
<a href="http://picasaweb.google.com/lh/photo/v5Qq6UQkOh6ZaoNFAhCdDQ?feat=embedwebsite"><img style="display: inline; margin-left: 0px; margin-right: 0px" src="http://lh3.ggpht.com/_F2Kc1THvMJU/S8MdaH6vtZI/AAAAAAAARPM/POwlswIFxAA/s144/P1050930.JPG" /></a>

<p>weiterer text</p>

Der eingefügte HTML-Code beginnt hier mit “<a” und endet mit </a>. Es ist also ein Link auf das in Picasa gespeicherte Original (Code: <a href=”http://picasa… …embedwebsite”>) und ein integriertes Bild (Code: <img src=”http://lh5… …jpg” />). Die Integration eines Bildes in der Variante 1 ist nun bereits fertig und kann getestet werden: Beim Wechsel in den visuellen Editor sollte das Bild in der angegebenen Größe angezeigt werden und in der Vorschau sollte der Link funktionieren.

Will man nun aber die Variante 2 benutzen, also das Bild ohne den Link integrieren, ist lediglich der Link-Anteil aus dem eingefügten Code zu löschen. Das geht ohne Bearbeitung des HTML-Codes über die Eigenschaften des Bildes, und zwar ist der Eintrag “Link zu”, der die Ziel-URL enthält, einfach auf “keine” zu ändern. Die Integration eines Bildes in der Variante 2 ist damit auch fertig und kann getestet werden: Beim Wechsel in den visuellen Editor sollte das Bild in der angegebenen Größe angezeigt werden und in der Vorschau sollte kein Link da sein.

Anleitung zur einfachen Integration von Alben in Blog-Beiträge

Ein Album in Picasa ist eine Sammlung von Bildern, in denen geblättert werden kann oder die als Diashow angezeigt werden können.

Die betreffenden Bilder müssen ebenfalls zuerst in den Webdienst Picasa als Elemente von Alben hochgeladen werden.
Bei der Benennung der Alben sollte von vornherein möglichst systematisch vorgegangen werden, damit man später den Überblick behält, wenn es viele Alben gibt. Eine spätere Umbenennung der Alben verursacht zusätzliche Arbeit, sobald es im Blog bereits Links darauf gibt, die dann korrigiert werden müssen.

Die Vorgehensweise ist ähnlich der oben beschriebenen zur Integration einzelner Bilder. Nur wird hier in Picasa anstelle eines einzelnen Bildes eben das Album aufgesucht. In der Picasa-Liste der eigenen Alben klickt man auf das betreffende Symbol und damit wird eine Liste mit Symbolen aller darin enthalten Bildern angezeigt. Daneben ist in der rechten blauen Sidebar ein Eintrag “Link zu diesem Album”. Klickt man hierauf, werden zwei Felder sichtbar: “Link in E-Mail oder Sofortnachricht einfügen” und “HTML für das Einbetten in die Website einfügen”. Für die Integration ins Blog enthält das Feld “HTML … einfügen” den notwendigen HTML-Code. Der Inhalt des Feldes “HTML … einfügen” kann nun markiert und mit der Taste “Ctrl-C” (bzw. “Strg-C”) in den Kopier-Puffer übernommen werden.

Nun wird das Album im Blog-Beitrag eingefügt. Leider kann man auch hierfür weder im Online-Editor noch im Windows Live Writer die Methode “Bild einfügen” bzw. “Fotoalbum einfügen” verwenden, denn der Online-Editor unterstützt nur die eigene (nicht zufriedenstellende) Galerie-Funktion und der Live Writer unterstützt nur Fotoalben aus dem Windows Live Service. Deswegen muss man wieder den HTML-Code bearbeiten, siehe auch Kapitel Kleine Einführung in die HTML. Es ist ganz einfach:

Man sucht im visuellen Editor den Text auf, vor oder nach dem das Album eingefügt werden soll. Man merkt sich ein paar Worte und wechselt dann in den HTML-Editor (bzw. “Quellcode”-Ansicht). Hier sucht man nach dem Text, den man sich gerade gemerkt hat und fügt dann mit der Taste “Ctrl-V” (bzw. “Strg-V”) den Inhalt des Kopier-Puffers dort ein. Dies sieht dann z.B. so aus:

<p>vorheriger text</p>
<table style="width:194px;"><tr><td align="center" style="height:194px;background:url(http://picasaweb.google.com/s/c/transparent_album_background.gif) no-repeat left"><a href="http://picasaweb.google.com/fischerlinden/KaterFritzUndKatzeBluntschli?feat=embedwebsite"><img src="http://lh5.ggpht.com/_F2Kc1THvMJU/S8MdYAbaASE/AAAAAAAARSk/DdUUwPd2NMg/s160-c/KaterFritzUndKatzeBluntschli.jpg" width="160" height="160" style="margin:1px 0 0 4px;"></a></td></tr><tr><td style="text-align:center;font-family:arial,sans-serif;font-size:11px"><a href="http://picasaweb.google.com/fischerlinden/KaterFritzUndKatzeBluntschli?feat=embedwebsite" style="color:#4D4D4D;font-weight:bold;text-decoration:none;">Kater &quot;Fritz&quot; und Katze &quot;Bluntschli&quot;</a></td></tr></table>

<p>weiterer text</p>

Der eingefügte HTML-Code beginnt hier mit “<table” und endet mit </table>. Es ist also eine Tabelle, die einen Link auf das in Picasa gespeicherte Album enthält (Code: <a href=”http://picasa… …embedwebsite”>) und ein integriertes Beispiel-Bild aus dem Album (Code: <img src=”http://lh5… …jpg” />). Unten in der Tabelle kommt dann noch der Name des Album, der wiederum als Link auf das Album in Picasa eingerichtet ist.
Hinweis: Wenn man im Windows Live Writer aus dem HTML-Editor in den visuellen Editor wechselt und dann wieder zurück, wird der obige Text vermutlich besser strukturiert als nach dem ersten Einfügen des Codes angezeigt – lassen Sie sich nicht davon irritieren!

Die Integration des Albums ist bereits fertig und sieht dann so aus:

Kater "Fritz" und Katze "Bluntschli"

Anleitung zur ansprechenderen Integration von Alben in Blog-Beiträge

Motivation:
Mir war es nicht ausreichend, ein einziges Beispiel-Bild aus dem Album als Platzhalter in meinem Text anzuzeigen. Ich wollte dem Leser eine Ahnung geben von den im Album enthaltenen Bildern und ihn damit mehr motivieren, dem Link zu folgen.

Vorgehensweise:
Ich habe mit der PC-Software Picasa eine Collage für das betreffende Album erzeugt. Das dabei entstehende Bild habe ich zuerst, damit die Ladezeit nicht zu gross ist, mit einer beliebigen Bildbearbeitungssoftware auf “handliche” Größe verkleinert (Breite: 1280 Pixel) und es dann in ein Album “Collagen” in Picasa hochgeladen.

Dieses Bild habe ich dann wie beschrieben als einzelnes Bild (Variante 1 mit Link) in den Text integriert. Der HTML-Code sieht dann z.B. so aus:

<p>vorheriger text</p>

<a href="http://picasaweb.google.com/lh/photo/gLhiCIzsOYuLfAKsU8l8jA?feat=embedwebsite"><img src="http://lh3.ggpht.com/_F2Kc1THvMJU/S-ug1v1l39I/AAAAAAAASZk/YR7QRV67DM8/s400/Kater%20Fritz%20und%20Katze%20Bluntschli.jpg" /></a>

<p>weiterer text</p>

Dies ist also wieder ein Link auf das Collagen-Bild, zu dem eine verkleinerte Version dieses Bildes angezeigt wird. Ich will aber einen Link auf das Album, nicht auf das Collagenbild!

Also habe ich das Album in Picasa aufgesucht und in der blauen Sidebar den Inhalt des Feldes “Link in E-Mail oder Sofortnachricht einfügen” in den Kopier-Puffer übernommen. Dieses Feld enthält die Webadresse zu dem Album und muss nun nur in den Eigenschaften des Bild-Objektes als Ziel-Adresse der Einstellung “Link zu” eingesetzt werden. Darüber hinaus definiere ich noch für die URL, ob der Link in einem neuen Fenster geöffnet werden soll – ein sinnvolles Element der Bedienerführung. Außerdem gebe ich noch in den erweiterten Eigenschaften des Bildes einen “Alternativen Text” ein, der angezeigt wird, wenn man mit der Maus über das Bild fährt. Und somit ist auch die Integration eines Albums mit einen einladenden Platzhalter fertig und kann getestet werden – hier noch das tatsächliche Beispiel:

Album anzeigen

Zurück zur Themenübersicht …

  1. Es gibt noch keine Kommentare.
  1. No trackbacks yet.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: