Dealing with featured images in another way?

[kreincke]

There is a clear behavior in sizing the featured images of a post:

• To get a small picture as part a the_latest_post-list one can use a plugin. Works well.
• If I expand my window beyond the maximum bootscore/bootstrap maximum size, the image is placed on the left side of the article teaser - in such a way that the picture - although downsized - is visible without any distorsion. Works well.
• If I shrink my window to the size that the picture must be placed on to of the teaser, the picture also printed with preserved aspect ration. Works well.
• If I shrink my window more, the picture is shrunk too. Works well.
• If I shrink my window to size, which does not allow to present the sidebar aside of the article teaser, the picture first successfully grows and then shrinks again.

BUT:

• While shrinking my window width from the maximum value to the point when the featured image is presented above of the teaser the picture is cropped on the left and on the right side.

That's a bit astonishing - and ugly.

What do you think: Couldn't it be possible to shrink the featured picture inside of the teaser box while preserving the aspect ratio? I assume that you did not want to give up the idea to have been filled the complete left picture area instead of having white areas on top and under the featured picture.

If you agree with that idea, where would you improve bootscore to get such a behavior?

BR KR

[crftwrk]

In default archive.php responsive cards are used and images in horizontal view have object-fit: cover; on lg sizes to fit the card.

@include media-breakpoint-up(lg) {
  .card-img-left-md img {
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

If you want to change this, simply override it in your child's scss/bscore_custom.scss:

@include media-breakpoint-up(lg) {
  .card-img-left-md img {
    border-top-left-radius: none;
    border-bottom-left-radius: none;
    object-fit: contain;
    height: auto;
  }
}

But you can download more templates for archive, category and author https://github.com/bootscore/bs-loop-templates and add them to your child. So, there are many starting points to create your own.

All demos: https://bootscore.me/theme/#loop-templates