MEMEX is a simple PHP-based tool that finds all the images in a directory and displays them on a page.
The goal of this project was to use a minimal amount of code to create a modern, robust gallery of visual inspiration.
How it works
On each page, a variable in a snippet of PHP defines the path to an image directory:
$www_root = 'http://your-url/img/';
$dir = 'img/';
include('includes/renderer.php');
renderer.php looks for any images in that directory, including JPGs, PNGs, and GIFs. For each image found, it renders in a DIV with a link to view the full-size image in a pure CSS lightbox.
The images are displayed in a simple grid (using CSS Grid) and lazysizes.js is used to lazy load the images.
To help with performance, I create a small version of each image (≤ 600px W), which is displayed on the page. The full-size image is loaded only when it's clicked or tapped.
A bare bones, starter kit version on this application is available on GitHub: memex core.
Design notes
The overall design is inspired by the principles of brutalism and minimalism.
Font: monospace
Colors: #FFFCFA #FFF5EF #A6B4C2 #4F5F6E #140800 #FA8335
A note on file naming
Whenever possible, files are named to give credit to (or at least hint at) the source and/or creator.
For example, a screenshot of a website: someurl.com/project-name becomes someurl_com__project-name.jpg
Tools used
DigitalOcean - web hosting
ImageOptim - image optimization
Figma - vector graphics and logo design
Photoshop - image preparation
sips - super-fast bulk image resizing
Transmit - FTP client
Sublime Text - coding