1 comment

  • , over 5 years ago


    I just wanted to share something I have been working on. I recently had a daughter so I decided to build a website for her. It's less about the design and more about some of the technical things I did under the hood...

    Cool Thing #1

    I'm using the real-time API from Instagram to pull in photos that use the hashtag ‪#‎ZadieAlyssa‬. The photos or video are downloaded and added to the WordPress media library so I have a copy of them in case Instagram suddenly turns into MySpace 2.0 and goes away. Don't worry I have whitelisted usernames for my wife and I but posts from anyone else have to be approved before being published to keep the spammies at bay. The code for that is on GitHub at https://github.com/kingkool68/zadieheimlich/blob/master/wp-content/themes/zadie-heimlich/functions/instagram.php

    Cool Thing #2

    I wanted the ability to create photo galleries. Uploaded media in WordPress is constrained to a single parent post/page/whatever which makes it tricky to create proper gallery pagination. People seem to get around this by displaying larger versions of media in a lightbox presentation. This is ok but I want real permalinks to work without relying on JavaScript. So I piggy-backed on WordPress' native gallery shortcode and built what I call Post Galleries. Here is an example: http://zadieheimlich.com/1-month-photoshoot/

    Now when clicking on a larger version you are taken to a URL like example.com/post-name/gallery/attachment-slug/ If you change the order of the images in the gallery shortcode then the order of the images in the post gallery changes to reflect that as well. An attachment can be used in as many galleries as you want and it all just works.

    To make browsing through the gallery of images easier, I turbo charge it with JavaScript and PJAX. Use your arrow keys to go between the images. The prevalent thinking is to use some sort of client-side JavaScript templating foo to whip up some JSON data into HTML you can interact with. What I do instead is use a little bit of JavaScript to fetch the next/previous page in the gallery, pull out the part of the page I want (‪#‎content‬), and replace the HTML in the DOM when you go to the next page. There's a step for preloading new pages in the background while you're gawking at photos of my cute kid so when you go to the next image it appears instantly! The best part is I only need to make changes to the template in one place on the server side if I want to change the layout. No need to duplicate templating logic in PHP and JavaScript. And if you don't have JavaScript the Next and Previous links still work as regular boring old links. How quaint.

    But why stop there? Since I can prefetch pages via AJAX and I have the power of JavaScript at my disposal, why not figure out what size the window is and modify the URL to be fetched so the images that are fetched are an appropriate size for the window? So that's what I did. If you're viewing the site in a 360px wide window, the URLs that are fetched get a size parameter appended so a smaller image is loaded instead of the usual 1024px wide version. This helps speed things up and save on resources for processing the page on smaller screens.

    Normal: http://zadieheimlich.com/1-month-photoshoot/gallery/what-are-you-doing/ 360-wide: http://zadieheimlich.com/1-month-photoshoot/gallery/what-are-you-doing/size/360-wide/

    Here's the PHP that makes these Post Galleries work https://github.com/kingkool68/zadieheimlich/blob/master/wp-content/themes/zadie-heimlich/functions/post-galleries.php And the JavaScript on the frontend https://github.com/kingkool68/zadieheimlich/blob/master/wp-content/themes/zadie-heimlich/js/post-gallery.js

    Ok that was a lot longer of an explanation than I intended but I knew you guys would grok it and my wife could care less about the behind the scenes thinking that went in to this but loves that Zadie has her own site that is speedy and works when she sends it to grandma on her rural 1mbps AOL connection.

    TL;DR: I made a cute daughter and a cute daughter website (http://zadieheimlich.com). I spent a lot of time making it zippy. I hope you appreciate my efforts. Thanks!

    0 points