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;
}
}
Display Flickr album photos.
$flickr_api_key
and $flickr_user_id
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(' . '"' . $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
?>