问题
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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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("<data:post.thumbnailUrl/>","<data:post.title/>"));
</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.
回答1:
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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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("<data:post.thumbnailUrl/>","<data:post.title/>"));
</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>
回答2:
Using the resize operator for images provided by Blogger would be much better solution. It will make your code immune to any future changes that might occur in thumbnail URL parameters because the resized thumbnail URL will get generated by Blogger itself (Not via JavaScript Regex matching). Your code will change as follows -
<b:if cond='data:post.thumbnailUrl'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url, post_title) {
image_tag = '<img src="' + image_url +
'" 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("<b:eval expr='resizeImage(data:post.thumbnailUrl,340,"1:1")'/>","<data:post.title/>"));
</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>
As you will notice, the .replace operation has been completed removed. Instead, now you will be directly able to set the thumbnail dimensions via the tag itself - <b:eval expr='resizeImage(data:post.thumbnailUrl, 340,"1:1")'/>
Regarding the information about the various parameters that resizeImage function takes -
The resizeImage operator takes 3 parameters:
imageUrl - The original URL of the resizable image.
newSize - The new width of the image
(optional) ratio - The integer ratio of width to height for the resized image, e.g. “1:1” or “4:3”
NOTES
If the imageUrl parameter is not a resizable image, the resizeImage function will return the original imageUrl.
The ratio must be integer numbers.
If the ratio is provided, the image will be cropped to those exact dimensions.
回答3:
It looks like a simple issue of image compression, you might consider looking up these images and searching out a file with the proper dimensions,
the source image file for one of the images on your site: https://3.bp.blogspot.com/-MPPETleu560/WLb8qTSGMpI/AAAAAAAABo8/NrYKhoqQj_0yqBCNRS1PstLIqkhnT_uvwCLcB/s72-c-k-no/matar-rice-paneer-makhni.jpg
Notice how small the image really is, Consider switching servers for your image files and retaining images in a .png format rather than .jpg.
来源：https://stackoverflow.com/questions/42558143/thumbnail-images-on-home-page-grid-now-appearing-blurry-how-to-correct-that