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 Flickrformat
determines the output formatnojsoncallback
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": [...]
}
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:
$url
variable based on the $s
variable$url
We can confirm that the page now has an ability to dynamically retrieve the images from Flickr.
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 imagemedia->m
provides the medium version URL of the imagetitle
provides the author-provided title of the imageauthor
provides the alias / name of the authorWe now have a fully-functioning image search page based on user-provided query.