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/';

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