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:
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:
- Add the CSS into the page
- Upload the images
- Wrap the images in a set of divs with custom classes
- …
- “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