Hugo

How can I add columns into my page using shortcode?

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

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

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