search

barryclark / jekyll-now

Build a Jekyll blog in minutes, without touching the command line.
MIT License
8.28k stars 35.21k forks source link

Disabling image optimizations? #89

Closed benjholla closed 9 years ago

benjholla commented 9 years ago

I've narrowed this problem down to Jekyll at least.

On my site I have a javascript zoom box that lets someone zoom in on an image.
See https://questionablecode.org/apk_extractor_3.0/#lessons-learned

However you can see once you zoom in one or two steps its very blurry. Here is the exact same example on Github pages without using Jekyll. https://benjholla.github.io/testzoom/zoom_demo/example.html

For a brief time I thought CloudFlare was reponsible, so I forked my entire Jekyll site to another user repo and the images were still blurry.

As a shot in the dark I took a look at the Jekyll asset pipeline (https://github.com/matthodan/jekyll-asset-pipeline#asset-compression) and disabled any compression features in my _config.yml file that I saw.

Any ideas? This is driving me crazy...and I'm getting desperate. It has something to do with Jekyll I'm pretty sure. My site code is here https://github.com/questionablecode/questionablecode.github.io

barryclark commented 9 years ago

I took a look @benjholla. Love the look of questionablecode.org, by the way!

Your image looks good: https://questionablecode.org/assets/audit_resources/com.ext.ui/3.0/interesting_interactions.png and you've inserted it correctly. There's virtually no way that Jekyll could be causing a problem here, as what's being served is a static site, so if your image is fine, it must be something with the JS zoom box. It looks like the JS zoom box is zooming on the small version of the image, and not repainting the image upon zoom.

Closing as this isn't Jekyll Now (or Jekyll) related. Hopefully that helps you narrow things down, afraid I don't have time to debug the JS.

benjholla commented 9 years ago

Thanks for the help ruling out Jekyll. I knew it was a long shot, but maybe there was something I didn't know. Actually I pretty confident I tracked the bug down finally. Haven't fixed it yet, but turns out there is something that conflicts with my javascript/css of my zoom box and the jekyll-now output css and it just happens to manifest as a partially working zoom box.

benjholla commented 9 years ago

I found it!

In style.scss there was:

img { max-width: 100%; }

From what I can tell this is only used for the avatar image. So for my site I just moved max-width: 100%; (https://github.com/barryclark/jekyll-now/blob/master/style.scss#L109) to the line after site-avatar img attributes (https://github.com/barryclark/jekyll-now/blob/master/style.scss#L179).

That actually kind of make sense now...Thanks again for taking a look. I appreciate your project. Also I noticed for some reason I lost the "forked from" link. I made sure to re-fork to give proper attribution :+1:

barryclark commented 9 years ago

Thanks @benjholla, I'm glad that you found the problem.

img { max-width: 100%; } sets all images to be fluid within their container, which is typically what you want in a blog post, and helpful at different responsive breakpoints. It'd make sense that was messing with the plugin. Good luck with the site! :)