Images don't always load in BLOG section

support
1

Hello,

I hope this post is relevant to this group, this is my first time.

This one is annoying because it’s intermittent. It doesn’t appear to be a problem on telephones.

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.

I changed the following which appeared to have fixed the problem at first, but then didn’t:

@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?

2

This seems like a hosting or front-end problem and not related to Hugo.

I would suggest checking out the Chrome Dev tools console for any errors. If the images don’t load there must be an error somewhere.

3

The images do show up for me, when I visit the page in the regular browser (Firefox) or with the mobile view. They also show when I disable all JavaScript and also appear when I enable all JavaScript.

One thing I did notice is that sometimes the images show very small. The code that appears in the Dev tools is:

<div class="image" style="height: 22px;">
  <a href="http://www.indalit.com/blog/2017/06/17/aws-ec2-instances-metadata/">
      
      <img src="http://www.indalit.com/img/blog/aws-ec2-instances-metadata.jpg" class="img-responsive" alt="Text">
        
  </a>
</div>

(The height 22px is a culprit here.)

But looking at the page’s source, that problem isn’t there:

<div class="image">
  <a href="http://www.indalit.com/blog/2017/06/17/aws-ec2-instances-metadata/">
      
      <img src="http://www.indalit.com/img/blog/aws-ec2-instances-metadata.jpg" class="img-responsive"
         alt="Text">
        
  </a>
</div>

To me it seems that your JavaScript adds style="height: 22px;" to the images in some cases. But I wouldn’t know what JavaScript code causes this.

4

Thank you for your answer. I’m a bit closer to resolving this issue, at least if I knew .js it would help.

I’ve found this: https://github.com/scottjehl/Respond , might be the .js that does this. I won’t upload the code from the site here, it’s just one huge blob of data, not workable.

What do you think?

5

The site is hosted on Amazon S3.

I’ve been looking at the Dev tools, but still to much of a newby to actually find relevant information. Based on a comment by Jura saying it probably is the JavaScript, I think it may be respond.min.js from https://github.com/scottjehl/Respond. At this stage I’ll need somebody more knowledgable than I on this subject to look at it.

6

Yes but we cannot help you about this issue here. Try StackOverflow or ask the author of the Hugo theme you use.

This is a forum for Hugo relevant issues only.

I’m closing this thread.