Flickr-Favoriten im eigenen Blog anzeigen

18.03.2005, 05:48 in essays. Trackback-URL, Kommentar-Feed.

flickrfavs James M. Snell hat in seinem Blog eine Möglichkeit beschrieben, Flickr Favoriten im eigenen Movable Type Blog anzuzeigen. Das könnte so aussehen, wie auf meiner Flickr-Seite gezeigt. Ich habe das XSLT-File geringfügig angepasst um Thumbnailgrössen festzulegen und einen Alt-Tag zu schreiben.

Was braucht man dazu?

die Flickr API
das Movable Type Plugin IncludePlus

Die heruntergeladene Flickr API wird entpackt in das Verzeichnis /extlib/Flickr/ im MT-Installationsverzeichnis kopiert. Das Plugin IncludePlus wird in das Verzeichnis /plugins/ im MT-Installationsverzeichnis verschoben.

Nun erstellen wir eine leere Textdatei und kopieren den folgenden Inhalt hinein:

<?xml version="1.0" encoding="UTF-8"?>


  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


<xsl:output method="html" />


<xsl:variable name="apikey">


<xsl:text>a03eff090f516bc7bf51d8c42c02df1f</xsl:text>


</xsl:variable>


<xsl:template name="favs"> 


</xsl:template>


<xsl:template match="favs">


<xsl:variable name="favoritesURL">


<xsl:text>http://www.flickr.com/services/rest/?method=flickr.favorites.getPublicList&amp;api_key=</xsl:text><xsl:value-of select="$apikey"/><xsl:text>&amp;user_id=</xsl:text>


<xsl:value-of select="@user_id" />


</xsl:variable>


<div id="flickr-favs">


<xsl:apply-templates select="document($favoritesURL)" />


</div>



	</xsl:template>



	<xsl:template match="photo" >



	<xsl:variable name="sizesURL">


<xsl:text>http://www.flickr.com/services/rest/?method=flickr.photos.getSizes&amp;api_key=</xsl:text><xsl:value-of select="$apikey"/><xsl:text>&amp;photo_id=</xsl:text><xsl:value-of select="@id" />


</xsl:variable>



	<xsl:variable name="thumbURL">


<xsl:value-of select="document($sizesURL)/rsp/sizes/size[label='Square']/source" />


</xsl:variable>



	<xsl:element name="a">


<xsl:attribute name="href"><xsl:text>http://www.flickr.com/photos/</xsl:text><xsl:value-of select="@owner" /><xsl:text>/</xsl:text><xsl:value-of select="@id" /></xsl:attribute>


<xsl:element name="img">


<xsl:attribute name="src"><xsl:value-of select="$thumbURL" /></xsl:attribute>


<xsl:attribute name="title"><xsl:value-of select="@title"/></xsl:attribute>


<xsl:attribute name="width">75</xsl:attribute>


<xsl:attribute name="height">75</xsl:attribute>


<xsl:attribute name="alt"><xsl:value-of select="@title"/></xsl:attribute> 


</xsl:element>


</xsl:element>


</xsl:template>

</xsl:stylesheet>

Diese Datei bestimmt, wie die Thumnails der Favoriten ausgegeben werden sollen. Sie wird als flickr.xslt abgespeichert und auf den Server hochgeladen.

Im nächsten Schritt erstellen wir eine neue Textdatei und kopieren den folgenden Inhalt hinein:

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&lt;?xml-stylesheet type=&quot;text/xsl&quot; href=&quot;<strong>http://www.meineseite.de/pfadzu/flickr.xslt</strong>&quot;?&gt;&lt;favs user_id=&quot;<strong>flickr_user_ID</strong>&quot;/&gt;

Nachdem die Pfadangaben zum eben erstellten File und die Flickr-User-ID (nicht Benutzername) angepasst wurden, wird die Datei als flickr.xml gespeichert und hochgeladen.

In der MT-Vorlage wird die Datei wie folgt eingebunden:

&lt;MTIncludeURL&gt;http://www.w3.org/2000/06/webdata/xslt?xslfile=<code><strong>http://www.meineseite.de/pfadzu/flickr.xslt</strong>

&xmlfile=http://www.meineseite.de/pfadzu/flickr.xml&transform=Submit</MTIncludeURL>

Die Bilder der ID flickr-favs werden im Beispiel über das folgende CSS gestyled.

#flickr-favs img { margin: 3px; padding: 4px; border: 1px solid #DFDFDF; background: #eee;}

Werbeunterbrechung

Kommentare und Feedback (4)

kelli (#)
20.03.2005, 09:35

Hey, nettes Tutorial! Allerdings versteh ich den Teil mit der MT-Vorlage nicht :(. Wäre nett wenn Du da noch etwas Aufklärung leiten könntest ;).

Manuela (#)
20.03.2005, 11:01

Hallo, mit MT-Vorlage meinte ich eigentlich nur die Seite, auf der dann die Bilder auch angezeigt werden sollen. Also z.B. eine extra Foto-Seite oder auch der Index …

tob (#)
06.04.2005, 11:13

cool,, wird die tage ausprobiert

Mark (#)
18.04.2007, 22:50

Da wird man als begeisterter Hobby-Fotograf, der bald auf Weltreise geht wirklich richtig neidisch…

Folgende Seiten verweisen auf diesen Beitrag

Dieser Eintrag kann nicht mehr kommentiert werden.

Vorheriger Artikel: Schreiben mit Flickr, nächster Artikel: Den Profis über die Schulter schauen

pixelgraphix