The current versions of both the Twitter Cards and the Open Graph plugins just put all the images it finds as an image for the Twitter Card. As a result, Twitter highlights the last one. Seems that the reasonable decision would be to take the first one instead and only use it for the tag.
Facebook handles this case well by itself and chooses the first image all the time.
Read here for more about how this works:
Note:
If
imagesaren’t specified in the page front-matter, then hugo searches for image page resources withfeature,cover, orthumbnailin their name
I’d also note that the Twitter card plugin seems unnecessary to me? I’ve never looked at it, but I just use the built in {{ template "_internal/twitter_cards.html" . }} and {{ template "_internal/opengraph.html" . }} templates from Hugo.
I didn’t know about those internal templates. Maybe the Twitter cards plug-in should be updated to just use that?
@manton I think I had to adjust the Twitter Card template on my own Hugo blog for some reason, but the community seems to think they’re good. But by default, it relies on the image used in the front matter, if I remember correctly.
I’m 95% sure that Manton includes images in the front matter, though I’m not sure if in the same/correct format behind the scenes.
tbh, given that they’re internal and this is about meta data in general, I sort of feel like including these in the baseof.html/head.html template for all official Micro.blog themes is probably the way to go. I view it similarly to supporting microformats or semantic HTML-- just good web practice to include metadata like that.
Still weird that Twitter takes the last highlighted image, while Facebook handles the same array in Open Graph much better.
Probably need to make a custom version of this plugin to only use the first image for the Twitter Card somehow.