October 01, 2024

HPR4217: Episode 2 - Dirt Simple Photo Gallery

11 minutes

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

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.