Blogger – Scale Home Page Post Thumbnails Instead of Cropped Thumbnails?

[orca]

I am using Blogger’s “Notable” responsive template which display a summary list of recent posts on the home page. This summary consists of a thumbnail of the 1st image in the post and first several sentences of the post.

The thumbnails created by this process are being cut off on the right and left sides.

Below is an example of such a image as seen on iPhone emulator – the images are also cutoff on desktops.

http://i65.tinypic.com/izrzw7.png

How do I force Blogger to insert proportionally scaled thumbnails which are not cropped?

[Beverleyh]

We can’t be of much help without seeing the code; if you provide a reduced demo in CodePen, we should be able to offer suggestions. Note that we don’t need the whole codebase. We just need the HTML and CSS pertinent to this particular image problem.

Off the top of my head, have a look in to “background-size in CSS” (Google research). It sounds like “cover” is in effect, where you might be looking for “contain” instead. You can inspect the proble element in the developer console to see if this is the case; that’s F12 in most browsers.

[orca]

I’ve posted the the xhtml file for the template within a temporary Blogger post here:

http://temporary51.blogspot.com/2018/01/notable-template.html

I’ve attempted to modify code with references “thumbnail” but did not have any success:

This occurs first:

.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 .thumbnail-empty {
  background: transparent;
}

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

.post-outer .snippet-thumbnail img {
  max-height: 100%;
}

This is farther down in the xhtml under this media query

@media screen and (max-width: 1168px) {
  .centered-top-container,
  .centered-top-placeholder {
    padding: 24px 24px 32px 24px;
  }

  .post-outer .snippet-thumbnail {
    width: 920px;
    height: 613.33333px;
    margin-bottom: 16px;
  }
  .post-outer .snippet-thumbnail.thumbnail-empty {
    display: none;

This is farther down in the xhtml under this media query

@media screen and (max-width: 968px) {
  body {
    font-size: $(body.text.font.size * 14 / 20);
  }

  .post-outer .snippet-thumbnail {
    width: 100%;
    height: calc((100vw - 48px) * 2 / 3);
  }

It appears the code may producing cropped thumbnails of the original image and then stretching those to fit the thumbnail’s parent area.

Here’s the homepage of the temporary blog with a post containing a image:

http://temporary51.blogspot.com

[Beverleyh]

A reduced demo of the problem in CodePen would be more helpful, especially for folks on mobile (like me) who don’t have access to (or don’t want to) poke about the whole codebase for you in the developer console. The template file and CSS don’t really demonstrate the problem separately, and for someone who’s never used Blogger (again, like me), makes very little sense.

To increase your chances of getting a helpful response, you need to make it easier for us to give you help. This means extracting the pertinent HTML that’s served in the browser, and coupling it with the pertinent CSS that causes the issue. We’d like to see a working example of the issue boiled down to basics in a CodePen demo. For you, this means extracting just enough HTML and CSS to demonstrate the problem, which you can do with the help of the developer console – F12 in most browsers. You can use the tools there to view and extract the HTML and CSS in order to put together a streamlined demo for us. Once in CodePen, we’ll be better placed to make edits and offer suggestions/fixes on the fly.

That said, and as previously suggested, have you tried setting the background-size property/value pairing to contain? From the CSS you posted above, I can see a cover value. Look into “background-size css” via Google to learn more.

Good look with your project.

[Beverleyh]

It appears the code may producing cropped thumbnails of the original image

Not really something I can comment on as I’m not familiar with Blogger. It makes sense though since many systems will create cropped and reduced size thumbs during the upload process. You can check if the images served are cropped/reduced via the dev console (F12). Maybe there’s a setting in Blogger where you can change this behaviour? Have a look in the admin panel. Or maybe you can modify the files involved during the image upload process (unlikely if hosted by a 3rd party – only something you can really do if you host the software yourself).

[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.

[Author]

Posts