Building a local version of Giphy - Part 2 LiveCoding

September - 2020

NOTE: TODO: This pages needs updates to work with MDX

Things done:

    <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>

Other possiblites for the future,

    <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>

get a little debugger going. you bugger

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;

convert source.png -resize 500x dest.png

$resize_command =
    '/usr/local/bin/convert %s -resize 200x200 %s',


  General page I like:


  CSS for centering