# \[images module\] Full size popup

**URL:** <https://discourse.gohugo.io/t/images-module-full-size-popup/50936>\
**Category:** Using Themes\
**Created:** [July 30, 2024, 8:22am UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936 "2024-07-30T08:22:26Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![sciurius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sciurius/32/11499_2.png) [@sciurius](https://discourse.gohugo.io/u/sciurius)\
**Post date:** [July 30, 2024, 8:22am UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/1 "2024-07-30T08:22:27Z")

</div>

In a simple site using the `mainroad` theme and the `images` module I have a page bundle that includes a png image. The `images` module allows me to use this in markdown content with

```auto
![Alt](image.png)

```

The image is displayed and scaled to fit, nice, but I would have expected to be able to click on it to see the full size image. Is there an additional required setting I’m missing?

---

<div class="post-metadata">

**Author:** ![idarek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/idarek/32/26229_2.png) [@idarek](https://discourse.gohugo.io/u/idarek)\
**Post date:** [July 30, 2024, 8:51am UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/2 "2024-07-30T08:51:17Z")

</div>

Could you check this post

> **[Polish Leczo - Vegetable Stew with Sausage](https://yummyrecipes.uk/polish-lecz-vegetable-stew-with-sausage/)**
>
> Polish Leczo is a hearty and vibrant vegetable stew, brimming with rich flavours and colourful ingredients. Perfect for summer, this juicy and aromatic dish is a staple of Polish cuisine, combining ripe vegetables and smoky sausage for a comforting...

And click on images in the content below. Let me know if this is what you are looking.

This is using single image markdown without wrapping in anchor link.

If that’s what you looking, I will add the code here later on.

---

<div class="post-metadata">

**Author:** ![sciurius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sciurius/32/11499_2.png) [@sciurius](https://discourse.gohugo.io/u/sciurius)\
**Post date:** [July 30, 2024, 11:20am UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/3 "2024-07-30T11:20:23Z")

</div>

Thanks for your reply. When I visit the site and scroll down to “Method”, I see a picture of the ingredients. When I hover over the image, the cursor becomes a hand. When I click on the image an enlarged image (scaled to the viewport) is shown.

This is more or less what I’m looking for, although I hoped for fancybox features.

---

<div class="post-metadata">

**Author:** ![idarek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/idarek/32/26229_2.png) [@idarek](https://discourse.gohugo.io/u/idarek)\
**Post date:** [July 30, 2024, 11:52am UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/4 "2024-07-30T11:52:46Z")

</div>

Surroung your picture parts in `layouts/_default/_markup/render-image.html` by

```html
{{ $image := "" }}
{{ if hasPrefix .Destination "/" }}
    {{ $image = resources.Get .Destination }}
{{ else }}
    {{ if .Page.BundleType }}
        {{ $image = .Page.Resources.GetMatch .Destination }}
    {{ else }}
        {{ $path := path.Join .Page.File.Dir .Destination }}
        {{ $image = resources.Get $path }}
    {{ end }}
{{ end }}

{{- $random := hash.XxHash $image.RelPermalink }}
<a href="#image-{{ $random }}" title="{{ T "ClickToEnlarge" }}">

<!-- your content of render-image.html -->

</a>
<div>
        <a href="#_" class="lightbox" id="image-{{ $random }}">
                <span style="background-image:url('{{ $image.RelPermalink }}')"></span>        
        </a>
</div>

```

CSS for it.

```css
/* lightbox css */

.lightbox {
    display: none;

    position: fixed;

    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    
    background-color: white
}

.lightbox:target {
    display: block;
}
  
.lightbox span {
    display: block;
    width: 100%;
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* end:lightbox css */

```

ps. you can build it as fancy as you want with just CSS/HTML skills

> Required min. Hugo 0.129.0

---

<div class="post-metadata">

**Author:** ![sciurius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sciurius/32/11499_2.png) [@sciurius](https://discourse.gohugo.io/u/sciurius)\
**Post date:** [July 30, 2024, 12:18pm UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/5 "2024-07-30T12:18:19Z")

</div>

Thanks, I’ll give it a try.

Note that this doesn’t answer the question why this is not handled by the `images` module, as documented.

---

<div class="post-metadata">

**Author:** ![idarek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/idarek/32/26229_2.png) [@idarek](https://discourse.gohugo.io/u/idarek)\
**Post date:** [July 30, 2024, 12:22pm UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/6 "2024-07-30T12:22:43Z")

</div>

Where is documented?

This

```auto
![Alt](image.png)

```

is in markdown to display image, not to link to it.

This may be a theme specific funcionality, hence worth to ask who create it [here](https://github.com/Vimux/Mainroad).

---

<div class="post-metadata">

**Author:** ![sciurius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sciurius/32/11499_2.png) [@sciurius](https://discourse.gohugo.io/u/sciurius)\
**Post date:** [July 30, 2024, 1:14pm UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/7 "2024-07-30T13:14:02Z")

</div>

> **[Docs](https://images.hugomods.com/docs/)**
>
> Markdown-friendly module that process images via URL query string and fragment ID, such as align, resize, crop and more.

Every picture in the documentation can be clicked to enlarge.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [July 30, 2024, 4:46pm UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/8 "2024-07-30T16:46:16Z")

</div>

Mmh, I browes briefly to the doc and

- Found no mention of that feature
- found no enlargable image to click

This is a third party module so maye better ask for that there: [GitHub - hugomods/images: 🖼 Hugo images module for processing images via URL query string and fragment, process images in Markdown way.](https://github.com/hugomods/images)

Or try out @idarek s proposal

---

<div class="post-metadata">

**Author:** ![sciurius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sciurius/32/11499_2.png) [@sciurius](https://discourse.gohugo.io/u/sciurius)\
**Post date:** [July 30, 2024, 5:48pm UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/9 "2024-07-30T17:48:14Z")

</div>

> [@irkode](#):
>
> found no enlargable image to click

Interesting…

> **[Resizing Images](https://images.hugomods.com/docs/processing/resizing/)**
>
> Learn how to resize images.

The top image of the great wall. When you click on it you get an enlarged image.  
Same for all the other images.

---

<div class="post-metadata">

**Author:** ![sciurius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sciurius/32/11499_2.png) [@sciurius](https://discourse.gohugo.io/u/sciurius)\
**Post date:** [July 30, 2024, 5:49pm UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/10 "2024-07-30T17:49:04Z")

</div>

> [@irkode](#):
>
> This is a third party module so maye better ask for that there

Good suggestion, thanks.

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [July 30, 2024, 6:40pm UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/11 "2024-07-30T18:40:10Z")

</div>

sry, ok - overseen that - maybe filtered with my mobile -

Nevertheless it’s just the doc “how to resize the image” not “how to create such a pop out”  
looks like this is done with additional coding css or/and js

---

<div class="post-metadata">

**Author:** ![sciurius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sciurius/32/11499_2.png) [@sciurius](https://discourse.gohugo.io/u/sciurius)\
**Post date:** [July 30, 2024, 7:00pm UTC](https://discourse.gohugo.io/t/images-module-full-size-popup/50936/12 "2024-07-30T19:00:05Z")

</div>

I have confirmation that this behaviour comes from the HB themes framework that is used for the documentation site. So it seems out of reach from other themes.