Building a local version of Giphy - Part 2 LiveCoding

<ul>
	<li><strike>Don't rebuild resized images each time the page is loaded</strike></li>
	<li><strike>Display the file names to get a quick search going</strike></li>
	<li><strike>Get the resized gifs to animate</strike></li>
	<li><strike>Size both width and height of preview images to drop into a square area</strike></li>
	<li><strike>Get some CSS going to make the display nicer</strike></li>
</ul>

<ul>
	<li>Present some random images at the top of the page each time it loads</li>
	<li>See if you can use EXIF metadata to store tags and search terms</li>
	<li>Log which images get used</li>
	<li>If exif data works, build a tool to edit it on the gifs</li>
	<li>If performance becomes an issue, do some pagination, but so far that isn't a problem</li>
	<li>Make a tags filter that loads images with a specific tag</li>
  <li>Try to make it so the main page doesn't jump to the top when you select a gif</li>
</ul>

<?php
function console_log($output, $with_script_tags = true) {
    $js_code = 'console.log(' . json_encode($output, JSON_HEX_TAG) .
');';
    if ($with_script_tags) {
        $js_code = '<script>' . $js_code . '</script>';
    }
    echo $js_code;
}

$resize_command =
  sprintf(
    '/usr/local/bin/convert %s -resize 200x200 %s',
    $gif_file,
    $resized_file_path
  );

  ---


  General page I like:

  https://www.w3.org/Style/Examples/007/figures.en.html

  ---


  CSS for centering

  https://jsfiddle.net/dnk7oc6u/1/