Responsive Blogger Gallery Helper

The challenge

These past days I was uploading my blog with some of the photos I took and wanted to display them in a responsive way. I looked for any responsive gallery plugin for blogger, but couldn’t find any. I stumbled upon this website that proposed a CSS approach. Being purely CSS I felt it would be very light, and had a further read. The article in question is the following:

How to Create a Responsive Blogger Image Gallery

The downside of this approach, apart from the extensive reading I had to do (yes I know, I am a bit lazy), was the fact that I had to do several steps in order to have it working:

  1. Add the CSS into the page
  2. Upload the images
  3. Wrap the images in a set of divs with custom classes
  4. “rinse and repeat” until all images were done

As I said before, I am a bit lazy, and that all process started being a bit time consuming. As any decent developer, as things start to get repetitive you should find a way to automate them… So that is what I did.

The solution

I created a small tool that allows you to drop the images HTML and renders a completed rework on all the elements to make it compliant to the expected result.
You can find it here by clicking on the button bellow and I invite you to try it. Be sure to read the original post from Georgia Lou Studios, though, so you can have a better understanding of what is the expected result.

The implementation

The implementation was simply to have a javascript HTML parser, that could be invoked by just providing a selector of the input element we wanted to extract the images to convert.

The tool has a single method that will perform the conversion of the images called convert, and it optionally accepts 2 parameters, that will determine if you want to add placeholders for the Alt tag and an H3 tag for the title.

// You can either use HP or HtmlParser
var result = HP('#input').convert(true, true);

If you want to take a look at all of the (mini) project, have a pick at my GitHub page

Leave a Reply

Your email address will not be published. Required fields are marked *