Search code examples
javascriptjqueryhtmlcssblogger

Thumbnail images on home page (grid) now appearing blurry. How to correct that?

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

xx

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

xxx

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

Solution

  • 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>