Overriding Thumbnail Dimensions

[nicholas-alonzo]

Hi, I'm looking to override the dimensions of the thumbnails to be in a Letter size ratio with the cardView: true parameter on

I found this mentioned in the docs:

Hero Images
Thumbnails will be used by default as hero images within each article. Use the global article.showHero or the front-matter parameter showHero to control this feature across the entire site or for each specific post. If you want to override the style of the hero image, you can create a file called hero.html in ./layouts/partials/ that will override the original partial from the theme.

How and where would I change the dimensions and would that also affect the article.heroStyle?

[ZhenShuo2021]

I'm guessing you want to change the thumbnail size of article cards with cardView is true. The heroStyle controls the hero image of each article, while the cardView option affects the article card layout. They are actually not related.

Am I understanding you correctly?

[nicholas-alonzo]

Hi there @ZhenShuo2021 , thanks for responding

Yes, I want to change the thumbnail hero image dimensions displayed. Here are some pictures,

Below is the default-thumbnail.jpeg I have - you can see that it's in a Letter size ratio common to event flyers

Below is how the thumbnail looks in cardView: true and cardView: false. You can see how it the full image isn't displayed

Below is how the image looks in an article page:

I would like to display the full image here, but more centered so it doesn't take up the full width, like this in red

How and where would I change the dimensions to show the full image in the Letter size ratio? Thanks!

[ZhenShuo2021]

Currently (v2.89.1), you can add the following to custom.css to override the sizes:

/* Thumbnail height when cardView is true */
.thumbnail_card {
  height: 900px;
}

/* Thumbnail height when cardView is false */
.thumbnail {
  height: 900px;
}

/* Hero image ratio */
#main-content > article > div {
  aspect-ratio: 1/1.4142;
  margin-inline: auto;
  width: unset;
  height: 480px;
}

However, I have opened a new PR (#2455) to rewrite the image architecture. If the PR is accepted, in your case, this will only affect the CSS class naming:

• thumbnail -> thumbnail--simple
• thumbnail_card -> thumbnail--card

[nicholas-alonzo]

Hey there @ZhenShuo2021 , thanks for responding - I was testing and found that when:

[article]
  heroStyle = "thumbAndBackground"

Below is what the hero image looks like. The thumbnail is centered, but the default background (boxed in red) should still cover the whole page and not be connected with the thumbnail

Also, I'm wondering how the thumbnail image can be dynamic so that the full image is still shown in the card view true / false. Is that possible? Thanks!

[ZhenShuo2021]

Hi @nicholas-alonzo, the CSS I shared earlier was not precise. A more accurate approach is to specifically the first div:

- #main-content > article > div {
+ #main-content > article > div:nth-of-type(1) {
  aspect-ratio: 1/1.4142;
  margin-inline: auto;
  width: unset;
  height: 480px;
}

This should fix the problem.

[nicholas-alonzo]

Hi @ZhenShuo2021 , I tested the adjusted code and it works! I have a few last questions,

1. Is there a way to make the height dynamic so you can still see the full image when the screen size changes?
2. Is there a way to apply the CSS to only specific pages? For example, I'd like all articles in ./content/events/* to follow the Letter size ratio dimensions

[ZhenShuo2021]

Happy to hear it works!

1. Not sure how to implement this, you might need to investigate it yourself.
2. Yes, you can create a separate CSS file and include it in extend-head-uncached.html. Then use .Page.Path in your template to conditionally include the CSS.

This keeps your CSS applied without affecting other pages.

[nicholas-alonzo]

Thanks again for your reply @ZhenShuo2021 , I read about the extend-head-uncached.html, but stuck trying to figure out what to put into extend-head-uncached.html and integrate .Page.Path.

Are you able to share an example for this scenario I mentioned with ./content/events/* ?

[ZhenShuo2021]

assets/css/events.css

/* Thumbnail height when cardView is true */
.thumbnail_card {
  height: 900px;
}

/* Thumbnail height when cardView is false */
.thumbnail {
  height: 900px;
}

/* Hero image ratio */
#main-content > article > div:nth-of-type(1) {
  aspect-ratio: 1/1.4142;
  margin-inline: auto;
  width: unset;
  height: 480px;
}

layouts/partials/extend-head-uncached.html

{{ if hasPrefix .Page.Path "/events" }}
  {{ with resources.Get "css/events.css" }}
    {{ $eventsCSS := . | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
    <link rel="stylesheet" href="{{ $eventsCSS.RelPermalink }}" integrity="{{ $eventsCSS.Data.Integrity }}">
  {{ end }}
{{ end }}

[nicholas-alonzo]

Hi @ZhenShuo2021 - I tested it and it works! Your help and this type of flexibility is what I like about Blowfish