主页（网格）上的缩略图图像现在显得模糊。如何纠正？ [英] Thumbnail images on home page (grid) now appearing blurry. How to correct that?

问题描述

我不知道这是否看起来很愚蠢，但自从早上起，我一直无法纠正这个突然出现在我的博客网站上的错误操作符可用于更改图像大小服务器端

替换上面的JavaScript代码与

 < img expr：src ='resizeImage（data：post.thumbnailUrl，340）'/> ; 
  

您的密码

 < b：if cond ='data：post.thumbnailUrl'> 
< a expr：href ='data：post.url'> 
< img expr：src ='resizeImage（data：post.thumbnailUrl，340）'expr：title ='data：post.title'class ='postthumb'width ='370'height ='200'expr ：ALT = '数据：post.title'/> 
< / a> 
< b：else /> 
< a expr：href ='data：post.url'> 
< img class ='postthumb'expr：alt ='data：post.title'expr：title ='data：post.title'height ='100'src ='https：//1.bp。 blogspot.com/-KPszJjd3eow/Vs0v2crutdI/AAAAAAAAA1Y/T2ulIts0CGc/s1600/candid-opinions-logo.png'width ='150'/> 
< / a> 
< / b：if> 
  

I don't know if this looks silly but since morning I have been unable to correct this error that has suddenly crept up on my blog site www.candidopinions.in

I have a grid view template in which the featured image in a blogpost appears on the home page as resized thumbnails (8 images on each home page). This blog and the template that I am using have been live since 1.5 years and until last night, the thumbnail images were appearing sharp. I don't know what happened but since morning the thumbnail images have been appearing blurry/pixelated, although inside the blogpost, they appear in good quality. I am not sure if some javascript code got deleted accidentally or some js file that I uploaded on my site isn't accessible anymore.

I guess, this is the code meant for resizing of the thumbnail images on the home page:

<article class='post hentry'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
         <b:if cond='data:post.thumbnailUrl'>
          <script type='text/javascript'>
          //<![CDATA[
          function bp_thumbnail_resize(image_url,post_title) {var image_size=340; image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" width="370" height="200" alt="'+post_title+'" title="'+post_title+'"/>'; if(image_url!="") return image_tag; else return ""; }
          //]]>
          </script>

          <a expr:href='data:post.url'><script type='text/javascript'>
          document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
          </script></a>
          <b:else/>
          <a expr:href='data:post.url'><img class='postthumb' expr:alt='data:post.title' expr:title='data:post.title' height='100' src='https://1.bp.blogspot.com/-KPszJjd3eow/Vs0v2crutdI/AAAAAAAAA1Y/T2ulIts0CGc/s1600/candid-opinions-logo.png' width='150'/></a>
          </b:if>

I tried to increase the value of image_size=340 and so also width and height, but for no result. I also tried replacing s72-c to s1600 but to no avail. Sharing a screenshot here of the current blurry image thumbnails

Currently thumbnail images appearing blurry screenshot

I have also checked with the Internet web archive and this is how it used to look until last night -

Previously the thumbnail images used to be sharp and clearer screenshot

Kindly someone help me out as I am unable to know where lies the fault. Any guidance will be very much appreciated. Thank you.

解决方案

There is a difference between image resize parameter /s72-c/ in javascript code and images resize parameters /s72-c-k-no/ on homepage.

To avoid that remove / from javascript snippet '/s72-c/','/s'+image_size+'-c/'

Try this

<article class='post hentry'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
         <b:if cond='data:post.thumbnailUrl'>
          <script type='text/javascript'>
          //<![CDATA[
          function bp_thumbnail_resize(image_url,post_title) {var image_size=340; image_tag='<img src="'+image_url.replace('s72-c','s'+image_size+'-c')+'" class="postthumb" width="370" height="200" alt="'+post_title+'" title="'+post_title+'"/>'; if(image_url!="") return image_tag; else return ""; }
          //]]>
          </script>

          <a expr:href='data:post.url'><script type='text/javascript'>
          document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
          </script></a>
          <b:else/>
          <a expr:href='data:post.url'><img class='postthumb' expr:alt='data:post.title' expr:title='data:post.title' height='100' src='https://1.bp.blogspot.com/-KPszJjd3eow/Vs0v2crutdI/AAAAAAAAA1Y/T2ulIts0CGc/s1600/candid-opinions-logo.png' width='150'/></a>
          </b:if>

Update

Alternatively If you need a perfect method without JavaScript and to avoid any similer changes by Blogger in the future you can use resizeImage operator which can be usesed to change the size of the image server-side

Replace the JavaScript code above with

<img expr:src='resizeImage(data:post.thumbnailUrl, 340)'/>

Your code

<b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'>
        <img expr:src='resizeImage(data:post.thumbnailUrl, 340)' expr:title='data:post.title' class='postthumb' width='370' height='200' expr:alt='data:post.title'/>
    </a>
<b:else/>
    <a expr:href='data:post.url'>
        <img class='postthumb' expr:alt='data:post.title' expr:title='data:post.title' height='100' src='https://1.bp.blogspot.com/-KPszJjd3eow/Vs0v2crutdI/AAAAAAAAA1Y/T2ulIts0CGc/s1600/candid-opinions-logo.png' width='150'/>
    </a>
</b:if>

这篇关于主页（网格）上的缩略图图像现在显得模糊。如何纠正？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！