Question

Any tips on styling image layout with the {%img ... %} plugin?

I’m ok with left and right but I’d really like to have all images in a row vertically for example and can’t quiet figure out how to style things.

I thought perhaps add a <div class="right"> around a bunch on {% img ... %} but that seems to mess with the HTML too much.

Thanks in advance for any pointers

ps, I saw this question but it didn’t answer my question exactly

Answer 1

In markdown, you can write tables using the following syntax

-----------------
|   A   |   B   |
| :---: | :---: |
|   C   |   D   |
-----------------

The two points on each side of the horizontal lines define the alignment of your cells:

• centered: :--:
• left: :---
• right: ---:

You can use as many dashes as you want in the middle.

I used this technique to align images as a table in this blog post (search for “Nil” inside). It looks like this:

using this code:

| Nil | Inline / list | Table |
| :---: | :---: | :---: |
| {% img /images/2013-02-04-nil.png 36 92 Nil line numbers %} | {% img /images/2013-02-04-inline.png 62 92 Inline line numbers %} | {% img /images/2013-02-04-table.png 72 92 Table line numbers %} |