# Photos side by side

**URL:** <https://discourse.gohugo.io/t/photos-side-by-side/57088>\
**Category:** support\
**Created:** [May 6, 2026, 4:13am UTC](https://discourse.gohugo.io/t/photos-side-by-side/57088 "2026-05-06T04:13:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![BrendonT](https://avatars.discourse-cdn.com/v4/letter/b/779978/32.png) [@BrendonT](https://discourse.gohugo.io/u/BrendonT)\
**Post date:** [May 6, 2026, 4:14am UTC](https://discourse.gohugo.io/t/photos-side-by-side/57088/1 "2026-05-06T04:14:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [May 6, 2026, 6:57am UTC](https://discourse.gohugo.io/t/photos-side-by-side/57088/3 "2026-05-06T06:57:19Z")

</div>

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

```html
<figure>
<img src="…">
<img src="…">
<figcaption>…</figcaption>
</figure>

```

Then in the CSS, do something like this

```css
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…

---

<div class="post-metadata">

**Author:** ![BrendonT](https://avatars.discourse-cdn.com/v4/letter/b/779978/32.png) [@BrendonT](https://discourse.gohugo.io/u/BrendonT)\
**Post date:** [May 6, 2026, 7:39pm UTC](https://discourse.gohugo.io/t/photos-side-by-side/57088/4 "2026-05-06T19:39:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BrendonT](https://avatars.discourse-cdn.com/v4/letter/b/779978/32.png) [@BrendonT](https://discourse.gohugo.io/u/BrendonT)\
**Post date:** [May 6, 2026, 8:37pm UTC](https://discourse.gohugo.io/t/photos-side-by-side/57088/5 "2026-05-06T20:37:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Welsh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/welsh/32/16693_2.png) [@Welsh](https://discourse.gohugo.io/u/Welsh)\
**Post date:** [May 8, 2026, 10:10am UTC](https://discourse.gohugo.io/t/photos-side-by-side/57088/6 "2026-05-08T10:10:31Z")

</div>

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/](https://histoire.gallois.info/docs/portraits/gallois_hubert/)