<h1 id="episode-2---dirt-simple-photo-gallery">Episode 2 - Dirt Simple
Photo Gallery</h1>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>And that's just how Dirt Simple Photo Gallery works. And if that's
really all you need you're done.</p>
<p>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.</p>
<p>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.</p>
<p>There's also the problem of the captions and the sort order of the
photos.</p>
<h2 id="captions">Captions</h2>
<p>I use the file names to carry the meta data required for captions and
sort order.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="sorting">Sorting</h2>
<p>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.</p>
<p>If, however, you want some other sort order you can prefix your files
with nnn- where n is any integer.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>I have put up a demo site on infinityfree.com.</p>
<p>And I am posting my show notes on my blog at<br />
<a href="https://home.gamerplus.org/"
class="uri">https://home.gamerplus.org/</a></p>
<p>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.</p>
<p>If you can't find Dirt Simple Photo Gallery use the search
feature.</p>
<p>To Network With Hairy Larry I have another plain text program
at<br />
<a href="https://deltaboogie.net/"
class="uri">https://deltaboogie.net/</a></p>
<p>If you use or have written Plain Text Programs please let me know. I
want to do a podcast about them.</p>
<p>Thanks for listening.</p>
<h2 id="more-links">More Links</h2>
<ul>
<li><p>Comment thread at Gamer+DBN on Mastodon</p></li>
<li><p>Dirt Simple Photo Gallery Demo<br />
<a href="https://ptp.000.pe/Dirt_Simple_Photo_Gallery"
class="uri">https://ptp.000.pe/Dirt_Simple_Photo_Gallery</a></p></li>
<li><p>Repository on Codeberg<br />
Dirt Simple Photo Gallery<br />
<a href="https://codeberg.org/hairylarry/DirtSimplePhotoGallery"
class="uri">https://codeberg.org/hairylarry/DirtSimplePhotoGallery</a></p></li>
</ul>
