Last semester, for my final project for Comm Lab: Web, I made an API meshup website LOST, using Youtube, TheCatAPI, Iheartquotes API.
LOST_homepage
LOST_”No, I’m not.” page
It’s interesting to see images animated in the stop-motion way, so I want to do more with GIFs first, and then later maybe develop into video with sound. For an assignment to build single web page that displays (some of) the data you found with some basic css styling, I found an API from Giphy, a animated GIFs search website. On the Github of Giphy, the API is well documented and has following functions: search, GIF by id, translate, random, trending. And also, according to their Github,
The Giphy API implements a REST-like interface. Connections can be made with any HTTP enabled programming language. The Giphy API also implements CORS, allowing you to connect to Giphy from JavaScript / Web browsers on your own domain.
To warm up my API-skill for new semester, I use search function, and give 3 choices: Cat, Grilled Cheese, and Coding to display 25 related GIFs from Giphy API, and also a reset button to display pure background. Unfortunately the search function gives you fixed searching result. Might need to twig the offset parameter… Check it out!
And here are the codes.
php file
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<title>Giffff</title>
</head>
<body>
<!-- white words-->
<h1>Gif-Overload!</h1>
<!-- rainbow words -->
<!-- <h1><span class="rainbow">Gif-Overload!</span></h1> -->
<form align="center" method="post">
<div class="button">
<button type="submit" value="clear" name="choice"> Reset </button>
</div>
</form>
<form align="left" method="post">
<div class="button1">
<button type="submit" value="cat" name="choice"> Cat </button>
</div>
</form>
<form align="center" method="post">
<div class="button">
<button type="submit" value="grilled+cheese" name="choice"> Grilled Cheese </button>
</div>
</form>
<form align="right" method="post">
<div class="button2">
<button type="submit" value="coding" name="choice"> Coding </button>
</div>
</form>
<p align="center">
<?php
$choice = $_POST['choice'];
// mode: search
$url = 'http://api.giphy.com/v1/gifs/search?q='.$choice.'&api_key=dc6zaTOxFJmzC';
// mode: translate
//$url = 'http://api.giphy.com/v1/gifs/translate?s='.$choice.'&api_key=dc6zaTOxFJmzC';
// mode: random
// $url = 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='.$choice.'';
// Get the document at this url
$response = file_get_contents($url);
// echo $response; //debug
// Parse XML with SimpleXML in PHP http://www.php.net/manual/en/simplexml.examples-basic.php
$pics = json_decode($response);
//var_dump($pics); // take a look at this to see what data you get back
if ($choice == 'clear') {
echo '';
} else {
for ($i=0; $i<25; $i++) {
// mode: search
echo '<img src="'.$pics->data[$i]->images->fixed_height->url.'">';
}
}
// mode: translate
//echo '<img src="'.$pics->data->images->fixed_height->url.'">';
// mode: random
//echo '<img src="'.$pics->data->image_url.'">';
?>
</p >
</body>
</html>
css file
body{
background-image: url('galaxy.png');
}
h1{
text-align: center;
font-family: 'Reenie Beanie', cursive;
font-size: 50px;
font-weight: bold;
color: white;
}
.button1 {
position: absolute;
top: 140px;
left: 20%;
}
.button2 {
position: absolute;
top: 140px;
left: 80%;
}
