Question

我不知道这看起来有点傻但是从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www.candidopinions.in

我有一个网格视图模板，其中博客帖子中的特色图像显示在主页上，作为调整大小的缩略图（每个主页上有8个图像）。这个博客和我使用的模板已经存在了1。5年，直到昨晚，缩略图显得很清晰。我不知道发生了什么，但从早上开始，缩略图显示模糊/像素化，虽然在博文中，它们看起来质量很好。我不确定是否有一些javascript代码被意外删除或者我上传到我网站上的某些js文件不再可访问。

我想，这是用于调整主页上缩略图图像大小的代码：

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

我试图增加image_size = 340的值以及宽度和高度，但是没有结果。我也尝试将s72-c替换为s1600，但无济于事。在此处分享当前模糊图像缩略图的屏幕截图

目前缩略图显示模糊的截图

我还检查了互联网网络存档，这是它在昨晚之前的用途 -

以前缩略图图像曾经是更清晰，更清晰的截图

xxx

请有人帮助我，因为我无法知道错误在哪里。任何指导将非常感谢。谢谢。

Answer 1

javascript代码中的图片调整大小参数/s72-c/与主页上的图片调整大小参数/s72-c-k-no/之间存在差异。

为避免从javascript代码段/

中删除'/s72-c/','/s'+image_size+'-c/'

试试这个

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

<强>更新

另外如果你需要一个没有JavaScript的完美方法，并且为了避免将来Blogger对任何similer进行更改，你可以使用resizeImage运算符来改变图像的大小服务器端

用

替换上面的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='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>

Answer 2

使用Blogger提供的图像的resize operator将是更好的解决方案。它将使您的代码免受缩略图URL参数中可能发生的任何未来更改的影响，因为调整大小的缩略图URL将由Blogger本身生成（不通过JavaScript正则表达式匹配）。您的代码将更改如下 -

<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(&quot;<b:eval expr='resizeImage(data:post.thumbnailUrl,340,"1:1")'/>&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>

正如您将注意到的，.replace操作已完成删除。相反，现在您可以直接通过标签本身设置缩略图尺寸 - <b:eval expr='resizeImage(data:post.thumbnailUrl, 340,"1:1")'/>

关于resizeImage函数所需的各种参数的信息 -

resizeImage运算符有3个参数：

imageUrl - 可调整大小图片的原始网址。

newSize - 图片的新宽度

（可选）比率 - 调整大小后的图片的宽度与高度的整数比例，例如“1：1”或“4：3”

备注



如果imageUrl参数不是可调整大小的图像，则为resizeImage   函数将返回原始imageUrl。



比率必须为整数   数字。



如果提供了比率，图像将被裁剪为那些   确切的尺寸。

Answer 3

它看起来像是一个简单的图像压缩问题，您可以考虑查找这些图像并搜索具有适当尺寸的文件，

您网站上其中一个图片的源图片文件： https://3.bp.blogspot.com/-MPPETleu560/WLb8qTSGMpI/AAAAAAAABo8/NrYKhoqQj_0yqBCNRS1PstLIqkhnT_uvwCLcB/s72-c-k-no/matar-rice-paneer-makhni.jpg

请注意图像的实际尺寸，请考虑为图像文件切换服务器并以.png格式而非.jpg保留图像。

主页（网格）上的缩略图图像现在显得模糊。如何纠正？

3 个答案: