About
Kevin Tracy's Resume Benevolent Volunteerism Kevin Tracy's Now Page Kevin Tracy's Skills & Talents Unsolved Mysteries Kevin Tracy's Goals The History of KTracy.com KTracy.com Archives
Museum News Issues MERCH STORE Contact
THE OFFICE OF THE MINISTRY OF INFORMATION TECHNOLOGY
CARL SVEN

2022-10-05

How to Display The Most Recent Image In A Directory In A Sidebar

Last month we announced that we were going to automate the process of displaying the a Recent Image from Kevin Tracy in the right sidebar of KTracy.com. We explored different options; which will be discussed below, but first, here's what we actually did to get it working.

The (Current) Process of Getting The Image to the FTP

Instagram

For now, Kevin Tracy is posting the image on Instagram. He does this with exceptional reluctance due to his hatred of social media, and especially Instagram's parent company Meta. However, he's using Instagram because it downscales the image to a very manageable size (about a 65kb WEBP or 200kb JPEG). Since KTracy.com was hand coded to load faster than WordPress, this is much better than bringing in a 3MB photo directly from Kevin's Google Pixel 6 Pro.

IFTTT - If This Then That

When a picture is posted to Kevin Tracy's Instagram account, it triggers a widget in IFTTT that automates the process of downloading that picture on Instagram and uploading it to two cloud services, Dropbox and Box.

The reason we're uploading to two cloud services is because either IFTTT or Dropbox is sometimes screwing up the connection and the image fails to download. We think the issue has been resolved, but we may have to switch cloud services for the website if we keep having problems with Dropbox.

Multcloud

Unfortunately (and inexplicably), IFTTT does not have a connection for FTPs. So, to get the image to the FTP, we need another automation service. After a little bit of research, we decided to use Multcloud. Multcloud is a great service allowing you to not only transfer files between cloud services, but also automatically synchronize two or more cloud services.

This isn't an advertisement for Multcloud, but they have three pricing plans as of October 2022.

FREE: 5GB of data traffic per month with 2 data transfer threads

$59.99/Year (normally $119.88): 1200GB data traffic per year (average 100GB/month) with 10 data transfer threads

$99.99/Year (normally $239.76): 2400GB data traffic per year (average 200GB/month) with 10 data transfer threads

The paid plans have scheduled transfers, synchronizations, and backups. However, with the free plan, it looks like Multcloud gives you one the ability to do one transfer or synchronization. That's all we need, so we're running on the free Multcloud plan. With that said, we may actually consider a paid plan because this is a really good service since we do a lot of work on the cloud and back it up only to harddrives at KTracy.com. Having a second (and third) cloud service provides a lot of redundancy that is very much worth the price tag. However, we need to crunch some numbers before pulling the trigger on that because Kevin Tracy works excessively with enormous bitmap images for his high resolution pixel art and is actively planning on returning to editing videos soon. We may actually run into the data cap on those plans.

Anyway, with Multcloud, we are synchronizing a folder in Dropbox with Kevin's Instagram photos, Fitbit data, and eventually more to the FTP.

The PHP and HTML

From this point, we're ready for the code.

What Works

All of the header, sidebar, footer, CSS, and stuff common to every page on KTracy.com is kept in a separate includes directory. In this directory is a subdirectory called "recent-image" and in here are the latest images as well as a php file with the following code designed to pull the latest image in the folder.

<!DOCTYPE html>
<html lang="en">
<head><title>Kevin Tracy - Recent Image</title></head>
<body><center>
<?php
$pictures = glob("recent-image/*.*"); 
$no_pictures = count($pictures)-1;  
$limit = $no_pictures-0;
for( $i = $no_pictures; $i >= $limit; $i--){
echo "<img width=300px src=\"".$pictures[$i]."\" />\n"; 
}  
?></center>
</body>
</html>

Then, in the right-sidebar, we use an iframe to call this PHP file.

<center>
<iframe src="https://www.ktracy.com/ktracy-includes/recent-image.php" frameborder="0" width=100% height=350px></iframe>
</center>
What Didn't Work

So, our initial thought was to do this entirely with PHP without the iframe. Kevin Tracy really didn't want to use iframes anywhere on KTracy.com because of how poorly they were used in the 1990s and early 2000s. Since 2005, KTracy.com has successfully used PHP includes for everything without requiring iframes.

PHP alone wouldn't work because of a combination of unique problems.

  1. IFTTT won't overwrite files in clouds: Ideally, PHP wouldn't even be necessary. Our plan was to have IFTTT name every new Instagram file "recent-image.jpg". Then, a simple IMG tag would point to that file and we'd be in good shape. Since IFTTT won't overwrite files, it instead names files "recent-image.jpg", "recent-image(1).jpg", "recent-image(2).jpg", and so forth.
  2. The PHP glob function only works in file systems: Because we had different file names in the folder, we needed to use PHP to pull the most recent. We initially tried the code above, but with $pictures = glob("https://www.ktracy.com/ktracy-includes/recent-image/*.*");; but we discovered that the glob function only works on file systems and couldn't operate with https. The only full path glob could pull was the full file path from the FTP; which can't be used in HTML.

However, while troubleshooting this, we discovered that if we only look in a single subdirectory (like above), we can avoid needing an entire path. When we did this without an iframe, it would work on https://www.ktracy.com/index.php, but not on any of the other pages in our various subdirectories. The iframe lets us get around this limitation by rendering the page from the static location instead of loading the code and interpreting the path based on whatever subdirectory the active page is in.

The Future Plans

Switching from IFTTT, Dropbox, and Multcloud to a Raspberry Pi

The more services we use, the more likely it is that we'll have problems with Kevin Tracy eventually gets canceled for being a devout Catholic. We firmly believe it's only a matter of time before something happens and somebody falsely claims we're hating on people here because they're acting like fools.

Our eventual goal is to have all automations for KTracy.com and everything inside the KTracy.com HQ and KTracy Manor all controlled by two or three Raspberry Pi computers with redundant battery backups.

The great thing about this is that we'd be able eliminate the PHP and iframe because we'd be able to overwrite files and use a simple IMG tag to call the image; which will always be updated.

Eliminating Instagram

Kevin Tracy really hates giving metadata to Meta. Our goal is to create something that will automatically downsize the image from Kevin's phone before putting it directly on the FTP (or a Raspberry Pi to put on the FTP).