Hugo: Use page resources for OpenGraph and Twitter Card images

[tashian]

For my site I'm using page resources to transform and display cover images for my stories. It's working super well.

But the internal OpenGraph and Twitter Card templates use the "images" param:

https://github.com/gohugoio/hugo/blob/488631fe0abc3667355345c7eb98ba7a2204deb5/tpl/tplimpl/template_embedded.go#L194

Page resources seem like the ideal way to do OpenGraph and Twitter meta tags, too. Does it make sense to migrate the internal templates?

For now I have created my own partials. The image tag looks like this:

{{ with (.Resources.ByType "image").Match "cover" }}{{ range first 6 . }}
  <meta property="og:image" content="{{ .RelPermalink | absURL }}" />
{{ end }}{{ end }}

This depends on me having a "cover" resource, but a more generic version of this would just choose the first image resource on the page.

I think the only challenge here is making the change in a non-breaking way.

[MichaelHierweck]

Would this be fixed by #5157?

[max-arnold]

I believe that right now (Hugo 0.48) Twitter card template already does what you want, and indeed #5157 will bring the same behavior to the OpenGraph template. The lookup order is:

1. Explicit images param in a frontmatter
2. Page bundle images which match *cover* or *thumbnail*
3. Global Site.Params.images

[spech66]

Seems like the Schema template is missing this too.

[max-arnold]

@spech66 I'll try to submit a PR with something similar for schema.html in a few days.

[max-arnold]

@spech66 Done!

[TomPichaud]

Could you also update the OpenGraph template please ?

It would be nice to get some kind of cohesion between these 3 templates.

[max-arnold]

@TomPichaud I did exactly that! The #5378 will bring this behavior to OpenGraph template, and #5415 to Schema.

Hopefully, someone from maintainers will merge these PRs.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

[MichaelHierweck]

Please get this PR merged. (I really don't understand why this bug/PR is still open.)

[robshep]

Please merge this. I've locally patched for now.

For me it's not convenience, but to workaround a bug.

A) absURL from images doesn't work on page-bundled images.

images:
  - 1.jpg

_yields: (a 404 URL)_

<meta property="og:image" content="http://localhost:1313/1.jpg" />

B) .Permalink from resources does work on page-bundled images

resources:
  - src: 1.jpg
    name: 'featured image'
    title: 'A Really great image'

_yields (from my patch version; same with current twitter_card, a proper URL):_

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

[hacdias]

This would be really nice to have,

/cc @bep

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

[max-arnold]

bump

[meredrica]

Opengraph / Twittercard and Schema still don't generate the propper url when an image is used in a page bundle.

[max-arnold]

@meredrica Could you provide an example of how you use this feature?

Here is how I tested it: https://github.com/gohugoio/hugo/pull/5157#issuecomment-419701217
And here is an example page bundle: https://github.com/max-arnold/testblog/tree/master/content/articles/post1

[aormsby]

I've been running some tests on these since I wasn't getting the correct results (which turned out to be my fault), and it really seems to me that everything is working as intended at the moment according to that https://github.com/gohugoio/hugo/pull/5157#issuecomment-419701217.

@meredrica Here were my mistakes just in case you've done the same thing.

1. I had a cover.jpg in a page bundle, but it was inside a subfolder, so the path was something like mypost/img/cover.jpg. This doesn't work because this code
   https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html#L8
   only gets resources from the folder where index.md is. (At least, it did that for me. I'm unclear on if this is what is intended.) So I had to move my image out of the subfolder for the cards templates to automatically find it.
2. I tried to use a relative URL in the images=[] front matter of my post, but it only accepts absolute URLS.

Perhaps either of my mistakes will help you out.

@max-arnold I actually find it rather frustrating that we can only use absolute URLs for the images array in post front matter. I'd really love to be able to use relative URLs as well since page bundles inherently encourage their use. What would it take to add that functionality? I saw someone on the forum had what looked like a decent suggestion for supporting it here.

[max-arnold]

I didn't change this behavior in my PRs, and I only brought the existing logic from the TwitterCard template to OpenGraph & Schema templates, so they behave in the same way.

The resulting links should be absolute - I've seen requests from broken bots that can't deal with relative links. Also this https://stackoverflow.com/a/9858694/65523

I'm not sure about the nested resource subfolders, but I believe that the ability to specify relative links in the front matter (and converting them to absolute ones) is useful, because it allows moving page bundles to a different folder without any modifications.

@kaushalmodi Is the approach you described still the best one? I'd be happy to add something linke this to OG/Twitter/Schema templates, but I hope that a more elegant approach does exist.

[kaushalmodi]

Is the approach you described still the best one?

Hello, it's been few years since when I suggested that approach! So now I cannot say if that's still the best way.

But it certainly still works because I am using that for my site.

[aormsby]

The resulting links should be absolute

Agreed! I was just thinking about relative link options on the front matter creation side. 🙂

I would also counter myself and say that it may not be absolutely necessary to support relative link input in my subfolder case since the quick fix was just to move all of my cover.jpg files into the root of the page bundle where they would be automatically discovered during a build and then used as thumbnail sources. It was a very minor change in my page bundle organization.

However, for the general case of moving page bundles around, relative links would probably help a lot.

@max-arnold I may have a suggestion. I like how @kaushalmodi's / option in images is driven by user input, so it's a clear decision to switch from absolute to relative paths, but perhaps that small detail could be easily missed and cause confusion if users are unaware of its use. To make that more clear, I might suggest throwing in a new variable like relimages or something similar in order to decide on using absolute versus relative paths. Then the various card templates could easily be updated to check for relative URLs and build out the absolute paths using the data if the imagesvariable isn't present.

I'm unsure if this is what you mean by "a more elegant approach", though, since adding variables is not necessarily a good plan. It also seems a little redundant. Just brainstorming over here.

[meredrica]

Not being able to use relative image paths in the front matter is a real pain.
It breaks scaffolding if you have a default image in your archetype - I have that, I publish a comic and need to replace the image, obviously.