Images don't always load in BLOG section

[MoiCoquille]

Hello,

This one is annoying because it's intermittent.

When I load a page like: http://indalit.com/categories/compute/ the posts all get listed out normally but sometimes all or sometimes part of them the image doesn't appear. In the page source you have the image:

<div class="image">
  <a href="http://www.indalit.com/blog/2017/12/01/aws-new-instance-family-m5/">  
  <img src="http://www.indalit.com/img/blog/aws-new-m5-general-purpose-instance.jpg" class="img-responsive" alt="Text">  
  </a>
</div>

If I try and print, all the images appear stacked up at the bottom of the page. So somehow they are there.

If I save page and open it, all the images are stacked up at the bottom of the page. So again, they are there.

Each time I reload the page, I get a different result. Sometimes most pictures show up, some times none, and not always the same.

All my pictures have the same size: 1000x750

No problem with images on the rest of the site.

The problem was also on Firefox at first, but I changed:

@media (max-width: 767px) {
  #blog-listing-big .post .image img.img-responsive,
  #blog-homepage .post .image img.img-responsive {
    min-width: 100%;
  }

to:

@media (max-width: 767px) {
  blog-listing-big .post .image img.img-responsive,
  #blog-homepage .post .image img.img-responsive {
    min-width: 100%;
  }

Can someone help?

[kulak]

I have the same issue on the list page at http://www.talkingwithrebecca.com/material/

I looked into it and it appears that images that are not displayed are set to hight zero. I have not looked into what controls height parameter. It is clear that images are loaded by the browser, but element holding them is not properly resized.

Page level CSS with XPATH:

//*[@id="blog-listing-medium"]/section[1]/div/div[1]/div

<div class="image" style="height: 0px;">
                                  <a href="http://www.talkingwithrebecca.com/material/spanish-rhyming-mats/">
                                      
                                      <img src="http://www.talkingwithrebecca.com/img/material/2017/spanish-rhyming-mats/banner.jpg" class="img-responsive" alt="">
                                      
                                  </a>
                              </div>

[MoiCoquille]

Yes, we had noticed that also. We found a work around, not the ideal, but at least the problem is now resolved. Hoping for no side effects to this work around.

We added the following to custom.css:

#blog-listing-medium .post .image {
    margin-bottom: 10px;
    overflow: hidden;
    min-height: 196px;
}

You can find all the information regarding this issue on https://www.indalit.com/blog/2018/02/18/bug-report-hugo-load-images-blog/

I took the time to write about it because I was unable to find anything about this problem on the internet.

Thanks for your reply.

[kulak]

I have had some time and possibly located reason for the zero height.

in file js/front.js:

/* picture zoom */
function pictureZoom () {
  $('.product .image, .post .image, .photostream div').each(function () {
    var imgHeight = $(this).find('img').height()
    $(this).height(imgHeight)
  })
}

Basically, when images are not yet loaded the height will be set to zero, which is what we see.

[kulak]

The submitted fix is implemented on http://www.talkingwithrebecca.com website and applies to blog and material archetypes.