Fotogalerie in den Blog einbinden

65 Kommentare
Fotogalerie in den Blog einbinden

Online Webalben

Viele Anwender stellen Ihre Bilder in Online-Webalben zur Verf√ľgung. Sie nutzen Picasa, Flickr, die Fotocommunity oder Windows-Live-Fotogalerie. √úber den letztgenannten Dienst hab ich vor rund einer Woche im Artikel “25GB Online-Speicher” geschrieben. Das Sch√∂ne an Windows-Live ist, dass Ihr dort nicht nur Bildergalerien anlegen k√∂nnt, sondern den kompletten Dienst auch in den Windows-Explorer integrieren k√∂nnt. Wenn man bedenkt, dass dabei noch 25GB(!) geboten werden, ist das eine feine Sache ;-)

Heute aber geht es um die Einbindung der externen Bildergalerien in den Blog. Über das Thema hab ich schonmal einen Artikel verfasst: Drei Methoden um eine Fotogalerie im Blog einzubinden. Heute wird das etwas verfeinert. Ich stelle zwei Möglichkeiten vor, wie Ihr Fotoalben bzw. Diashows per iframe in den Blog bzw. die Homepage einbinden könnt.

Keine Angst vor dem h√§sslichen Wort “iframe” – es ist ganz einfach.

Inhalt:

1.) iframe (Fotogalerie) in den WordPress-Blog einbinden

1a) Fotogalerie von Fotocommunity einbinden

1b) Fotogalerie von Windows Live-Fotogalerie einbinden

1c) Picasa-Fotogalerie einbinden

1d) Flickr-Fotogalerie einbinden

2.) iframe (Fotogalerie) in einer Lightbox darstellen / aufpoppen lassen

1. Iframe – Bildergalerie im WordPress-Blog einbinden

WordPresser k√∂nnten ggf. Probleme mit den iframes haben. Wenn sich der Quellcode nicht direkt einbinden l√§sst, weil der Editor den eingegebenen Code abschie√üt, muss noch ein wenig Vorarbeit geleistet werden. Habt Ihr Euch f√ľr ein “iframe-Modul” entschieden (zu erkennen am Quelltext, der mit “iframe” anf√§ngt), so bearbeitet Ihr zun√§chst Eure functions.php (was die einzelnen WordPress-Dateien bewirken, k√∂nnt Ihr in meinen WordPress-Tutorials nachlesen). Das Bearbeiten der functions.php ist nat√ľrlich nur das erste mal erforderlich. Ihr f√ľgt folgenden Quellcode ein:

function field_func($atts) {
   global $post;
   $name = $atts['name'];
   if (empty($name)) return;
   return get_post_meta($post->ID, $name, true);
}
add_shortcode('field', 'field_func');

Im WordPress-Backend legt Ihr ein benutzerdefiniertes Feld mit einem beliebigen Namen an (hier “flickr”):

Benutzerdefiniertes Feld anlegen
Klicken zum Vergrößern

In das Feld “Name” tragt ihr einen frei w√§hlbaren Namen ein (z.B. flickr f√ľr eine flickr-Galerie). Bei¬†Wert” f√ľgt Ihr den Code ein, den Ihr von Eurem externen Bilderdienst erhalten habt (hierzu gleich mehr).
Das Element k√∂nnt Ihr dann in Eurem Artikel an beliebiger Stelle mit folgendem Shortcode einf√ľgen:
[field name=flickr]
Nachfolgend stelle ich kurz da, wie Ihr an den o.g. Code bei den vier g√§ngigsten Bilderdiensten kommt – wobei ich Euch die Windows-Live-Fotogalerie w√§rmstens an’s Herz lege.

1a) Diashow von der Fotocummunity einbinden

Ihr Klickt auf “meine Fotos” und dann auf Dia-Show dieser Fotos erstellen und auf Deiner pers√∂nlichen Homepage einbetten”. Nachfolgend k√∂nnt Ihr angeben, welche Fotos eingebunden werden sollen und wie gro√ü die Diashow sein soll. Anschlie√üend klickt Ihr auf Slideshow-Code erstellen.¬† Aus dem daraufhin erscheinenden Code kopiert Ihr¬† die Feedadresse und f√ľgt sie in den iframe-Code ein, den Ihr unter “Meine Fotos/ Fotohomepage / Homepage-Codes” f√ľgt. Das auf diese Weise bearbeitete iframe-Code¬† f√ľgt ihr (wie oben dargestellt) in das benutzerdefinierte Feld ein – als “Wert”. Wenn Ihr m√∂chtet, k√∂nnt Ihr den Code auch nachtr√§glich ver√§ndern.

Ich hab auch ein paar Bilder bei der Fotocommunity – das Ergebnis sieht dann so aus:

1b) Diashow von Windows Live einbinden

Ihr √∂ffnet Euer Windows-Live Fotoalbum und w√§hlt “Freigeben”. Nachfolgend erscheint der Code, den Ihr in das benutzerdefinierte Feld eingebt. Wenn Ihr Eure Windows-Live Fotogalerie auf diese Weise einbindet, erscheint ein Logo f√ľr das Fotoalbum, das dann angeklickt werden kann. Es erscheint ein neues Fenster mit der Fotogalerie. Das sieht in meinem Falle so aus:

M√∂chtet Ihr aber, dass die Fotogalerie direkt im Blog angezeigt wird (ohne dass sich ein neues Fenster √∂ffnet), dann √§ndert Ihr die Zieladresse aus dem oben gewonnen Code. Gebt stattdessen die Adresse der Diashow an (die seht Ihr in der Adressleiste, sobald Ihr die Diashow startet). Weil ich Euch mit Diashows nicht √ľberladen m√∂chte, verzichte ich an dieser Stelle auf ein Beispiel. Unter 2.) Fancybox sehr Ihr den Einsatz dieser Galerie in der Fancybox.

1c) Picasa-Diashow einbinden

Hier erfahrt Ihr die Adresse der Diashow, wenn Ihr in der Picasa-Galerieansicht auf “Diashow einbinden” klickt. Im nachfolgenden Fenster k√∂nnt ihr das Erscheinungsbild optional konfigurieren (Gr√∂√üe, etc.).

Picsa-Diashow konfigurieren
Picasa-Diashow einbinden (klicken zum Vergrößern)

Anschlie√üend kopiert Ihr den generierten Code und baut ihn ein – wie oben schon mehrfach beschrieben. Auch hier verzichte ich aus Performancegr√ľnden auf ein Beispiel, da bereits zwei Galerien eingebunden sind.

1d) Flickr-Fotogalerie einbinden

Ihr w√§hlt ein Album und klickt (rechts oben) auf den Link “Diashow”. In der daraufhin erscheinenden Diashow w√§hlt Ihr (ebenfalls rechts oben) die Option “Ver√∂ffentlichen”. Ihr kopiert den Code, der unter “HTML zum Einbetten” steht. Auch diesen Code k√∂nnt Ihr dann im Blog einbinden (wie oben mehrfach beschrieben).

2.) Fotogalerie in einer Lightbox darstellen

Das ist die ideale L√∂sung, wenn Ihr eine Fotogalerie in einem eigenen Fenster anzeigen wollt. Meines Erachtens eines der elegantesten M√∂glichkeiten, da die Besucher zum Betrachten der Diashow die Seite nicht verlassen m√ľssen (sofern Javascript aktiviert ist).

Im Artikel “poppende Bilder” hab ich einiges √ľber Lightbox(en) geschrieben und dargestellt: welche M√∂glichkeiten es gibt und wie eine Lightbox in den WordPress-Blog eingebaut wird. Ich hab mich f√ľr Fancybox entschieden, da ich das ohnehin vorhandene Framework¬† “jQuery” ausnutzen konnte und es recht schlank daherkommt.

Damit auch iframes in der Fancybox dargestellt werden können, muss noch ein kleines Script eingebunden werden:

<script type="text/javascript">
jQuery.noConflict();
jQuery("#tip5").click(function() {
	jQuery.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'easingIn'		: 'easeOutBack',
			'easingOut'		: 'easeInBack',
			'title'			: this.title,
			'width'			: '75%',
			'height'		: '75%',
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'iframe',
			'iframe'			: {
			   	 'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
			}
		});

	return false;
});
</script>

Die Werte k√∂nnt Ihr entsprechend anpassen. F√ľr H√∂he und Breite sind auch absolute Werte erlaubt. In diesem Beispiel ist es ein relativer Wert von 75%.¬† Au√üerdem kann noch der “Aufpopp-” und “Zuklapp-” Effekt modifiziert werden.

In der dritten Zeile seht Ihr den Namen “Tip5″. Mit dieser Variablen sprechen wir die Fancybox an. die Bildergalerie wird im Blog dann wie folgt verlinkt:

<a id="tip5" href="Adresse der Diashow">Zur Diashow</a>

Wie Ihr an die Adresse kommt, hab ich unter 1a) bis 1d) ausgiebig geschrieben. F√ľr flickr benutzt Ihr aber “nur” die URL der Slideshow. Selbstverst√§ndlich k√∂nnt ihr auch eine eigene Diashow erstellen und per iframe einbinden (siehe auch: Drei Methoden um eine Fotogalerie im Blog einzubinden).

Zuletzt m√∂chte ich nach dieser Methode den Einsatz der Windows-Live-Fotogalerie¬† darstellen. Gerne h√§tte ich auch die anderen Bild-Dienste in der Fancybox vorgestellt. Ich hab sie allesamt ausprobiert und sie funktionieren. Jedoch m√∂chte ich den Artikel nicht mit Skripten √ľberladen. Es sind ohnehin schon zu viel ;-)

Zur Diashow
Zur Fotoshow

Hier gefällt mir besonders gut, dass der Hintergrund farblich an den Ton der Bilder angepasst wird.

Eure Meinung

Ich hoffe, Ihr k√∂nnt etwas davon gebrauchen. Vielleicht konnte ich auch dem Ein- oder Anderen helfen. Wie immer, stehe ich bei Problemen mit Rat und Tat zur Seite. Auch f√ľr konstruktive Kritik bin ich jederzeit offen.

Ich freue mich √ľber Eure Kommentare :-)

Foto: ‚ÄúBring Farbe ins Leben!‚ÄĚ ¬© androm31 / PIXELIO (beschnitten)

Artikel bewerten

Bewertung f√ľr: Fotogalerie in den Blog einbinden:
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
5,00 von 5 Sternen bei 1 abgegebenen Stimmen.
Loading...Loading...

Trackbacks/Pingbacks

Einen Kommentar schreiben