images 4:3 are stretched

[MadeByDouglas]

Your sample images are 16:9, when i put in a 4:3 image it gets stretched in the main feed. I imagine the issue is somewhere in the _card.scss but i'm rather new to all this. Could you take a look?

Great theme btw! thanks

[janczizikow]

Hey @MadeByDouglas

Really glad you like the theme! You're right - if you want to use images that have 4:3 ratio you will need to modify _card.scss:

.post-card__thumb {
  margin: 0;
  background: $bg-color;
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    display: block;
    height: 0;
    width: 100%;
    // 16:9 = 56.25% = calc(9 / 16 * 100%) 
    padding-bottom: 56.25%; // this is the line you need to change -> you can use the formula above
    // 4:3 = 75% = calc(3 / 4 * 100%)
    padding-bottom: 75%; // if you want to use 4:3 images
  }

  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
}

You can read more about this 'CSS hack' here: CSS intrinsic ratio scaling technique After making changes to _card.scss you'll need to run gulp from command line to compile SASS to CSS.

Let me know if that helps! Cheers, Jan

[MadeByDouglas]

ah ok, i made that change but didnt realize i had to run gulp sass ok that makes sense.

Hmm, i guess theres no way to make it adaptive to any image you throw in there? either they're all 16x9 or all 4x3?

[MadeByDouglas]

also when uploading to github pages, i get a warning saying my theme "jekyll-sleek" is not supported. It seems to work fine though. Should i just not list the theme in the yamll file? I'm using theme just copied over, not the gem version. i could not get any gem theme to work for whatever reason, seems like it doesnt copy the necessary files. I'm a iOS dev but totally new to web stuff

[MadeByDouglas]

another question: how can i change images in posts to not take the whole screen? if i change img class _base.scss it changes all of them, including thumbnails etc. And if i add another class, like .img_half in my markdown file it doesnt seem to find that class or adapt to it

[janczizikow]

Hey @MadeByDouglas,

Sorry got quite busy with bunch of stuff and wasn't really checking this repo. To answer your questions:

1. Can images be only 16:9 or 4:3? Not necessarily. In my previous comment you can see commented lines calculations for 16:9 and 4:3 images as an example.

.post-card__thumb {
 //.... some code
  &::after {
    //.... some code
    // 16:9 = 56.25% = calc(9 / 16 * 100%) 
    padding-bottom: 56.25%; // this is the line you need to change -> you can use the formula above
  }

So if you want different image ratio you just need to make a calculation: height ratio / width ratio * 100%. E.g.: If you would like to have 18:9 image ratio: 9 / 18 * 100% = 50%, so you could set the padding-bottom: 50%. That will give you the percentage that you need to use as a padding-bottom for the intrinsic ratio technique.

2. Github page + sleek warning - Yes, in order to prevent the warning from happening you need to remove the theme: jekyll-sleek from config.yml. You can refer to this issue.

3. Full width images in post pages - if you're referring to the main 'banners' / hero images at the very top of the post => you'll probably need to create a new class (the 'hero' images share the styles with the homepage). You can find the styles for those images in: _sass/_pages/_pages.sccs. You could also change a bit the HTML structure of the page in: _layouts/post.html. For example you can just wrap the whole image block with a <div class="container></div>.

[janczizikow]

Hey @MadeByDouglas gonna close this, hope you figure everything out. In case you have more questions just open a new issue!