After migrating to Jekyll, I couldn't figure out what to do with my photo albums, until tonight...
So like I said in yesterday’s blog entry, I talked about migrating this blog to the new format. One of the things I ran into was what to do with my photo galleries that I had out on Flickr. Well I figured it out tonight so I thought I would share it, even though I have already done a blog entry tonight.
While trying to figure out this conundrum, I had research various ways of bringing in the pictures that I have up on Flickr. One way was to do it via a Rubygem and there were a couple of different ones I looked at. Like this one and this one. But when I attempted to do it, I failed miserably. Also, I wanted this blog to be as minimal as possible and try to do it without plugins.
This turned out to be difficult. I even tried doing something like this:
Can you imagine doing this for about 100 images. I think I got about 12 images in and gave up on that idea, even though I had all of the image links. It just wasn’t fun. Then tonight, I started doing more research and came across this blog entry. It talked about embedding Flickr pictures in your website. I copied over the code and then put in my own code. It looked like this when I first copied it over:
Then since it had css in it with the .embed-container I took that part out and put it into one of my scss files. This left me with just the div and iframe. Then I thought, what if I want to put more galleries in my blog, let’s create a layout for it. So I copied my page-fullwidth.html layout and edited the ```<!doctype html>
Migrating to new format </head>
Time for a new theme
Migrating to new format
It took me a while but I finally changed up my blog....again!
So you may have noticed the new format of my blog. Long story short, I was running Octopress and decided to change it as the theme with it just seemed “old”. So I delved into a lot of different static blog generators. I tried jekyll, hugo, hexo, and docpad. Each of these has their own merits and their ups and downs.
What swayed me in the end was I found this theme. I really liked it and its responsiveness. I wanted a responsive theme so that this blog could be easily seen on a big screen, a tablet, and even a phone. Don’t get me wrong, the Octopress theme that I had was also responsive but I saw a lot of potential with this new theme.
As you can see, I have changed somethings to fit my likings, like the cloud gif in the header. I ran across this gif a while back and wanted to reuse it.
So with quite a bit of tweaking, including a lot of reworking of my markdown posts that I had in Octopress. I added pictures for each entry and some other addons like a teaser and a subheadline. The only thing I have left is to figure out a way to get my picture album from flickr/dropbox/picasa into it. Then it will be complete. That is the final touch I will have on it and then I will focus on automating it.
Throughout this process, I have learned a little bit of javascript, markdown, and even a little go so in changing I think I will be able to possibly move to something else down the line if I want to or maybe even use a javascript-based automation toolkit like grunt to move forward.
``` section, putting the div and iframe in it. Then to make it easy to create pages, I stripped out the album number and gave it a variable to be in the header information section of the page. This is what that section of code looks like:
If you notice, the variable is `````` and so then I just have to have in my markdown page:
---
layout: gallery
title: "gallery title"
date: "date of post"
subheadline: a subheadling, any will do
teaser: "This will show on the main blog site."
image:
thumb: a thumbprint picture name .jpg, .png, etc.
album: This is the important part as it is the album number from Flickr.
---
That’s it, and the album slideshow comes out on the page. There is one caveat doing it this way, there are no thumbprints and the slideshow left and right arrows do not pop up until you hover over the image, but for me it works. Who knows, maybe I’ll look into adding something later on…
