Help adding tiled images


I am new using hugo and I have little experience in html and css and I am studying hard to create my site in hugo, I can not find anywhere how to leave my images side by side on a page.

I’m using this shortcode

Put this file in /layouts/shortcodes/figure.html
NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
Documentation and licence at
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{ end }}
{{- $.Page.Scratch.Add "figurecount" 1 -}}
<!-- use either src or link-thumb for thumbnail image -->
{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="">
    <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
      <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
    {{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
        {{- if or (.Get "caption") (.Get "attr")}}
            {{- .Get "caption" -}}
            {{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
        {{- end }}
    {{- end }}

does anyone know how to leave side by side images of at least 3 or 4 side by side images?

Thanks for listening

We need to see more code to help you properly. Can you share a git repository?

You could also try opening an issue on the hugo easy gallery GitHub project, since that’s how you’re trying to achieve this.

Git repository


What happens if you put your figure shortcodes inside a gallery shortcode?

Nothing appears

But it seems that he can leave it side by side, only it is “invisible”

comment = false
title = ">Projetos"

{{< gallery >}}
  {{< figure link="gabriel-dropout" src="" caption-effect="fade" caption-position="bottom" caption="Gabriel DropOut" height="250px" width="250px" >}}
  {{< figure link="akame-ga-kill!" src="" caption-effect="fade" caption-position="bottom" caption="Akame ga Kill!" height="250px" width="250px" >}}
  {{< figure src="" >}}
{{< /gallery >}}