Use "images" as per twitter card

robshep commented 5 years ago

The Hugo implementation of TwitterCards selects an image from the images list (by matching "featured" in the name.)

I have a patch in my fork of this lovely theme which copies the above behaviour into both the main article and the list-view postbox partials. With a file such as featured_sunset.jpg and some page config (e.g. my json example) this works well.

{
  ...
  "images": ["featured_sunset.jpg", "other_image.png"]
}

You can use page-relative bundle images FTW
I've added another condition into the article to suppress the featured image from the article if the page param "noFeaturedImage": true is in the front matter.

You are welcome to the patch if you want it.

https://github.com/robshep/mediumish-gohugo-theme/commit/4a116250fcfae63166136e3b8461f1be9c76ad45

Rob

lgaida commented 5 years ago

Sounds great! Can you give me a few more details on how to use this? I've copied your changes but the images don't show up, no matter where i place them or how i configure the .json/.yml/.toml of the post or page.

robshep commented 5 years ago

Well, sorry - it may need a little work to make this approach more obvious to users. Since posting I have found the best approach for me is to use the page resources frontmatter.

I agree that's it's probably not the best way to get stuff to "just work" when a single image is wanted and most people are happy dumping images in /static/images/...

But, I worked on this because of the requirements, and you may well decide that it's not the best fit for you or the users of your fine template.

For me:

I want to bundle images relative to pages.
I want to use twitter_card meta data (and hopefully opengraph og:image https://github.com/gohugoio/hugo/issues/5078#issuecomment-482953776 )

resources:
  - src: featured.jpg
  - src: 2.jpg
  - src: 3.jpg

i've missed out name and title for brevity, but they default to src

This would work if you don't want to change image file names

resources:
  - src: 1.jpg
    name: featured
    title: my great image    
  - src: 2.jpg
  - src: 3.jpg

And this approach works great for me:

list postbox thumbnail picks up "featured" just like twitter_card
page banner image picks up "featured" but I can disable it with "noFeaturedImage": true
twitter_card shortcode picks up "featured"
I can bundle everything next to the page .md and the .Permalink takes care of writing full urls to images.
I don't have to duplicate or shuffle around image: ...: images: [...] or resources: [...] to get it all to work.

Notes: If using relatively placed images E.g. /content/blog/my-great-post/my-image.jpg then the twitter_card doesn't write full relative URLS if images are listed as the page "image" or in "images"

<meta name="twitter:image" content="http://localhost:1313/featured.jpg"/>

(I think AbsURL doesn't work for relative page bundled images)

If we list images in resources, them Permalink on the image resource works as we need it to:

<meta name="twitter:image" content="http://localhost:1313/blog/2019/04/week-notes-2019-14/featured.jpg"/>

lgaida commented 5 years ago

Reminder for myself: Internal hugo templates for twitter and opengraph were added in commit 257cafa7fc5286c6a0cf6352120197c46269a8f2

lgaida / mediumish-gohugo-theme

Use "images" as per twitter card #13