Skip to main content

Quickly create a gallery of images from a list in vim

This is something I run into pretty often, so I thought I'd share how I handle it, in case it's helpful.

Sometimes you have a list of image files, and you need to create the html formatting to make them into a gallery of some sort. Imagine each file has two versions, a full size and a thumbnail image. Pretty common scenario. The URL for the files will look like /images/gallery/full/[filename] and /images/gallery/thumb/[filename]

There's lots of ways to do this, here's what works well for me. First I grab a list of the files from the command line, ending up with something like this

ls -l
-rwxrwxrwx 1 user group 388044 May 25 11:16 IMG_20161205_120541.jpg
-rwxrwxrwx 1 user group 451788 May 25 11:16 IMG_20161215_114201.jpg
-rwxrwxrwx 1 user group 298125 May 25 11:16 IMG_20161216_121618.jpg
-rwxrwxrwx 1 user group 369981 May 25 11:16 IMG_20161216_125940.jpg
-rwxrwxrwx 1 user group 479464 May 25 11:16 IMG_20161216_131010.jpg
-rwxrwxrwx 1 user group 664528 May 25 11:16 IMG_20171206_142202.jpg
-rwxrwxrwx 1 user group 799900 May 25 11:16 IMG_20171213_122802.jpg
-rwxrwxrwx 1 user group 474816 May 25 11:16 IMG_20171213_141802.jpg
-rwxrwxrwx 1 user group 825686 May 25 11:16 IMG_20171213_145425.jpg
-rwxrwxrwx 1 user group 452369 May 25 11:16 IMG_20180121_112151.jpg
-rwxrwxrwx 1 user group 555198 May 25 11:16 IMG_20180121_130043.jpg
-rwxrwxrwx 1 user group 579954 May 25 11:16 IMG_20180121_142140.jpg
-rwxrwxrwx 1 user group 517832 May 25 11:16 IMG_20180606_151321.jpg
-rwxrwxrwx 1 user group 547884 May 25 11:16 IMG_20180609_155512.jpg
-rwxrwxrwx 1 user group 387731 May 25 11:16 IMG_20180616_132019.jpg
-rwxrwxrwx 1 user group 402792 May 25 11:16 IMG_20181013_180230.jpg
-rwxrwxrwx 1 user group 653990 May 25 11:16 IMG_20190930_144423.jpg

In vim, there's a handle block visual mode which allows you to select blocks of text, rather than whole rows. To use it, hit ctrl+v, then select all the columns up to the actual filenames:


And delete that stuff, so you end up with just a list of filenames, one per line. Yes, I know there's other ways to end up with this list, but I can never remember them - and this is faster for me :)

Now we're going to use a fun little bit of regex to drop in the formatting. Of course you can edit this to your own needs, but the idea is that we're going to select everything on each line of the image list, and reformat that line with all the necessary html around it. The pattern looks like this:

s/\(.*\)/<div class="gallery-image"><a href="_FULL_\/\1"><img src="_THUMB_\/\1" alt=""><\/a>\/div>/g

The first bit ("/\(.*\)/") choose every character on that line and stories the match - the filename. The filename is then inserted in the 2nd part of the regular expression (the replacement part) via the "\1". If we'd had two matching sections in the first part, then the 2nd match would be referenced by "\2".

I use two placeholders to keep things a little simpler - _FULL_ and _THUMB_ will be replaced next by the correct path to use for either the URL of the full size image or the URL of the thumbnail image. Those are simple replace regular expressions that look like this:

s/(_FULL_)/\/images\/gallery\/full\//g

Really only trick thing is not missing the "/" characters that you need to escape (red above).

Once this is all done you should have a nicely formatted chunk of html ready to go! I use this often enough that's it's generally in my buffer of  recently used commands - but it'd be easy enough to set up a key mapping or something.

Labels:

Comments

Post a Comment

Popular posts from this blog

Another VI tip - using macros, an example

God I love VI. Well, actually, vim but whatever. Here's another reason why. Suppose you need to perform some repetitive task over and over, such as updating the copyright date in the footer of a static website. (Yes, yes I know you could do a javascript thing or whatever, just bear with me.) Of course you could just search and replace in some text editor, changing "2007" to "2008" (if you're stupid) - and you'll end up with a bunch of incorrect dates being changed, most likely. What you need to do is only change that date at the bottom. And suppose that because of the formatting, you can't use the "Copy" part of the string in a search replace - perhaps some of the pages use "©", some spell out "Copyright" etc. This is where vi macros come in handy. A macro in vi is exactly what you expect, it records your actions and allows you to play them back. To start recording, press q followed by a character to use to "stor...
6 comments
Read more

Using FIle FIlters in FileZilla

Here's a handy tip for situations when you want to download a large number of files - but only of a certain type. For example, perhaps you want to download all the PHP files from a largish website, scattered through many subdirectories. Perhaps you're making a backup and don't want any image files, etc. FileZilla (still the best FTP in my opinion) has a handy feature called filename filters - located under the Edit menu. Here you can set various filters that filter out files based on their filename. Took me a minute to figure that out - you're saying show only PHP files, rather you're saying filter out files that do not have ".php" as their suffix. For some reason, that seems a little backwards to me, but whatever. It works quite well. You can also check whether the filter applies only to files, only to directories - or both. In this example, you'd want to check only files, as otherwise you won't see any directories unless they happen to end in...
1 comment
Read more

Great google article

Over on Maximum PC - there were a few things I didn't know you could do with the various Google apps. One is uploading files to google docs - any file. Which ties in well with my previous post about storing passwords - I uploaded a copy of my password safe file to google docs as a backup. Can't hurt, right? Also, I wasn't aware that you could set up forms in google docs that act as surveys, and then store the results in a google docs spreadsheet. This is a little alarming, as a decent amount of my work involves coding up custom surveys similar to this...
1 comment
Read more