How can I wrap a div around

malde11 · February 25, 2026, 9:49pm

I need help,

because I do not know, how to wrap a div-tag around my gallery?

Here is my md-file:

+++
draft = false
title = 'Logos'
description = 'Logos designed von M. Example.'

[params]
[[params.gallery.inexorablez]]
headline = "Inexorablez"
caption = "Inexorablez - Logo #1"
thumb = "/images/logos/inexorablez/inexorablez-01-thumb.webp"
image = "/images/logos/inexorablez/inexorablez-01.webp"
id = "inexorablez_logo_1"

[[params.gallery.inexorablez]]
caption = "Inexorablez - Logo #2"
thumb = "/images/logos/inexorablez/inexorablez-02-thumb.webp"
image = "/images/logos/inexorablez/inexorablez-02.webp"
id = "inexorablez_logo_2"

[[params.gallery.inexorablez]]
caption = "Inexorablez - Logo #3"
thumb = "/images/logos/inexorablez/inexorablez-03-thumb.webp"
image = "/images/logos/inexorablez/inexorablez-03.webp"
id = "inexorablez_logo_3"



[[params.gallery.fh-flensburg]]
headline = "FH-Flensburg"
caption = "FH-Flensburg - Game-Design Logo"
thumb = "/images/logos/flensburg/fh-flensburg-thumb.webp"
image = "/images/logos/flensburg/fh-flensburg.webp"
id = "fh_flensburg_logo_1"
+++

## FH-Flensburg
{{< gallery fh-flensburg >}}
{{< modal >}}

Here is my gallery html shortcode:

{{- $gallery := index page.Params.gallery (.Get 0) -}}
<div class="gallery">
    {{- range $gallery }}
<img src="{{ .thumb }}" id="{{ .id }}" width="360px" height="260px" alt="{{ .caption }}" class="galleryimage cursor" data-image="{{ .image }}">
    {{- end }}
</div>

At the moment I get this html:

<main>
<h2>Some Headline</h2>
<div class=”gallery”>some pictures</div>
</main>

But I want this (section around the headline and images):

<main>
<section>
<h2>Some Headline</h2>
<div class=”gallery”>some image</div>
</section>
</main>

May be someone has an idear, how to do that.

jmooring · February 25, 2026, 9:53pm

Place the wrapping elements, and an h2 element, inside of the shortcode, and pass the h2 text as a parameter. If you are using Hugo’s TableOfContents method to render a table of contents, note that the h2 element will not be part of the Fragments collection. If you need the h2 element to participate in the TOC, we’ll need to call the shortcode a different way.

malde11 · February 25, 2026, 10:17pm

I am quite new to hugo and I had help writing the shortcode. I understand the code and know how it works, but for writing my own code I need more practice.

What I need is this:

<main>

<section>
  <h2>Headline 1</h2>
  <div class=”gallery”>
     <img>picture 1 </img>
     <img>picture 2 </img>
     <img>picture 3 </img>
  </div>
</section>

<section>
  <h2>Headline 2</h2>
  <div class=”gallery”>
     <img>picture 1 </img>
     <img>picture 2 </img>
     <img>picture 3 </img>
  </div>
</section>

<section>
  <h2>Headline 3</h2>
  <div class=”gallery”>
     <img>picture 1 </img>
     <img>picture 2 </img>
  </div>
</section>

<section>
  <h2>Headline 4</h2>
  <div class=”gallery”>
     <img>picture 1 </img>
  </div>
</section>

</main>

jmooring · February 25, 2026, 10:21pm

Do you need the headings to be part of the table of contents? Or might you want that in the future?

malde11 · February 25, 2026, 10:47pm

Do not know, what you mean with this.

My be this: https://gohugo.io/methods/page/tableofcontents/#article ?

I do not need to order the headlines or the gallerys and it has nothing to do with a navigation. The headlines should be multiligual in the future(german/english).

jmooring · February 25, 2026, 10:55pm

With your example above, is this one shortcode call in Markdown, or 4 shortcode calls, or 2 shortcode calls?

And why do you have two arrays in your front matter?

params.gallery.inexorablez → 3 elements in the array
params.gallery.fh-flensburg → 1 element in the array

Why not just one array? I think you’re making this harder than it has to be.

And your front matter is missing the headline for the second and third element of the first array.

malde11 · February 25, 2026, 11:24pm

This is my complete md-file:

+++
draft = false
title = 'Logos'
description = 'Logos designed von M. Example.'

[params]
[[params.gallery.inexorablez]]
headline = "Inexorablez"
caption = "Inexorablez - Logo #1"
thumb = "/images/logos/inexorablez/inexorablez-01-thumb.webp"
image = "/images/logos/inexorablez/inexorablez-01.webp"
id = "inexorablez_logo_1"


[[params.gallery.inexorablez]]
caption = "Inexorablez - Logo #2"
thumb = "/images/logos/inexorablez/inexorablez-02-thumb.webp"
image = "/images/logos/inexorablez/inexorablez-02.webp"
id = "inexorablez_logo_2"


[[params.gallery.inexorablez]]
caption = "Inexorablez - Logo #3"
thumb = "/images/logos/inexorablez/inexorablez-03-thumb.webp"
image = "/images/logos/inexorablez/inexorablez-03.webp"
id = "inexorablez_logo_3"




[[params.gallery.example]]
headline = "Example"
caption = "Example - Logo #1"
thumb = "/images/logos/example/example_logo_01_thumb.webp"
image = "/images/logos/example/example_logo_01.webp"
id = "example_logo_1"


[[params.gallery.example]]
caption = "Example - Logo #2"
thumb = "/images/logos/example/example_logo_02_thumb.webp"
image = "/images/logos/example/example_logo_02.webp"
id = "example_logo_2"


[[params.gallery.example]]
caption = "example - Logo #3"
thumb = "/images/logos/example/example_logo_03_thumb.webp"
image = "/images/logos/example/example_logo_03.webp"
id = "example_logo_3"


[[params.gallery.superior-attack]]
headline = "Superior-Attack"
caption = "Superior-Attack - Logo #1"
thumb = "/images/logos/superior-attack/superior-attack-01-thumb.webp"
image = "/images/logos/superior-attack/superior-attack-01.webp"
id = "superior_attack_logo_1"


[[params.gallery.superior-attack]]
caption = "Superior-Attack - Logo #2"
thumb = "/images/logos/superior-attack/superior-attack-02-thumb.webp"
image = "/images/logos/superior-attack/superior-attack-02.webp"
id = "superior_attack_logo_2"


[[params.gallery.christian-s]]
headline = "Christian S."
caption = "Christian S. - Logos"
thumb = "/images/logos/cs/cs_logo_thumb.webp"
image = "/images/logos/cs/cs_logo.webp"
id = "christian_s_logo_1"


[[params.gallery.fh-flensburg]]
headline = "FH-Flensburg"
caption = "FH-Flensburg - Game-Design Logo"
thumb = "/images/logos/flensburg/fh-flensburg-thumb.webp"
image = "/images/logos/flensburg/fh-flensburg.webp"
id = "fh_flensburg_logo_1"
+++


## Inexorablez
{{< gallery inexorablez >}}

## Example
{{< gallery example >}}

## Superior-Attack
{{< gallery superior-attack >}}

## Christian-S
{{< gallery christian-s >}}

## FH-Flensburg
{{< gallery fh-flensburg >}}

{{< modal >}}

I guess, I call it 5 times.. the gallery:

{{- $gallery := index page.Params.gallery (.Get 0) -}}

<div class="gallery">

    {{- range $gallery }}

     <img src="{{ .thumb }}" id="{{ .id }}" width="360px" height="260px" alt="{{ .caption }}" class="galleryimage cursor" data-image="{{ .image }}">

    {{- end }}

</div>

One section should be one gallery.. for example all “inexorablez - images” or all “superior-attack - images” one gallery. Not a gallery for all.

jmooring · February 25, 2026, 11:26pm

I think your data structure should be this:

[params.gallery.inexorablez]
headline = "Inexorablez"

  [[params.gallery.inexorablez.images]]
  caption = "Inexorablez - Logo #1"
  thumb = "/images/logos/inexorablez/inexorablez-01-thumb.webp"
  image = "/images/logos/inexorablez/inexorablez-01.webp"
  id = "inexorablez_logo_1"

  [[params.gallery.inexorablez.images]]
  caption = "Inexorablez - Logo #2"
  thumb = "/images/logos/inexorablez/inexorablez-02-thumb.webp"
  image = "/images/logos/inexorablez/inexorablez-02.webp"
  id = "inexorablez_logo_2"

  [[params.gallery.inexorablez.images]]
  caption = "Inexorablez - Logo #3"
  thumb = "/images/logos/inexorablez/inexorablez-03-thumb.webp"
  image = "/images/logos/inexorablez/inexorablez-03.webp"
  id = "inexorablez_logo_3"

[params.gallery.fh-flensburg]
headline = "FH-Flensburg"

  [[params.gallery.fh-flensburg.images]]
  caption = "FH-Flensburg - Game-Design Logo"
  thumb = "/images/logos/flensburg/fh-flensburg-thumb.webp"
  image = "/images/logos/flensburg/fh-flensburg.webp"
  id = "fh_flensburg_logo_1"

jmooring · February 25, 2026, 11:40pm

With the data structure above…

markdown:

{{< gallery "inexorablez" >}}

{{< gallery "fh-flensburg" >}}

layouts/_shortcodes/gallery.html

{{- with $index := .Get 0 }}
  {{- with $gallery := index $.Page.Params.gallery $index }}
    <section>
      {{- with .headline}}
        <h2>{{ . }}</h2>
      {{- else }}
        {{- errorf "The %q shortcode was unable to find the headline for the gallery with index %s: see %s" $.Name $index $.Position }}
      {{- end }}
      <div class="gallery">
        {{- range .images }}
          {{- if and .caption .id .image .thumb }}
            <img src="{{ .thumb }}" id="{{ .id }}" width="360px" height="260px" alt="{{ .caption }}" class="galleryimage cursor" data-image="{{ .image }}">
          {{- else }}
            {{- errorf "The %q shortcode was unable to find the required fields for an image in the gallery with index %s: see %s" $.Name $index $.Position }}
          {{- end }}
        {{- else }}
          {{- errorf "The %q shortcode was unable to find any images for the gallery with index %s: see %s" $.Name $index $.Position }}
        {{- end }}
      </div>
    </section>
  {{- else }}
    {{- errorf "The %q shortcode was unable to find a gallery with index %s: see %s" $.Name $index $.Position }}
  {{- end }}
{{- else }}
  {{- errorf "The %q shortcode requires a positional parameter, the id of the gallery as defined in the page's front matter: see %s" .Name .Position }}
{{- end }}

Which renders (syntactically) to something like this:

<section>
  <h2>Inexorablez</h2>
  <div class="gallery">
    <img
      src="/images/logos/inexorablez/inexorablez-01-thumb.webp"
      id="inexorablez_logo_1"
      width="360px"
      height="260px"
      alt="Inexorablez - Logo #1"
      class="galleryimage cursor"
      data-image="/images/logos/inexorablez/inexorablez-01.webp"
    >
    <img
      src="/images/logos/inexorablez/inexorablez-02-thumb.webp"
      id="inexorablez_logo_2"
      width="360px"
      height="260px"
      alt="Inexorablez - Logo #2"
      class="galleryimage cursor"
      data-image="/images/logos/inexorablez/inexorablez-02.webp"
    >
    <img
      src="/images/logos/inexorablez/inexorablez-03-thumb.webp"
      id="inexorablez_logo_3"
      width="360px"
      height="260px"
      alt="Inexorablez - Logo #3"
      class="galleryimage cursor"
      data-image="/images/logos/inexorablez/inexorablez-03.webp"
    >
  </div>
</section>

<section>
  <h2>FH-Flensburg</h2>
  <div class="gallery">
    <img
      src="/images/logos/flensburg/fh-flensburg-thumb.webp"
      id="fh_flensburg_logo_1"
      width="360px"
      height="260px"
      alt="FH-Flensburg - Game-Design Logo"
      class="galleryimage cursor"
      data-image="/images/logos/flensburg/fh-flensburg.webp"
    >
  </div>
</section>

malde11 · February 26, 2026, 12:13am

WoW.. nice, thanks!!!

some how I have got two p-tags:

<main>

   <p></p>

   <section></section>

   <section></section>

   <section></section>

   <section></section>

   <p></p>

</main>

Do not know, where there come from?

jmooring · February 26, 2026, 12:21am

Impossible to say without seeing your Markdown, or anything else you might have created/modified.

This test project certainly doesn’t create those:

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

And, are you viewing the HTML using the browser’s dev tools, or are viewing the raw source using Ctrl + U?

malde11 · February 26, 2026, 12:28am

on dev tools in firefox are two p-tags (open and closing):

<main>

   <p></p>

   <section></section>

   <section></section>

   <section></section>

   <section></section>

   <p></p>

</main>

on raw source just one (without closing):

<main>

   <p>

   <section></section>

   <section></section>

   <section></section>

   <section></section>

   </p>

</main>

I have checked the markdown-file.. but could found something

jmooring · February 26, 2026, 12:29am

Please share your Markdown. I don’t like guessing.

malde11 · February 26, 2026, 12:32am

+++

draft = false

title = 'Logos'

description = 'Logos designed von M. Kettenbeil.'




[params.gallery.inexorablez]

headline = "Inexorablez"




    [[params.gallery.inexorablez.images]]

    caption = "Inexorablez - Logo #1"

    thumb = "/images/logos/inexorablez/inexorablez-01-thumb.webp"

    image = "/images/logos/inexorablez/inexorablez-01.webp"

    id = "inexorablez_logo_1"




    [[params.gallery.inexorablez.images]]

    caption = "Inexorablez - Logo #2"

    thumb = "/images/logos/inexorablez/inexorablez-02-thumb.webp"

    image = "/images/logos/inexorablez/inexorablez-02.webp"

    id = "inexorablez_logo_2"




    [[params.gallery.inexorablez.images]]

    caption = "Inexorablez - Logo #3"

    thumb = "/images/logos/inexorablez/inexorablez-03-thumb.webp"

    image = "/images/logos/inexorablez/inexorablez-03.webp"

    id = "inexorablez_logo_3"




[params.gallery.example]

headline = "example"




    [[params.gallery.example.images]]

    caption = "example - Logo #1"

    thumb = "/images/logos/example/example_logo_01_thumb.webp"

    image = "/images/logos/example/example_logo_01.webp"

    id = "example_logo_1"




    [[params.gallery.example.images]]

    caption = "example - Logo #2"

    thumb = "/images/logos/example/example_logo_02_thumb.webp"

    image = "/images/logos/example/example_logo_02.webp"

    id = "example_logo_2"




    [[params.gallery.example.images]]

    caption = "example - Logo #3"

    thumb = "/images/logos/example/example_logo_03_thumb.webp"

    image = "/images/logos/example/example_logo_03.webp"

    id = "example_logo_3"




[params.gallery.superior-attack]

headline = "Superior-Attack"




    [[params.gallery.superior-attack.images]]

    caption = "Superior-Attack - Logo #1"

    thumb = "/images/logos/superior-attack/superior-attack-01-thumb.webp"

    image = "/images/logos/superior-attack/superior-attack-01.webp"

    id = "superior_attack_logo_1"




    [[params.gallery.superior-attack.images]]

    caption = "Superior-Attack - Logo #2"

    thumb = "/images/logos/superior-attack/superior-attack-02-thumb.webp"

    image = "/images/logos/superior-attack/superior-attack-02.webp"

    id = "superior_attack_logo_2"




[params.gallery.christian-s]

headline = "Christian S."




    [[params.gallery.christian-s.images]]

    caption = "Christian S. - Logos"

    thumb = "/images/logos/cs/cs_logo_thumb.webp"

    image = "/images/logos/cs/cs_logo.webp"

    id = "christian_s_logo_1"




[params.gallery.fh-flensburg]

headline = "FH-Flensburg"




    [[params.gallery.fh-flensburg.images]]

    caption = "FH-Flensburg - Game-Design Logo"

    thumb = "/images/logos/flensburg/fh-flensburg-thumb.webp"

    image = "/images/logos/flensburg/fh-flensburg.webp"

    id = "fh_flensburg_logo_1"

+++




{{< gallery "inexorablez" >}}

{{< gallery "kettenbeil" >}}

{{< gallery "superior-attack" >}}

{{< gallery "christian-s" >}}

{{< gallery "fh-flensburg" >}}

{{< modal >}}

jmooring · February 26, 2026, 12:34am

You are showing blank lines between each shortcode call. Is that true, or is this a copy and paste error?

malde11 · February 26, 2026, 12:38am

It is a copy and paste error.. there are more blank lines on this editor.

jmooring · February 26, 2026, 12:41am

When I ask to see something, I want to see that thing as it is, not something else. When pasting, use Ctrl+Shift+V to paste without formatting.

My example above shows this:

{{< gallery "inexorablez" >}}

{{< gallery "fh-flensburg" >}}

Do exactly that.

malde11 · February 26, 2026, 12:44am

Have found it out in the same moment.. thanks

chrillek · February 26, 2026, 8:37am

Your HTML is broken. A p element can’t contain a section.
So, the browser is „clever“ and closes/opens the p tags.

jmooring · February 26, 2026, 3:35pm

If anyone wants to understand why you need to have a blank line between the two shortcode calls…

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

It’s a 10 minute read, and probably another 10 minutes to actually understand it.

Topic		Replies	Views
Adding a photoswipe gallery as a shortcode using Page.Resources tips & tricks	15	9880	March 8, 2021
Image gallery feature	16	20274	August 1, 2017
Image gallery from markdown using shortcode support	28	9757	March 19, 2015
Image gallery do not show images support	19	272	May 14, 2025
Headings enclosed on html section tags support	6	195	March 9, 2025

How can I wrap a div around

Related topics