Blogger：用于图片缩略图的JavaScript？

Question

在Blogger中，我的图像缩略图被裁剪而不显示原始图像。

如何显示未剪切的原始图像的缩略图？

我的博客：ravitejasps.blogspot.in

我博客文章中原始图片的屏幕截图：

主页上裁剪图片的屏幕截图：

用于创建缩略图的片段：

HTML：

<a expr:href='data:post.url'>
    <div class='img-thumbnail'>
        <span class='overlay' />
        <script type='text/javascript'>
           document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quotenter code here;,&#39;<data:post.title/>&#39;));
        </script>
    </div>
</a>

JavaScript的：

function bp_thumbnail_resize(image_url,post_title)
{
    var image_width=200;
    var image_height=160;
    image_tag='<img width="'+image_width+'" height="'+image_height+'" src="'+image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')+'" alt="'+post_title.replace(/"/g,"")+'" title="'+post_title.replace(/"/g,"")+'"/>';
    if(post_title!="") return image_tag; else return ""; 
}

Answer 1

默认情况下会裁剪图像，但可以更改

默认情况下，Blogger会自动将缩略图裁剪为72像素的正方形。在您发布的代码段中，您可以在.replace(…)语句中通过从替换字符串中删除-c来更改此内容：

所以，这......

image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')
                                                                ^^

......变成这个......

image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'/')

在这种情况下，图像将被限制在两个维度中的较小者。

或者，您可以更改替换代码段，只需使用单个“尺寸”（这类似于max-size），同时删除-c：

image_url.replace('/s72-c/','/s200/')

有关配置缩略图大小和裁剪方式的更多示例，请参阅：Resize the Default Resolution of Thumbnails in Blogger | mybloggertricks.com