Reply To: Blogger – Scale Home Page Post Thumbnails Instead of Cropped Thumbnails?

[orca]

I found this post on the Blogger forum:

https://productforums.google.com/forum/#!topic/blogger/q8fhNp4xnQE;context-place=topicsearchin/blogger/category$3Atemplates-gadgets-html%7Csort:relevance%7Cspell:false

The code below is from the default template. Changing the aspect ratio as the above post suggests may make the thumbnail look better or worse depending on the size of your image. Changing the aspect ratio to 4:3 in the first media query for larger desktop screens did make the test post’s horizontally thumbnail look better but it was still being cropped. These media queries at resizing the original image to cover the thumbnail’s parent container and then cropping off any portion of the image that falls outside the parent’s boundaries.

<style>
                    @media (min-width: 1168px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, "1:1").cssEscaped'/>);
                      }
                    }
                    @media (min-width: 969px) and (max-width: 1167px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 1167, "3:2").cssEscaped'/>);
                      }
                    }
                    @media (min-width: 601px) and (max-width: 968px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 968, "3:2").cssEscaped'/>);
                      }
                    }
                    @media (max-width: 600px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600, "3:2").cssEscaped'/>);
                      }
                    }
                  </style>

After researching the resize operator and seeing it was optional I decided to remove the ratio altogether form the media queries and that worked. I removed code similar to this from each of the media queries:

 , "1:1"

<style>
                    @media (min-width: 1168px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256).cssEscaped'/>);
                      }
                    }
                    @media (min-width: 969px) and (max-width: 1167px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 1167).cssEscaped'/>);
                      }
                    }
                    @media (min-width: 601px) and (max-width: 968px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 968).cssEscaped'/>);
                      }
                    }
                    @media (max-width: 600px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600).cssEscaped'/>);
                      }
                    }
                  </style>

Change “cover” in the following code to “contain”

.post-outer .snippet-thumbnail-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.post-outer .snippet-thumbnail-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

The images will be correctly scaled, but the parent container around the thumbnail has a black background, which may create black bars above and below the thumbnails because they may no longer fill the parent container. To get rid of this one must change the default color to whatever background your page is using so the thumbnails will appear to float. In this case the default black was changed to white.

.post-outer .snippet-thumbnail {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 256px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-$endSide: 136px;
  overflow: hidden;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  position: relative;
  width: 256px;
}

.post-outer .snippet-thumbnail {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 256px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-$endSide: 136px;
  overflow: hidden;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  position: relative;
  width: 256px;
}

The images will now be correctly correctly sized and appear to float on a white background:

http://i64.tinypic.com/531k0o.png

One could also add a optional border around each thumbnail container to present a uniform frame for the now differently sized thumbnails.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
a.snippet-thumbnail {
border: 2px solid #25a186;
border-radius: 8px;
padding:2px;
}
</style>
</b:if>

http://i63.tinypic.com/2uh3k39.png

Thanks for your suggestions. One of those things that you work for hours and then suddenly the lightbulb comes on.