Two thousand Instagram snapshots!

in code

Gallery of Instagram images

Holy small landmark. I had a great suggestion for what photograph to upload:

A snapshot of a a [sic] large multi-monitor display showcasing your previous 1,999 snapshots. Moffy

I keep a copy of each Instagram snapshot in my Dropbox. There is a mix of photographs from my old Wildfire S and newer iPhone; some were added by hand, and a few by script, but most come from Dropbox upload. It’s a great workflow: Snap, process, upload, share, and forget while it is backed up automatically.

The first step for a photowall/montage is to select random photographs out of the directory:


photoCount=$(ls -1 $photoDir | wc -l)

if [[ ! -d $destinationDir ]]; then
    mkdir $destinationDir

cd $photoDir
echo $photoList

while [[ $imgNum -le $photoCount ]]; do
    rand=$(($RANDOM % $photoCount))
    selectedImage=$(ls -1 . | sed -n "$rand"p)
    cp -v "$selectedImage" "$destinationDir/$imgNum.jpg"
    let imgNum++

exit 0

The second step is to shrink them:

cd [mark][~] $ cd instagram_montage/
[mark][instagram_montage] $ for img in *.jpg; do mogrify -resize 400x+0+0 -quality 80 -verbose $img; done 

The third step is to assemble the gallery. I already wrote a simple gallery which utilizes a row of images. Copy the gallery code, removed the lightbox parts, and create a page-wide gallery. Furthermore, I reduced the padding between images, and row sizes too.

The fourth step was to add a small function to insert a given number of the images from the pool:

function addImagesToGallery(imageCount, imageFolder, modifier) {
    for (var i = 1; i <= imageCount; i++) {
        $(galleryClass).first().append('<img src="' + imageFolder + '/' + i + modifier + '.jpg" />');

Two thousand shots on screen wasn’t practical if I wanted you to be able to see the images. About 50×50 pixels, and between 25 and 35 images per row is a good balance. Small, but viewable.

var customClass = '.instagram';
var galleryClass = customClass + '-gallery';
var rowClass = customClass + '-row';
// Row lengths will inclusively range between min and max.
var rowSizeMin = 25;
var rowSizeMax = 35;
// For mobile views. Fixed width.
var rowSizeTiny = 20;
// Break point before switching to mobile view.
var mobileSize = 800;
// Include image alt text as anchor title?
var altAsTitle = false;
// Debug. Replace anchor hyperlinks with "javascript:void(0)".
var voidHref = true;
// Two-dimensional array of all gallery images on this page.
var galleryImages = [];
// Total images.
var totalImages = 700;
var imageSourceFolder = 'img';
var imageModifier = 0;


in me

Your email address will not be published. Required fields are marked *