[images module] Full size popup

Using Themes
1

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

![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?

2

Could you check this post

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.

3

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.

4

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

{{ $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.

/* 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

5

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.

6

Where is documented?

This

![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.

7

Every picture in the documentation can be clicked to enlarge.

8

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.

Or try out @idarek s proposal

9

Interesting…

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

10

Good suggestion, thanks.

11

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

12

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.

1 Like