1. Embed Your Flickr Photos On Your Site

    Here is any easy way to embed your photos from your flickr on your website in form which you can style. I’ll even show you how to intergrate this into the famous Lightbox plugin.

    We are going to use a little bit of PHP here, so you’ll need end your files with .PHP instead of .HTML, .HTM, or .XHTML. Alternatively you can go behind the scenes a bit more at this post.

    1. Embed Latest Photo On Your Website

    Things you’ll need to do - 

    Here is the code that you will need to return your latest from your Flickr.

    <?php

    $flickr_id =  ’ ‘;

    $api_key = ’ ‘;

    $size = ‘s’; //this can be ‘s’ for small, ‘t’ for thumbnail,’m’ for medium, ‘b’ for big, ‘o’ for original, or empty for 500px wide.

    // EDIT NOTHING UNDER HERE.

    $xml = simplexml_load_file(‘http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=’.$api_key.’&extras=tags&user_id=’.$flickr_id.’&page=1&per_page=1’);

    $photo = $xml->photos->photo;

    $farm = $photo->attributes()->farm;

    $server = $photo->attributes()->server;

    $photoID = $photo->attributes()->id;

    $secretCode = $photo->attributes()->secret;

    $tags = $photo->attributes()->tags;

    $tags_array = explode(” “, $tags);

    $title = $photo->attributes()->title;

    echo <img src=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’_’.$size.’.jpg”/>;

    ?>

    So you need to fill in the gaps! First your Flickr ID, then your API Key, then the size that you would like your picture to be displayed at. That’s it!

    2. Embed All Your Photos On Your Website

    So we are taking what we learnt above, and adding a for loop, and a foreach loop. The for loop cycles through every page of photos you have uploaded. The foreach loop then goes through each page and returns each photo on that page. Simple!

    <?php

    $flickr_id =  ’ ‘;

    $api_key = ’ ‘;

    $size = ‘s’; //this can be ‘s’ for small, ‘t’ for thumbnail,’m’ for medium, ‘b’ for big, ‘o’ for original, or empty for 500px wide.

    // EDIT NOTHING UNDER HERE.

    $xml = simplexml_load_file(‘http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=’.$api_key.’&extras=tags&user_id=’.$flickr_id);

    $pages = $xml->photos->attributes()->pages;

    for($page=1; $page <=$pages; $page++) {

    $xml = simplexml_load_file(‘http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=’.$api_key.’&extras=tags&user_id=’.$flickr_id.’&page=’.$page);

    foreach($xml->photos->photo as $photo) {

    $farm = $photo->attributes()->farm;

    $server = $photo->attributes()->server;

    $photoID = $photo->attributes()->id;

    $secretCode = $photo->attributes()->secret;

    $tags = $photo->attributes()->tags;

    $tags_array = explode(” “, $tags);

    $title = $photo->attributes()->title;

    echo ‘<img src=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’_’.$size.’.jpg”/>’;

    }

    }

     

    ?>

    3. Adding a LightBox Effect

    So you’ve got all your photos onto your website, but now you want to display them in an attractive LightBox. Well first of all head over to Lightbox and download the Scripts and CSS which you need to embed on your page. (Their instructions are great, so i’m not going to take you through that bit!)

    For LightBox to reconise pictures you need to add an attribute to a <a href> tag. So we are going to have to generate another URL. You need to add ‘rel=”lightbox”’ into your link.

    Here is the code you need to swap -

    Swap this

    echo ‘<img src=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’_’.$size.’.jpg”/>’;

    For

    echo ‘<a href=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’.jpg” rel=”lightbox” title=”’.$title.’”><img src=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’_’.$size.’.jpg”/></a>’;

    Hey presto! You have embedded Flickr on your website! Now I don’t want to give too much away, but you this should be a pretty good place to start!

    Enjoy, Finlay.

Notes

  1. finlay posted this