Toon een complete Flickr photoset in je WordPress bericht met de TanTan Flickr plugin. Hoe? Joe Tan heeft een plugin voor WordPress geschreven om je Flickr photoset te tonen. Deze plugin is noodzakelijk voor onderstaande handleiding en kan worden gedownload vanaf zijn website. De credits voor de plugin gaan uiteraard naar Joe Tan.
Nadat je de plugin geinstalleerd hebt in je WordPress administratie paneel, kunnen we aan de slag. Met deze handleiding maken we het mogelijk om in een blog bericht op WordPress alle foto’s uit een Flickr ‘Photoset’ op te halen en in een blogpost te zetten. Het mag duidelijk zijn dat het handig is om vooraf je website goed te back-uppen.
De Flickr API staat het toe om maximaal 30 foto’s aan te bieden, dit kan echter mettertijd wijzigen. Mocht je maar 30 foto’s in een bericht kunnen plaatsen, dan ligt dat aan de API.
Je kan de gewijzigde bestanden ook downloaden via de onderstaande button, waarna ze kunnen worden geplaatst op de correcte plek. Zie hieronder voor het bestandspad.
Mocht je zelf al aanpassingen hebben gedaan aan de plugin dan stel ik voor dat je de wijzigingen handmatig uitvoert. Hieronder daarom ook de uitleg. Hier heb je ongeveer 10-20 minuten voor nodig, afhankelijk van je programmeer ervaring.
In totaal moeten we 4 bestanden aanpassen en kunnen we optioneel de CSS nog aanpassen.
httpdocs/wp-content/plugins/tantan-flickr/templates/photoalbum-resources.php
httpdocs/wp-content/plugins/tantan-flickr/templates/photoalbum-shortcode.html
httpdocs/wp-content/plugins/tantan-flickr/flickr.php
httpdocs/wp-content/plugins/tantan-flickr/flickr/class-public.php
en optioneel:
httpdocs/wp-content/plugins/tantan-flickr/templates/photoalbum-styles.css
In het bestand httpdocs/wp-content/plugins/tantan-flickr/flickr/class-public.php doe je het onderstaande aanpassen:
Rond regel 191 vervang je de volgende code:
$key = "flickr-$album-$tag-$num-$size-$video-$photo";
met onderstaande stukje code:
$albumID = $album;
$key = "flickr-$albumID-$tag-$num-$size-$video-$photo";
if ($html = get_post_meta($post->ID, $key, true)) {
return $html;
} else {
Zoek het onderstaande stukje code rond regel 197 tot 203:
}
// grab the flickr photos
$photos = array();
$auth_token = get_option("silas_flickr_token");
$baseurl = get_option("silas_flickr_baseurl");
$baseurl_pre = get_option("silas_flickr_baseurl_pre");
$linkoptions = get_option("silas_flickr_linkoptions");
Direct daarachter plaats je de volgende code:
$album = array();
$photos = array();
if ($auth_token) {
require_once(dirname(__FILE__)."/lib.flickr.php");
Daarna zoek je de onderstaande code rond regel 222 tot 225:
} elseif ($album) {
$albumData = $flickr->getAlbum($album);
$photos = $flickr->getPhotos($album);
en vervangt dit met onderstaande code:
} elseif ($albumID) {
$album = $flickr->getAlbum($albumID);
$photos = $flickr->getPhotos($albumID);
} elseif ($tag) {
$photos = $flickr->getPhotosByTags($tag);
}
Daarna zoek je de volgende code ergens rond regel 241:
foreach (array_slice($photos, 0, $num) as $photo) {
$html .= TanTanFlickrDisplay::photo($photo, array(
"size" => $size,
"album" => $albumData,
"scale" => $scale,
"prefix" => $prefix,
"linkoptions" => $linkoptions
));
}
En vervangt die code met onderstaande code:
if (isset($photos[$album["primary"]])) {
$primary = $photos[$album["primary"]];
} else {
$primary = $flickr->getPhoto($album["primary"]);
$primary["sizes"] = $flickr->getPhotoSizes($album["primary"]);
}
ob_start();
include( $this->getDisplayTemplate("photoalbum-shortcode.html"));
$html = ob_get_contents();
ob_end_clean();
} // if count photos
Zoek rond regel 251 de volgende code:
$html = "<div class="flickr-photos">".($error ? ("<p class="error">".$error."</p>") : "").$html."</div>";
En vervang dat met de onderstaande code:
$html = "<div class="flickr-photos">".($error ? ("<p class="error">".$error."</p>") : "").$html."</div>";
if (!update_post_meta($post->ID, $key, $html)) add_post_meta($post->ID, $key, $html);
return $html;
}
Sla het bestand op en upload het bestand naar de webserver.
In het bestand httpdocs/wp-content/plugins/tantan-flickr/flickr.php hoort het volgende te worden aangepast:
Zoek naar het onderstaande rond regel 90:
// clear flickr cache
add_action("tantan_flickr_clear_cache_event", create_function("", "require_once(dirname(__FILE__)."/flickr/lib.flickr.php");$flickr = new TanTanFlickr();@$flickr->clearCacheStale();"));
En vervang die regel met onderstaand:
add_action("wp_head", create_function("$attribs=false, $content=false", "require_once(dirname(__FILE__)."/flickr/class-public.php";); if (!is_object($GLOBALS[TanTanFlickrPlugin])) $GLOBALS[TanTanFlickrPlugin] => new TanTanFlickrPlugin(); return $GLOBALS[TanTanFlickrPlugin]->header();"), 9990);
Sla het bestand op en upload het bestand naar de webserver.
Maak een nieuw bestand aan genaamd httpdocs/wp-content/plugins/tantan-flickr/templates/photoalbum-shortcode.html en zet de volgende code hierin:
<?php
/*
Copy this file into your current active theme"s directory to customize this template
This template displays one Flickr photo set
*/
global $TanTanFlickrPlugin;
?>
<div id="highlight">
</div>
<div id="photos" class="photos">
<?php foreach ($photos as $photo)
echo TanTanFlickrDisplay::photo($photo, array("size" => "Square","album" => $album));
?>
</div>
<div class="flickr-meta-links">
<a href="http://www.flickr.com/photos/<?php echo $album["owner"];?>/sets/<?php echo $album["id"];?>/" target="_blank"><?php _e("View this album on Flickr", "tantan-flickr");?></a>
</div>
Sla het bestand op en upload het bestand naar de webserver.
Zo, bijna klaar… In het bestand httpdocs/wp-content/plugins/tantan-flickr/templates/photoalbum-resources.php doe je de volgende wijziging:
Zoek naar de code rond regel 66:
return $prefix.'photo/'.$photo['id'].'/'.($album ? ($album['pagename2'].'-') : '').$photo['pagename'];
en vervang deze met:
return '../../photo/album/'.$album['id'].'/photo/'.$photo['id'].'/'.($album ? ($album['pagename2'].'-') : '').$photo['pagename'];
Sla het bestand op en upload het bestand naar de webserver.
Optioneel kan je de nieuwe functionaliteit nog stylen met CSS in het bestand In httpdocs/wp-content/plugins/tantan-flickr/templates/photoalbum-styles.css
Bijvoorbeeld met:
div.flickr-photos h2
{
font-weight:bold;
font-size: 150%;
color: #AD2600;
text-align: left;
}
Als het goed is moet je nu bij het maken van een nieuw bericht ook een complete photoset kunnen toevoegen aan het bericht.
