CodeIT icon indicating copy to clipboard operation
CodeIT copied to clipboard

Inconsistent Image Handling and Sizing

Open sheldonhull opened this issue 4 years ago • 1 comments
trafficstars

Describe the bug

  • The image behavior is not handling lazyloading sizing correctly for image posts.
  • The gallery/expand view doesn't work without an extra title attribute.
  • The lazy loaded size for a full single post image is too small. In reviewing the results of the rendered page it looks like this:
<img class="lazyautosizes ls-is-cached lazyloaded" src="/images/install_ssms2012_1_rqpqhb.jpg" data-src="/images/install_ssms2012_1_rqpqhb.jpg" data-srcset="/images/install_ssms2012_1_rqpqhb.jpg, /images/install_ssms2012_1_rqpqhb.jpg 1.5x, /images/install_ssms2012_1_rqpqhb.jpg 2x" data-sizes="auto" alt="/images/install_ssms2012_1_rqpqhb.jpg" title="install_ssms2012_1" sizes="150px" srcset="/images/install_ssms2012_1_rqpqhb.jpg, /images/install_ssms2012_1_rqpqhb.jpg 1.5x, /images/install_ssms2012_1_rqpqhb.jpg 2x">

If I strip out all the other srcset to only leaving the standard image the size is fine (albeit left aligned instead of centered) Something with the lazy loading process is making this size too small. I also can't click on it to expand (see next expected behavior section).

Expected behavior

Images expanded on click with normal markdown syntax of: ![image](/static/image.png) Images sized to full width of div for post , and not loaded to smaller thumbnail size.

Screenshots

2021-06-18-12 34 18-Google Chrome

2021-06-18-12 37 03-Google Chrome

Build Environment

  • OS: macOS
  • Using Hugo modules: github.com/sunt-programator/CodeIT v0.1.2
  • Hugo version: hugo v0.82.0+extended darwin/amd64 BuildDate=unknown

Additional Information

Didn't have time to figure this out as I think it's something to do do primarily with the javascript loading for lazy images or lightgallery, which I wasn't able to debug.

sheldonhull avatar Jun 18 '21 17:06 sheldonhull

Hi @sheldonhull,

Yeah, I observed this bug since LoveIt, I'll try to look at this issue. Thanks 😉.

victor-pogor avatar Jun 28 '21 19:06 victor-pogor