DAC of Design Action
9/20/2016 - 6:33 PM

Display Flickr Galleries

Display Flickr Galleries

.flickr-img-square {
    display: block;
    margin: 15px auto;
    width: 120px;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
	/* Tablet */
	.flickr-img-square {
    	width: 140px;
    	height: 140px;
	}
}

@media (min-width: 992px) {
    /* Tablet Landscape */
    .flickr-img-square {
        width: 170px;
        height: 170px;
    }
}

Purpose

Display Flickr album photos.

Installation

  1. Add code to page template.
  2. Request Flickr API key: https://www.flickr.com/services/apps/create/
  3. Find Flickr user's ID: http://idgettr.com/
  4. Replace values for the variables in $flickr_api_key and $flickr_user_id
  5. Optional styling: add scss in flickr_grid.scss
<?php 
//
// Variables to fetch user's Flickr account
//
$flickr_api_key = '233345e2dd6bc4067209cacb0937f9ea';
$flickr_user_id = '148603145@N07';

//get all photos from flickr account, return in JSON file
$all_photos_url = "https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=" . $flickr_api_key . "&user_id=" . $flickr_user_id . "&format=json&nojsoncallback=1";
$content = file_get_contents($all_photos_url);
$json = json_decode($content, true); //'true' sets json file to array

//for each photoset, print the title and the corresponding photos
foreach($json['photosets']['photoset'] as $item) {
    $album_title = $item['title']['_content'];
    $album_id = $item['id'];
    $flickr_album_feed_url = 'http://api.flickr.com/services/feeds/photoset.gne?set=' . $album_id . '&nsid=' . $flickr_user_id;
    $feed = file_get_contents($flickr_album_feed_url);
    $xmlparse = simplexml_load_string ($feed);

    //album title
    echo '<div class="h3 album-title">' . $album_title . '</div>';                      
    echo '<div class="row album-wrapper">';

    //display the images
    foreach ($xmlparse as $item) {
        $title  = $item->title;
        if ($title) { //if title exists, echo image

            $link   = $item->link['href'];
            
            //determines flickr photo size 
            $image  = str_replace("_b.jpg",".jpg",$item->link[1]['href']); 
            $style = 'style="background_image: url(' . '&#34;' . $image . ');"'; ?>
            
            <div class="col-xs-6 col-sm-4 col-md-3">
                <a href="<?php echo $link ?>">
                    <div class="flickr-img-square" style="background-image: url('<?php echo $image ?>');"></div>
                </a>
            </div> <!--/col 6 4 3 -->
    <?php

        } //end if title
        
    } //end for each xmlparse
    
    echo '</div>'; // end of row album-wrapper
    
} // end for each photoset
?>