Photos side by side

support
1

Hi there new to hugo and really a developer but using hugo creating my own blog.
in the .md file where I want the photos to be be I have this code
{{< figure src=“/zim/IMG_2212.JPG” >}} {{< figure src=“/zim/20250524_171630.jpg” >}}

but the images are not side by side the are one on top of the other ie in a list form, I have tried
to resize them but that doesn’t work either. BTW I have never written a css file in my life so will
need hand held there

3

As you correctly surmised: solving that with CSS is off-topic here. And the one I originally posted was utter crap. My apologies.

What I’d do is

  • make a copy of the original figure shortcode
  • modify it so that it accepts two URL and alt text parameters
  • and generates output like this
<figure>
<img src="…">
<img src="…">
<figcaption>…</figcaption>
</figure>

Then in the CSS, do something like this

figure:has(> :nth-child(2):last-child) {
  display: flex;
  flex-direction: row;
  gap: 2rem; /* or whatever you want */
  width: 100%;
}

This is just a rough sketch. You might have to set min-width:0 on the images inside the figure to avoid them overflowing the box.
The net is full of examples on how to use flex box…

4

cheers for the reply, there will be like 10 images there i just put the two there to test it out.

5

ok after a bit more looking around I used markdown tables, I know a dirty way of doing it but for my need it works, Thankyou to everyone who replied. This is a learning curve for me.

6

Hi

If your number of photos isn’t always the same, you can wrap the figure into a shortcode portfolio for example.

So you can with CSS :

  • display your photos as you want (border, padding…)
  • adjust the global display of the portfolio

Example : https://histoire.gallois.info/docs/portraits/gallois_hubert/