Use shortcodes to define columns and rows

support
1

I am working on a small page with Hugo 0.123.4 and Bootstrap 5. The idea is to use shortcuts to define the columns and rows. For example the first column col-md-8 und the second with col-md-4.

How do I write the shortcut that the left column is col-md-8 and the right column is col-md-4 wide?

here the imprint.md page

---
title: "Imprint"
description: "Imprint"
draft: false
menu:
    footer:
        weight: 1
---

{{< row >}}
{{< column >}}
Column 1
{{< /column >}}
{{< column >}}
Column 2
{{< /column >}}
{{< /row >}}

the single.md page

{{ define "main" }}
<div class="container">
	<div class="row">
		<div class="col">
			<h1 class="text-primary">{{ .Title }}</h1>
			{{ with .Params.subtitle }}
			<h2 class="text-muted">{{ . }}</h2>
			{{ end }}
			{{ .Content | markdownify }}
		</div>
	</div>
</div>
{{ end }}

the shortcode column.html

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

the shortcode row.html

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

2

This topic is categorized under “support”. Do you have a question?

4

What is the question?

5

How do I write the shortcut that the left column is col-md-8 and the right column is col-md-4 wide and a gap between this two columns?

6

Why does that have to be in the shortcut instead of the template? Perhaps a bit more context would help understand what your problem is.

7

Do you mean that I should create a template for e.g. in this case for the imprint /partials/imprint.html? I am an absolute beginner with Hugo. For example, I would like a two-column layout for the imprint. A one-column layout for the about page. How do I insert the layout in the corresponding pages?

8

You do not “insert” layouts. You define a layout with a template. And you can use different templates for different pages. For your imprint page:

  • create a file imprint.md in your content directory
  • add frontmatter to this file:
---
Title: Imprint
layout: imprint
---

In your layouts/_default directory, create a template imprint.html, for example like so

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div class="about">
    <section class="section">
      <h1>{{ .Title }}</h1>
      <div>{{ .Content }}</div>
    </section>
  </div>
</body>
</html>

There, you can set all the classes you want (I’d rather use grid layout for that, defined in the CSS depending on the first div’s class attribute, though).

1 Like
9

The first column can be created with these lines of code. How do I create the 2nd column?


{{ define "main" }}
<div class="container">
	<div class="row">
		<div class="col-md-8">
			<div class="company">
				<div class="border rounded border-black">
					<div class="my-3 px-3">
						<div class="section">
							{{ .Content | markdownify }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{ end }}
10

I don’t understand your question. Your code doesn’t create any columns, it creates a div soup. What’s wrong with

<div class="container">
  <div class="company">
    {{ .Content }}
  </div>
  <div class="whatever>
    More content
  </div>
</div>

and CSS like

.container { display: grid; 
             grid-template-columns: 2;
             grid-template-rows: 1;}

And why do you markdownify your .Content in the template? That makes no sense here, since .Content is already HTML.

11

Unfortunately, I don’t have any more time now. I’ll get back to you tomorrow. First of all, thank you very much for your help.

12

Getting back to the original question…

Parameterize the shortcodes. For example:

{{< row >}}

{{< column col-md-8 >}}
foo
{{< /column >}}

{{< column col-md-4 >}}
bar
{{< /column >}}

{{< /row >}}

git clone --single-branch -b hugo-forum-topic-48552 https://github.com/jmooring/hugo-testing hugo-forum-topic-48552
cd hugo-forum-topic-48552
hugo server
13

Thank you for this solution.

14

@jmooring I have one more question. How do I get a horizontal and vertical distance between the rows and columns?

Here a screenshot

pic
pic1343Ă—58 2.78 KB

15

That’s a Bootstrap/CSS issue, not a Hugo issue. Have a look at the Bootstrap docs, or perhaps ask a question on Stack Overflow or similar.

16

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.