哪个 Blogger 模板数据标签会提取未调整大小的原始帖子图片?



Blogger有一些用于获取帖子图片的布局数据标签,例如data:blog.postImageUrl(获取帖子中第一张图片的URL)和data:blog.postImageThumbnailUrl(生成帖子中第一张图片的70×70像素缩略图,在Facebook/Twitter/等上分享时太小而无法使用)。

但是,在发布帖子时,Blogger 会自动使用帖子中的第一张图片,使用经过专门调整大小和/或裁剪的图片版本生成自己的og:image元标记。重要的是,此生成的图像将忽略您可能通过修改其URL中的s1600对帖子图像所做的任何自定义大小调整或裁剪(此处解释),返回非常适合在社交媒体网站上共享的大尺寸图像。(它甚至将图像裁剪为1.91:1的比例,正如Facebook的"最佳实践"中所建议的那样。

下面是一个示例:

原始图片网址(大小:600×450:)
https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/s1600/Montreal-Biodome-exterior.jpg

使用自定义大小值w180调整图像大小(最大宽度为 180 像素):
https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w180/Montreal-Biodome-exterior.jpg

以下是 Blogger 自动生成的图片(裁剪为 600×315): https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg

请注意自动生成的图像如何使用其自己的大小值w1200-h630-p-k-no-nu,完全忽略我指定的w180


对我来说,问题是我也使用Twitter的"大图像摘要卡"。我尝试使用 Blogger 数据标签指定用于twitter:image卡片元标记的图片网址,如下所示:

<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
OR
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

除了第一个(postImageThumbnailUrl),如顶部所述,在70×70像素处太小,而第二个(data:blog.postImageUrl)获取具有自定义大小值的图像URLw180,返回的图像只有180像素宽 - 对于在Twitter上分享同样无用(生成的Twitter卡片使用空白占位符图像)。

我现在所做的是完全删除twitter:image标签,这迫使Twitter使用og:image标签,以便链接共享正常工作。但是,如果可能的话,我更喜欢将twitter:image标签与正确的图像数据标签一起使用。

所以这是我的问题:有谁知道数据标签是什么,如果有的话,可以获取Blogger为每个帖子生成的大型裁剪w1200-h630-p-k-no-nu版本的帖子图片?这样:

<meta expr:content='data.{ETC}' name='twitter:image'/>

在使用上图的帖子中,它将呈现为:

<meta content='https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg' name='twitter:image'/>

我感谢Prayag Verma指出一个类似的现有问题来回答这个问题。使用resizeImage运算符,我在模板中实现了以下代码:

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "40:21")' name='twitter:image'/>
</b:if>

在帖子的来源中,呈现为:

<meta content='https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg' name='twitter:image'/>

这正是我想要得到的。它以优异的成绩通过了Twitter验证器。问题解决了。

最新更新