In v2 Blogger templates, data:post.featuredImage
is related to the Popular Posts widget, we can use the pre-existing code -
<b:with value='data:post.featuredImage.isResizable?resizeImage(data:post.featuredImage, 72, "1:1"):data:post.thumbnail' var='image'>
and modify the width & ratio parameters present in the resizeImage
operator to meet our requirements
<b:with value='data:post.featuredImage.isResizable?resizeImage(data:post.featuredImage, 280, "280:152"):data:post.thumbnail' var='image'>
In v3 Blogger templates, using resizeImage
operator directly would be able to accomplish the goal
<img expr:src='resizeImage(data:post.featuredImage, 280,"280:152")'/>
Normally the data:post.featuredImage
data tag is used in the widgets is present within the snippetedPostThumbnail
b:includable tag (There are multiple instances of this). Editing that in the specific widget (like Featured Post widget, Blog posts widget, etc) would affect all images in that particular widget. Replacing the highlighted b:with
section in the definition of snippetedPostThumbnail
b:includable tag with the previous image tag utilizing the resizeImage
operator would have the desired effects
<b:includable id='snippetedPostThumbnail'><div class='snippet-thumbnail'><b:with value='data:post.featuredImage.isYoutube ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 945, "945:600") : ""' var='highRes'><b:include data='{image: data:post.featuredImage, imageSizes: [256, 512, 945, 1684], imageRatio: "945:600", sourceSizes: "(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)", enhancedSourceset: data:highRes}' name='responsiveImage'/></b:with></div></b:includable>