ckportfolio.com - Image Retrieval via cURL Request to Flickr

Image Retrieval via cURL Request to Flickr

Preparation

Using cURL, we can retrieve data from remote sources and manipulate as necessary. While today's API endpoints require complex authentication processes (ex. OAuth), Flickr's public feed is one of the rarer, simpler image source API endpoints available online.

The following URL provides the list of recent photos tagged "ocadu" in JSON format:

https://www.flickr.com/services/feeds/photos_public.gne?tags=ocadu&format=json&nojsoncallback=1

As evident in the above documentation, the following URL parameters make this possible:

  • tags determines the keyword used to search Flickr
  • format determines the output format
  • nojsoncallback notes that this output should be provided as a raw JSON document with no extra features
{
        "title": "Recent Uploads tagged ocadu",
        "link": "https:\/\/www.flickr.com\/photos\/tags\/ocadu\/",
        "description": "",
        "modified": "2019-06-03T20:25:38Z",
        "generator": "https:\/\/www.flickr.com",
        "items": [...]
}

cURL request

With this insight, we can move onto building the URL dynamically using the newly created $s variable and making the necessary cURL request. Before that, however, we want to determine if the URL has a keyword parameter to begin:

gallery.php

<? if ($s == "") { ?>

    <div class="alert alert-info text-center">Start your search using the input field above.</div>

<? } else { ?>

<? } ?>

Upon loading the page without any search query, the page will display a simple alert message:

The "else" section of the conditional statement is triggered should the $s variable contain any text, and we can use the following standard cURL call:

gallery.php

...

<? } else { ?>

    <?

        $url = 'https://www.flickr.com/services/feeds/photos_public.gne?tags='.$s.'&format=json&nojsoncallback=1';

        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

        $result = curl_exec($curl);
        $result = json_decode($result);

        echo "<pre>";
        var_dump($result);
        echo "</pre>";

        curl_close();

    ?>

<? } ?>

The above snippet makes a call to Flickr using the following steps:

  • Dynamically generate the $url variable based on the $s variable
  • Initialize and configure cURL
  • Request cURL access to the source defined by $url
  • Convert the returned JSON to PHP array
  • Display the contents of the array
  • Close the cURL instance

We can confirm that the page now has an ability to dynamically retrieve the images from Flickr.

Loop and Styling

Instead of displaying the entire array contents, we can use PHP loop to iterate through the list of retrieved items and present in a more user-friendly fashion. We can see that the items property of the $result variable represents the list, and proceed like the following after removing var_dump() in the code:

gallery.php

...

<? } else { ?>

    <?

        $url = 'https://www.flickr.com/services/feeds/photos_public.gne?tags='.$s.'&format=json&nojsoncallback=1';

        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

        $result = curl_exec($curl);
        $result = json_decode($result);

        curl_close();

    ?>

    <? foreach ($result->items as $item) { ?>

        <?
            var_dump($item);
        ?>

    <? } ?>

<? } ?>

Placing var_dump() within the loop allows us to inspect the content of each individual item. Upon identify the general structure, we can proceed with using HTML elements inspired by Bootstrap examples:

gallery.php

...

    <div class="card-columns">

        <? foreach ($result->items as $item) { ?>

            <div class="card">
                <a href="<?= $item->link ?>" target="_blank">
                    <img src="<?= $item->media->m ?>" class="card-img-top">
                </a>
                <div class="card-body">
                    <h5 class="card-title"><?= $item->title ?></h5>
                    <p class="card-text"><?= $item->author ?></p>               
                </div>
            </div>

        <? } ?>

    </div>

...

The snippet in the loop refers to the following properties in $item:

  • link provides the Flickr permalink of the image
  • media->m provides the medium version URL of the image
  • title provides the author-provided title of the image
  • author provides the alias / name of the author

We now have a fully-functioning image search page based on user-provided query.

Fin