How can I add columns into my page using shortcode?

support
1

Hi. I’m using aether theme. I’m ok with its one big column where whole of my stuff goes. but sometimes I need to insert stuff(suppose text or divs) in 2-3 columns which should align side-by-side like for comparison etc. Can I ask you how can I get shortcodes into use here?

I know how to do this in CSS but quite new to Hugo and after some time I came to conclusion that only shortcodes can help me here. So please help me construct shortcode which I can use in post markdown.

From image you can see I made three boxes at bottom. In each box I wish I could be able to insert either some text/image or any thing. Is that possible? Actually my markup should look like a main div containing three divs

Untitled%20Design
Untitled Design.jpg735×1102 87.6 KB

2

You can do a nested shortcode. There are seveal threads on the forum and info in the docs on it :slight_smile: Happy coding!

1 Like
3

I recently did a quick shortcode thingy with that outcome:

row shortcode row.html:

<div class="row">{{ .Inner }}</div>

column shortcode column.html:

<div class="col-md">{{ .Inner }}</div>

call it like that:

{{% row %}}
{{% column % }}something{{% /column %}}
{{% column % }}something else{{% /column %}}
{{% /row %}}

That’s just a sample for Bootstrap columns that share the width of the row.

1 Like
4

Hi @davidsneighbour,

I tried to do as you suggested (creating two html files named as the markup name into /layout/shortcodes but I got the following error
unrecognized character in shortcode action: U+0025 '%'. Note: Parameters with non-alphanumeric args must be quoted

5 
<!-- {{< row >}}
{{< column>}}
something1
{{< /column>}}
{{< column>}}
something1
{{< /column>}}
{{< column>}}
something1
{{< /column>}}
{{< /row >}} -->