Recent Flickr Photos with Flickr API and Laravel
Sep 18, 2013  

I've been looking into the idea of a Flickr widget ever since I discovered the API package on Packalyst. It had it's headaches in the beginning, but I'm very pleased with the overall result. I thought I would share my experience. Again, we're going to utilize our Laravel helpers class just like we did with the Twitter widget for Laravel. I'll give you a list of things I used to pull it all together.

Tools We Need

Skip to TL:DR Version

Installing the Flickering Package

The instructions for installing this package aren't crystal clear for an amateur like myself, so I'll do my best to save others the time of having to figure it out. To get the latest version of Flickering simply require it in your composer.json file.

"anahkiasen/flickering": "dev-master"

Once you've ran composer update, You'll need to register the service provider with the application. Open up <code>app/config/app.php and find the providers key.

'providers' => array(
    'Flickering\FlickeringServiceProvider'
)

Next, you need to register the facade in the aliases key of your <code>app/config/app.php.

'aliases' => array(
    'Flickering' => 'Flickering\Facades\Flickering'
)

You should be all set.

The Helper

I'm a bit addicted to using this helpers class because I like my controller very readable, but it isn't necessary if it doesn't blow your skirt up. Mine looks like this.

<?php
class Helpers
{
    public static function flickrPhotos($api_key = '', $api_secret = '', $user_id = '', $photo_count = '24')
    {
        $flickrphotos = Cache::remember('flickrphotos', 60, function() use ($api_key, $api_secret, $user_id, $photo_count) {
            $method = Flickering::handshake($api_key, $api_secret);
            $results = Flickering::getResultsOf('people.getPublicPhotos', array('user_id' => $user_id, 'per_page' => $photo_count, 'extras' => 'url_m'));
            return $results->obtain();
        });
        if(!empty($flickrphotos['photo']))
        {
            return $flickrphotos['photo'];
        }
        else
        {
            return array();
        }
    }
}

We're simply caching our results or returning an empty array here. You'll see later why I thought this was the best approach. Yes, my standards are sub-par. You'll notice we're using the people.getPublicPhotos method that doesn't require authentication from Flickr. You can find a complete list of arguments and more information here. I know Flickering has a method of caching, but I didn't really find it necessary to dig that deep in here. Instead, I just used old faithful Laravel.

The Controller

I'm tossing mine in my construct, but hey it's your party. You'll need to replace $api_key,<code>$api_secret, and $user_id with the appropriate values. You can get your user id quickly at idGettr.

View::share('photos', Helpers::flickrPhotos('$api_key', '$api_secret', '$user_id', '24'));

The View

<h2>Flickr</h2>
@if(!empty($photos))
    <ul class="flickr-images">
        @foreach($photos as $photo)
            <li>
                <a href="{{$photo['url_m']}}" rel="nofollow" title="{{$photo['title']}}">
                    <img src="http://farm{{$photo['farm']}}.staticflickr.com/{{$photo['server']}}/{{$photo['id']}}_{{$photo['secret']}}_s.jpg" alt="{{$photo['title']}}">
                </a>
            </li>
        @endforeach
    </ul>
@else
    <p>There are no photos to display from Flickr</p>
@endif

Basically, we're just looping through $photos to build our Flickr gallery. I've included the class <code>flickr-images since we're going to use that next for our javascript. You can read the full Flickr url documentation on an as needed basis. I will say, trying to return a thumbnail in any other mime type than jpg resulted in a 404.

The Javascript

If you haven't discovered Magnific Popup, then you're missing out. You can visit their Github Repo for the source and the documentation is extremely easy to follow. I chose to implement it like this.

<script>
jQuery(document).ready(function() {       
    jQuery('.flickr-images').magnificPopup({
        delegate: 'a', 
        type: 'image',
        gallery:{enabled:true}
    });                 
});
</script>

Conclusion

Now we have a cached public photo feed from Flickr with Laravel. That was simple... If you have any questions or find any errors, please point them out in the comments down below.

TL:DR Version

Helper Method

<?php
class Helpers
{
    public static function flickrPhotos($api_key = '', $api_secret = '', $user_id = '', $photo_count = '24')
    {
        $flickrphotos = Cache::remember('flickrphotos', 60, function() use ($api_key, $api_secret, $user_id, $photo_count) {
            $method = Flickering::handshake($api_key, $api_secret);
            $results = Flickering::getResultsOf('people.getPublicPhotos', array('user_id' => $user_id, 'per_page' => $photo_count, 'extras' => 'url_m'));
            return $results->obtain();
        });
        if(!empty($flickrphotos['photo']))
        {
            return $flickrphotos['photo'];
        }
        else
        {
            return array();
        }
    }
}

Controller

View::share('photos', Helpers::flickrPhotos('$api_key', '$api_secret', '$user_id', '24'));

View

<h2>Flickr</h2>
@if(!empty($photos))
    <ul class="flickr-images">
        @foreach($photos as $photo)
            <li>
                <a href="{{$photo['url_m']}}" rel="nofollow" title="{{$photo['title']}}">
                    <img src="http://farm{{$photo['farm']}}.staticflickr.com/{{$photo['server']}}/{{$photo['id']}}_{{$photo['secret']}}_s.jpg" alt="{{$photo['title']}}">
                </a>
            </li>
        @endforeach
    </ul>
@else
    <p>There are no photos to display from Flickr</p>
@endif

Javascript

<script>
jQuery(document).ready(function() {       
    jQuery('.flickr-images').magnificPopup({
        delegate: 'a', 
        type: 'image',
        gallery:{enabled:true}
    });                 
});
</script>