Episode 2 - Dirt Simple Photo Gallery

Dirt Simple Photo Gallery is the program that started me down the Plain Text Programs path. It predates my own thinking about Plain Text Programs by at least a decade. Ever since I wrote it I use it all the time. It is now my preferred web page generator for all kinds of web pages, not just galleries.

Like most of my programs I wrote it because I needed it. Vivian and I were putting on music events like Blues Fest, Sunday In The Park, Jazz Thursday, New Jazz In Jonesboro, and Bebopalooza. I recorded all the shows. Sometimes video, always audio. And we loved taking pictures of the musicians singing and playing.

After the shows we would dump the photo files to a hard drive, make all the original photos read only, and back them up to a CD or DVD. We really enjoyed scrolling through the photos, picking the ones we liked, cropping them and enhancing them, and resizing them for the internet.

And then that's where it fell apart. We recorded the show. We took the pictures. We cropped the pictures and had them ready to go for our Delta Boogie website. And we didn't want to write the html.

Some days we would have five or six bands playing. We usually had ten to twenty photos of each band that we picked out of hundreds of photos taken. Do the math. That's a lot of typing HTML code like a href =, img src, etc. A lot a captions to write. A lot of work to get done in a week. Because the next weekend we had another show. Another set of photos. Another bunch of html backlog.

And the thing I found out. If we didn't get the pages posted right away we almost never had time to post them later. I mean we had kids to raise, cooking to do, cars to fix, school to attend, not to mention work.

So, I loved writing programs more than I loved marking up html. And I could write one program and avoid marking up tons of html. And so I wrote the Dirt Simple Photo Gallery.

Even back in the dark ages of the internet also known as the nineties there were photo gallery programs. And just like today they were cumbersome and running them was a lot like data entry. You know what I hate worse than writing html? Data entry.

I had this idea. I would take all the photos we had ready for a gallery and I would upload them to a directory on our server. Then I would upload an index.php file and we'd have a photo gallery.

And that's just how Dirt Simple Photo Gallery works. And if that's really all you need you're done.

It wasn't quite all we needed. So I added a title.txt file and a notes.txt file so there could be a bit more than just the photos and captions on the web page. I was careful that I didn't have to write any html in the notes.txt file. The program even automatically turns copy and pasted links into hot links.

Now, you can include html in the notes.txt file. You can even embed iframes if you want to include an audio or video player. But you don't have to. Also, iframe embeds are just a copy and paste exactly like links. Easy peasy.

There's also the problem of the captions and the sort order of the photos.

Captions

I use the file names to carry the meta data required for captions and sort order.

These are the characters I use in the file names. Alphanumeric, commas, apostrophes, dashes, and underscores. I don't use spaces but the underscores are converted to spaces in the captions. I use Thunar and I love the bulk rename option where I can search and replace a set of file names and change all the spaces into underscores.

I have code that allows you to include special characters in your captions by using html character sets but it's confusing to think about. And I discovered the only special characters I really needed were dashes, commas, and apostrophes. All three of these characters are legal in file names on all major systems. Dashes are not problematic. Commas can cause problems if you are using comma delimited data but, I'm not, so no worries. Apostrophes can also be an issue because in php they are used as single quotes and can be used to delimit strings in the code. There is a way around this with php. Use double quotes to surround the entire string. If there is a place inside of that string where you would use single quotes, which is not uncommon in html, replace the single quotes with escaped double quotes, that is ". So that's what I did.

So now I can use all the apostrophes I want in my file names and they fly right through my code, never accidentally truncating a string and throwing errors.

Commas and apostrophes are important in captions. Captioning group shots without commas leads to misunderstanding people's names. And if your caption has a possessive in it like Joe's Garage leaving the apostrophe out is just wrong.

Using double quotes in a file name will truncate strings in the php code and throw errors. Usually, anywhere you would want a double quote a single quote will do.

There are other special characters, like dashes, that aren't problematic. Forward slashes and back slashes should not be used in file names ever. Some special characters may work on some systems and not on others. I've been using this program for almost 25 years and I really want commas and apostrophes and don't really care about other special characters in captions. You may have special needs for special characters I don't. That's why it's open source. If you need something the program isn't designed to provide test it. Fix it. Right now there are fewer than 100 lines of code in the program. I have confidence in you.

Sorting

Default sorting of images is alphabetical by file name. If you just name your files with good captions and don't add any numbers as a prefix that's what you'll get. Alphabetical by caption. This may be just what you need.

If, however, you want some other sort order you can prefix your files with nnn- where n is any integer.

000-filename.ext displays the picture at the top of the page. If the photo is narrow enough, the text from notes.txt will wrap around it to the left.

All the photos numbered 001- to 999- will display in a single column below the text. Unnumbered photos will also display below the text in alphabetical order. So if you want a photo at the top of the page add the prefix 000- to the file name. If alphabetical order is what you want for the rest of the photos you don't have to rename them.

Permitted extensions are jpg, png, or gif. (It's hapeg stupid!) It's easy to add other permitted extensions in the code but, of course, they have to be rendered by a browser. I did not include the jpeg extension choosing to rename jpeg files to jpg. This made it slightly easier to code.

There is a config.inc file where you can set your table width. The default is 700. I resize my photos to be 600 max width. I usually use jpg files with a quality level of 90. This reduces storage space and enables fast loading of images. The config.inc file also allows you to change background color, text color, link color, etc. There is also a CSS section in the config.inc file so you can change the font, the headline sizes, etc. Or add your own CSS.

If you have trouble getting the text wraparound to look good on your page there is a way to disable it in the config.inc file.

Install the page with ftp. Make a directory, where you want it on your website, and give it a good name. Upload index.php, title.txt, notes.txt, config.inc, and the image files into the directory. Go to your website and check it out. That's it.

Page maintenance is the same. Fix captions by renaming files. Add and delete images. Update the title or the text in notes.txt and upload the changes. Change the font, colors, or CSS in config.inc and upload the changes.

I have put up a demo site on infinityfree.com.

And I am posting my show notes on my blog at
https://home.gamerplus.org/

I will include links there to the demo site, the link to the comment thread for this podcast on Mastodon, and the link to the git repository on Codeberg.

If you can't find Dirt Simple Photo Gallery use the search feature.

To Network With Hairy Larry I have another plain text program at
https://deltaboogie.net/

If you use or have written Plain Text Programs please let me know. I want to do a podcast about them.

Thanks for listening.

More Links

• Comment thread at Gamer+DBN on Mastodon

• Dirt Simple Photo Gallery Demo
  https://ptp.000.pe/Dirt_Simple_Photo_Gallery

• Repository on Codeberg
  Dirt Simple Photo Gallery
  https://codeberg.org/hairylarry/DirtSimplePhotoGallery