cotes2020 / jekyll-theme-chirpy

A minimal, responsive, and feature-rich Jekyll theme for technical writing.
https://chirpy.cotes.page
MIT License
7.5k stars 5.87k forks source link

Empty spaces in home layout after upgrading to 6.2.3 #1312

Closed DmitriyFrogo closed 1 year ago

DmitriyFrogo commented 1 year ago

Checklist

How did you create the site?

Generated from chirpy-starter

Describe the bug

I found that after upgrading from 6.2.2 to 6.2.3, now all posts on home page, have empty space right after preview image, if you use images smaller than expected chirpy623-1

Also I found quick fix for me You need to add width="100%" height="100%" in this part of code: https://github.com/cotes2020/jekyll-theme-chirpy/blob/897b57bfb4404c9ccbb5909008b7029980272e65/_layouts/home.html#L64

Like this: <img src="{{ src }}" alt="{{ alt }}" width="100%" height="100%" {{ lqip }}>

So it looks like this now: chirpy623-2

I'm not a developer, so I don't know if there will be problems from my fix, but at first look it works fine

Steps To Reproduce

  1. Upgrade chirpy-starter from 6.2.2 to 6.2.3
  2. Open home page
  3. See empty spaces within preview images

Expected Behavior

No empty spaces

Environment

Anything else?

No response

geduardo commented 1 year ago

Same issue, thanks for the fix.

DmitriyFrogo commented 1 year ago

Same issue, thanks for the fix.

As I said above, I'm not a developer, so I can't guarantee that my fix won't break something else I suggest you to wait and see what @cotes2020 can say about it

cotes2020 commented 1 year ago

It is indeed an issue, but you won't get blanks if you follow the docs and use 1.91 : 1 images.

DmitriyFrogo commented 1 year ago

It is indeed an issue, but you won't get blanks if you follow the docs and use 1.91 : 1 images.

You're right, but we're lazy people and we want to write posts, not think about aspect ratios :D The main problem is that this behavior was not present in 6.2.2 Without my small fix with "width/height=100%", I need to manually resize 150+ images, but now I can even use ugly stretched 100x100 image

ZhengYuan-Public commented 1 year ago

It is indeed an issue, but you won't get blanks if you follow the docs and use 1.91 : 1 images.

You're right, but we're lazy people and we want to write posts, not think about aspect ratios :D The main problem is that this behavior was not present in 6.2.2 Without my small fix with "width/height=100%", I need to manually resize 150+ images, but now I can even use ugly stretched 100x100 image

Thank God I took a look at it here. I've been wondering why it's working great locally but the GitHub page has lots of wrong images, and I've been trying to resize my images like crazy... :cry:

BTW, how can I make sure my local version is up to date or the same as the one on GitHub? I started my repo from the template. I noticed the TOC can only show at most the 2nd level of headings locally, but it can show the 3rd on GitHub when I'm in the 2nd heading. (I don't use the 1st level heading # at all, so showing the 2nd level of headings means ### and 3rd means ####)

I just realized a gem is basically a package, so bundle update does the work.