Help adding tiled images

support
1

Hello

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.

Anotação 2019-12-23 214104
Anotação 2019-12-23 2141041261×613 41.9 KB

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 https://github.com/liwenyip/hugo-easy-gallery/
-->
<!-- 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="http://schema.org/ImageObject">
    <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 -->
    </div>
    {{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
      <figcaption>
        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
        {{- if or (.Get "caption") (.Get "attr")}}
          <p>
            {{- .Get "caption" -}}
            {{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
          </p>
        {{- end }}
      </figcaption>
    {{- end }}
  </figure>
</div>

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

Thanks for listening

2

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.

3

Git repository

Site

4

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

5

Nothing appears

Anotação 2019-12-24 003937
Anotação 2019-12-24 0039371259×610 14 KB

6

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

Sem título
Sem título1251×591 17.7 KB

7

Anotação 2019-12-24 004625
Anotação 2019-12-24 0046251280×679 130 KB 

comment = false
title = ">Projetos"
+++

{{< gallery >}}
  {{< figure link="gabriel-dropout" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx21878-bOwTOgyhTp7h.jpg" caption-effect="fade" caption-position="bottom" caption="Gabriel DropOut" height="250px" width="250px" >}}
  {{< figure link="akame-ga-kill!" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx20613-JpRbnstIj6PO.png" caption-effect="fade" caption-position="bottom" caption="Akame ga Kill!" height="250px" width="250px" >}}
  {{< figure src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx107346-KZQFFzxrCH3g.jpg" >}}
{{< /gallery >}}