Gif-Overload {Giphy API}

Last semester, for my final project for Comm Lab: Web, I made an API meshup website LOST, using Youtube, TheCatAPI, Iheartquotes API.

past1

LOST_homepage

past2

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!

Screen Shot 2014-02-05 at 8.33.47 PM

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%;
}

Leave a Comment.