hpr-knowledge-base/hpr_transcripts/hpr4217.txt

Episode: 4217
Title: HPR4217: Episode 2 - Dirt Simple Photo Gallery
Source: https://hub.hackerpublicradio.org/ccdn.php?filename=/eps/hpr4217/hpr4217.mp3
Transcribed: 2025-10-25 21:33:42

---

This is Hacker Public Radio Episode 4217 for Tuesday 1 October 2024.
Today's show is entitled, Episode 2 Dirk Simple Photo Gallery.
It is part of the series programming 101.
It is hosted by Harry Larry and is about 10 minutes long.
It carries a clean flag.
The summary is, Dirk Simple Photo Gallery put me on the path to plain text programs.
Episode 2 Dirk Simple Photo Gallery.
Dirk Simple Photo Gallery is a program that started me down the plain text programs path.
It predates my own thinking about plain text programs by at least a decade.
For since I wrote it, I use it all the time.
It is now my preferred webpage 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 bebop Alusa.
I recorded all the shows, sometimes video, always audio, and we love 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 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 that's where it fell apart.
We recorded the show, we took the pictures, we cropped the pictures, and had them ready
to go on 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 10 to 20 photos of each band that we picked out of hundreds of photos taken.
Do the math.
That's a lot of typing, HTML cold, like A, H ref, equals, image stores, etc.
A lot of 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 photogallery.
Even back in the dark ages of the internet, also known as the 90s, there were photogallery
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 photogallery.
And that's just how dirt simple photogallery works.
And if that's really all you need, you're done.
It wasn't quite all we needed.
So I added a tile.text file and a notes.text 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.text file.
The program even automatically turns copy and pasted links into hot links.
Now, you can include HTML in the notes.text 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 captions and the short order of the photos.
Captions.
I used the file names to carry the metadata required for captions and sort order.
These are the characters I use in the file names.
Alphanumeric, commas, apostates, 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 to 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
apostates.
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.
Apostitudes can also be an issue because in PHP they are used as single quotes and can
be used to limit strings in the code.
There's 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 escape double quotes, that is backslash
double quotes.
So that's what I did.
So now I use all the apostates I want in my file names and they fly right through my
code, never accidentally truncating a string and throwing errors.
Commas and apostates are important in captions.
Writing group shots without commas leads to misunderstanding people's names.
And if your captions 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, any word you would want to double quote a single quote will do.
There are other special characters like dashes that aren't problematic.
It slashes and backslashes 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 apostapies
and I don't really care about other special characters and 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 filing.
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 n and n dash
where n is any integer.
000-spilename.ext displays the picture at the top of the page.
If the photo is narrow enough, the text from notes.text will wrap around it to the left.
All photos numbered 001 dash to 999 dash 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 dash to the file
line.
If alphabetical order is what you want for the rest of the photos, you don't have to
rename them.
Permitted extensions are JPEG, PNG, or GIF.
It's HPEG 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 JPEG.
This made it slightly easier to code.
There is a config.inq file where you can set your table width.
The default is 700.
I resize my photos to 600 max width.
I usually use JPEG files with a quality level of 90.
This reduces storage space and enables fast loading of images.
The config.inq file also allows you to change background color, text color, link color,
etc.
There is also a CSS section in the config.inq file so you can change the font, the headline
sizes, etc. or add your own CSS.
If you have trouble getting the text wrap around to look good on your page, there is a way
to disable it in the config.inq 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.text, notes.text, config.inq and the image files into the directory.
Go to your website and check it out.
That's it.
Page maintenance is the same.
Fixed captions by renaming files, add and delete images, update the title or text in
notes.text and upload the changes.
Just define colors or CSS in config.inq 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 home.gamerplus.org.
I will include links there to the demo site, the link to the comment thread for this podcast
on Macedon and the link to the Git repository on Codeberg.
If you can't find during simple photogallery, use the search feature.
To network with HeriLarry, I have another plaintext program at deltaboggi.net.
If you use or have written plaintext programs, please let me know.
I want to do a podcast about them.
Thanks for listening.
You have been listening to Hacker Public Radio, as Hacker Public Radio does work.
Today's show was contributed by a HBR listener like yourself.
If you ever thought of recording a podcast, you click on our contribute link to find out
how easy it really is.
Hosting for HBR has been kindly provided by an honesthost.com, the Internet Archive
and our syncs.net.
On the Sadois status, today's show is released under Creative Commons, Attribution, 4.0
International License.