100 Happy Days
Posted on 2014-04-06
A few people from work convinced me to participate in 100 Happy Days. Since I'm already doing a "selfie a day" so I figured adding one more photo a day wouldn't hurt. What I didn't want to do is post to the various social media sites every single day and spam all my followers. Hazel and my blog helped me solve this problem.
Hazel
Similar to my previous post, I'm using Hazel to detect special types of photos. I decided for 100 Happy Days I would always take the photos using the default Camera in square mode.
Hazel makes this really simple. Each time a photo that matches the criteria comes into my Dropbox Camera Uploads folder, it gets resorted and renamed to YYYY-mm-dd.jpg.
This simply takes care of the photos themselves. But now I want them to also appear on my blog. I have a separate rule that watches this new folder of photos and moves them into my Pelican project folder.
The key to this one is that I name them with sequential numbers, starting with 1.jpg. This will be useful later for my blog.
Pelican Blog
I decided to set up a hidden page on my blog to host these images. I created a custom template since it's fairly unique and different from the rest of my blog. The meat of the template is just this:
<article>
<h3><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></h3>
<div id="two-columns" class="grid-container" style="display:block;">
<ul class="rig columns-2">
</ul>
</div>
</article>
I'm using the CSS for the gallery from this post by Ali Jafarian.
This is where my Hazel photo naming comes in handy. I'm using a simply JavaScript function to embed these images on page load.
function createImages() {
start_date = new Date(2014, 03, 03) // April 3, 2014
days_passed = Math.floor((new Date() - start_date) / 1000 / 86400);
extension = '.jpg';
for (var i = 1; i <= days_passed + 1; i++) {
var li = document.createElement('li');
var img = document.createElement('img');
img.src = '/images/100daysofhappiness/' + i + extension;
img.setAttribute("onError", "this.onerror=null;this.src='/images/imagenotfound.jpg'");
var h3 = document.createElement('h3');
h3.textContent = "Day " + i;
li.appendChild(img);
li.appendChild(h3);
jQuery('.rig').append(li);
}
}
jQuery(document).ready(function() {
createImages();
});
I can easily compute the number of days that have passed and safely assume that an image exists for each of those days. I learned today that if you add the attribute onError to an image, you can create a fallback image in case the real image source doesn't exist.