哪个 Blogger 模板数据标签获取原始的、未调整大小的 post 图片?
Which Blogger template data tag fetches original, unresized post image?
Blogger 有一些用于获取 post 图片的布局数据标签,例如 data:blog.postImageUrl
(获取 post 中第一张图片的 URL)和 data:blog.postImageThumbnailUrl
(生成 post 中第一张图片的 70×70 像素缩略图,在 Facebook/Twitter/etc 上分享时太小无法使用)。
但是,在发布 post 时,Blogger 会自动使用您 post 中的第一张图片,使用经过特殊调整的 and/or 生成自己的 og:image
元标记图像的裁剪版本。重要的是,此生成的图像将忽略您可能通过修改其 URL 中的 s1600
对 post 图像所做的任何自定义调整大小或裁剪(explained here), returning a large-size image that’s perfect for sharing on social media sites. (It even crops the image down to a 1.91:1 ratio, as recommended in Facebook’s “Best Practices”。)
举个例子:
原图URL(尺寸: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
卡片元标签的图像 URL,如下所示:
<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
) 获取图像 URL 使用自定义大小值 w180
,返回一张只有 180 像素宽的图像——就像在 Twitter 上分享一样无用(生成的 Twitter Card 使用空白占位符图像)。
我现在所做的是完全删除 twitter:image
标签,这会强制 Twitter 使用 og:image
标签,以便 link 共享有效。但是,如果可能的话,我更愿意使用带有正确图像数据标签的 twitter:image
标签。
所以这是我的问题:有谁知道数据标签是什么,如果存在的话,可以获取[=]的大裁剪w1200-h630-p-k-no-nu
版本65=] Blogger 为每个 post 生成的图像?像这样:
<meta expr:content='data.{ETC}' name='twitter:image'/>
其中,在 post 中使用上图,将呈现为:
<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'/>
感谢 for pointing to a that answered this one. Using the resizeImage
operator,我在我的模板中实现了以下代码:
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "40:21")' name='twitter:image'/>
</b:if>
其中,在 post 的源代码中,呈现为:
<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 验证器。问题已解决。
Blogger 有一些用于获取 post 图片的布局数据标签,例如 data:blog.postImageUrl
(获取 post 中第一张图片的 URL)和 data:blog.postImageThumbnailUrl
(生成 post 中第一张图片的 70×70 像素缩略图,在 Facebook/Twitter/etc 上分享时太小无法使用)。
但是,在发布 post 时,Blogger 会自动使用您 post 中的第一张图片,使用经过特殊调整的 and/or 生成自己的 og:image
元标记图像的裁剪版本。重要的是,此生成的图像将忽略您可能通过修改其 URL 中的 s1600
对 post 图像所做的任何自定义调整大小或裁剪(explained here), returning a large-size image that’s perfect for sharing on social media sites. (It even crops the image down to a 1.91:1 ratio, as recommended in Facebook’s “Best Practices”。)
举个例子:
原图URL(尺寸: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
卡片元标签的图像 URL,如下所示:
<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
) 获取图像 URL 使用自定义大小值 w180
,返回一张只有 180 像素宽的图像——就像在 Twitter 上分享一样无用(生成的 Twitter Card 使用空白占位符图像)。
我现在所做的是完全删除 twitter:image
标签,这会强制 Twitter 使用 og:image
标签,以便 link 共享有效。但是,如果可能的话,我更愿意使用带有正确图像数据标签的 twitter:image
标签。
所以这是我的问题:有谁知道数据标签是什么,如果存在的话,可以获取[=]的大裁剪w1200-h630-p-k-no-nu
版本65=] Blogger 为每个 post 生成的图像?像这样:
<meta expr:content='data.{ETC}' name='twitter:image'/>
其中,在 post 中使用上图,将呈现为:
<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'/>
感谢 resizeImage
operator,我在我的模板中实现了以下代码:
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "40:21")' name='twitter:image'/>
</b:if>
其中,在 post 的源代码中,呈现为:
<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 验证器。问题已解决。