🐛 Gallery: Images do not display when there's no text

[bnjmnschwn]

Gallery: Images do not display when there's no text

Describe the bug
The image gallery does not get displayed when the page has no text on it.
As soon as a line of text is added, the gallery is displayed as it should.

To Reproduce
Steps to reproduce the behavior:

1. create a page that consists only of an responsive image galery, using the galery short code.
2. fire up 'hugo server'
3. navigate to the page
4. see no gallery

Expected behavior
I expect that the gallery gets displayed, even when there is no text on the page.

Screenshots

Desktop:

• OS: Ubuntu 20.0.4 on Windows 11
• Browser Chrome
• Version 124.0.6367.63 (64 bit)

Hugo & Blowfish versions
Hugo v0.124.1
Blowfish 2.66.0

Additional Context
I checked the outputted HTML and it looks like (pagery?) has a problem with calculating the correct height for the gallery & the images.

without text

<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
  <div class="min-w-0 min-h-0 max-w-fit">
    <div class="article-content max-w-prose mb-20">
      <!-- raw HTML omitted -->
      <div id="gallery-083d9c2f5bfc40c3558dd7512be3ebdd" class="gallery" style="position: relative; height: 0px;">
        <img src="gallery/BS-01.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-02.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-03.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-04.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-05.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-06.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-07.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-08.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-09.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-10.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-11.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-12.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-13.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-14.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-15.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-16.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-17.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
        <img src="gallery/BS-18.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; top: 0px;">
      </div>
    </div>
  </div>
  <script>
    var oid = "views_photography\/index.md"
    var oid_likes = "likes_photography\/index.md"
  </script>
  <script type="text/javascript" src="/js/page.min.b06a29d42a4ed16787978e2eee1e8c797b7698db2bc14ccee78f5c80ac566fc996190a73ad80a5e987558474b20b96fa38f7d85b405f165ff72b7b163c5ad11b.js" integrity="sha512-sGop1CpO0WeHl44u7h6MeXt2mNsrwUzO549cgKxWb8mWGQpzrYCl6YdVhHSyC5b6OPfYW0BfFl/3K3sWPFrRGw=="></script>
</section>

with text

<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
  <div class="min-w-0 min-h-0 max-w-fit">
    <div class="article-content max-w-prose mb-20">
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <div id="gallery-083d9c2f5bfc40c3558dd7512be3ebdd" class="gallery" style="position: relative; height: 2270.56px;">
        <img src="gallery/BS-01.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 0%; top: 0px;">
        <img src="gallery/BS-02.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 0px;">
        <img src="gallery/BS-03.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 167.609px;">
        <img src="gallery/BS-04.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 334.984px;">
        <img src="gallery/BS-05.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 0%; top: 368.938px;">
        <img src="gallery/BS-06.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 0%; top: 536.079px;">
        <img src="gallery/BS-07.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 583.265px;">
        <img src="gallery/BS-08.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 750.406px;">
        <img src="gallery/BS-09.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 0%; top: 865.454px;">
        <img src="gallery/BS-10.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 998.687px;">
        <img src="gallery/BS-11.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 0%; top: 1032.6px;">
        <img src="gallery/BS-12.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 1165.95px;">
        <img src="gallery/BS-13.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 1333.22px;">
        <img src="gallery/BS-14.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 0%; top: 1470.1px;">
        <img src="gallery/BS-15.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 1662.59px;">
        <img src="gallery/BS-16.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 0%; top: 1718.38px;">
        <img src="gallery/BS-17.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 49.9984%; top: 1910.88px;">
        <img src="gallery/BS-18.jpg" alt="" class="grid-w100 md:grid-w50 xl:grid-w33 medium-zoom-image" style="position: absolute; left: 0%; top: 2088.11px;">
      </div>
    </div>
  </div>  
  <script>
    var oid = "views_photography\/index.md"
    var oid_likes = "likes_photography\/index.md"
  </script>
  <script type="text/javascript" src="/js/page.min.b06a29d42a4ed16787978e2eee1e8c797b7698db2bc14ccee78f5c80ac566fc996190a73ad80a5e987558474b20b96fa38f7d85b405f165ff72b7b163c5ad11b.js" integrity="sha512-sGop1CpO0WeHl44u7h6MeXt2mNsrwUzO549cgKxWb8mWGQpzrYCl6YdVhHSyC5b6OPfYW0BfFl/3K3sWPFrRGw=="></script>
</section>

[eallion]

👀

[Phil89a]

Same problem here. Seems the image width is limited by the width of the content....

Keenly watching....

[eallion]

My solution was to add a large description of the civilization in index.md, which opens up the page, but is not elegant.