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

Labels:

Comments

Post a Comment

Popular posts from this blog

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

Cleaning content from OpenOffice using Perl

Open office is great software for a number of things - I use it as my office software instead of paying a premium for Microsoft office. But one thing it's not so hot at is converting documents to clean HTML. And one of the main things I use it for is adding content to sites that clients send me in word files or excel spreadsheets. Of course, you can always cut and paste, but that loses a lot of formatting. For example, if the content uses a lot of italics, bold text, etc. it can be a huge pain to go back and put all that back in. Another common situation is a client sending some sort of tablular data in a spreadsheet - for example a list of events. It's the kind of data that can change a lot, and it also needs to be in a table with some decent formatting to be usable. Doing it manually is a lot of grunt work. But grunt work is what computers excel at, and I'm not very good at. So I've developed a number of perl scripts to help streamline this kind of job. I'll go ...
3 comments
Read more