How to organize images in a grid in octal with Markdown
I am trying to write a blog post with multiple thumbnail images. I am using the code as follows
... [markdown content before] ...
[{% img left https://lh5.googleusercontent.com/-UjFXd_iX4wg/UK_LGHwB1GI/AAAAAAAACGM/Y9dOC2JLMu0/s400/2012-11-01%252010.51.22.jpg 'Power button of an electric kettle'%}] : //picasaweb.google.com/lh/photo/v54UgP-UYdQKngGBXIkVdtMTjNZETYmyPJy0liipFm0? feat = directlink)
[{% img left https://lh5.googleusercontent.com/-pZWML6wLvMk/UK_NhINxrhI/AAAAAAAACHc/8dvYICW8AA8/s400/2012-11-01%252011.01.24.jpg 'Power button of an external hard drive'%}] ( https://picasaweb.google.com/lh/photo/F8GpZ42t2k7OnFWfgzGDW9MTjNZETYmyPJy0liipFm0?feat=directlink)
[{% img left https://lh6.googleusercontent.com/-1L7v_5CYtq8/UK_NndJB_HI/AAAAAAAACHk/se84006Yoyo/s400/2012-11-01%252011.37.17.jpg 'Power button of an IKEA bedside lamp'%}] ( https://picasaweb.google.com/lh/photo/2O6MNRL11LHZaOWy5ucSFdMTjNZETYmyPJy0liipFm0?feat=directlink)
... [markdown content after] ...
This works great, but if I put text below this, it starts on the right side of the last image, not on a new line.
How can I get the grid of images and continue the text after the grid? I am using markdown to write a post.
source to share
This may or may not be suitable for you, but I wrote a Jekyll plugin for a similar use case - https://github.com/matthewowen/jekyll-slideshow
This is for full size images where you want to create a grid of thumbnails that allow the full size images to appear in the lightbox.
If this is not your exact case, my suggestion would be to do it with CSS. The "left" part of your syntax simply indicates the CSS class to add. In this case, I think Octopress CSS comes with a rule to put this class to the left - this makes them appear next to each other, but allows text to wrap around it. Instead, you can use something like a "grid" and then add a CSS rule to give the images of this class an inline-block display attribute.
source to share