search

themefisher / airspace-hugo

Airspace Hugo theme for multipurpose use, like Portfolio, Blog, Business.
https://gethugothemes.com/products/airspace/?utm_source=airspace_github&utm_medium=referral&utm_campaign=github_theme_about
MIT License
354 stars 509 forks source link

Improve Open Graph / Twitter Card image tags #135

Closed salim-b closed 3 years ago

salim-b commented 3 years ago

Since we use Hugo's internal Open Graph and Twitter Card templates, we should stick to the images key (array) in front matter instead of the image key (atomic). I've changed all relevant pieces to accomplish that.

Now the individual blog posts as well as the project pages have their own open graph / twitter card image metadata tag generated as one would expect (before it was always the site logo). The site logo is still used as a global fallback (configured in config.toml via params.images) when a page has no dedicated images key set.

somratpro commented 3 years ago

Hello @salim-b

Thanks for your contribution. When you call images on the front-matter, it needs an array to put the data, and forestry makes a gallery for additional images on the front-matter. but we can only show one image in our theme layout. so it's not user-friendly anymore. user will get confused. so we need to customize/override the Hugo internal OG template. we can't use images on the front matter.

salim-b commented 3 years ago

Ok... I don't use Forestry, so I didn't notice how this change affects that. As you can see from the code, it always uses the first image defined in images as banner image. Additional images will only be used to create further og:image meta tags (see Hugo's internal template code for details).

I've now updated the Forestry templates and added a hint (description) for users which says that only the first image of front matter's images field is actually visible. Is this fine?

somratpro commented 3 years ago

Hello @salim-b

I just want to know if they could do it with images, then why we can't do it with image? can't we override their code? let me know

somratpro commented 3 years ago

Hey, I made an update, check it out.

salim-b commented 3 years ago

I just want to know if they could do it with images, then why we can't do it with image?

Of course they could also do it with image but they decided to use images since an array allows both to set one as well as multiple images. It's a matter of standardization in the end. And I think it makes sense to accept upstream decisions as much as possible instead of fighting them :)

can't we override their code? let me know

We could, sure. For example you could simply modify Hugo's internal template to your desires and then ship it with this theme. But I think it's not worth the hassle. Seems far more convenient to just stick to imagesIMHO. That way we will automatically benefit from improvements made to Hugo's internal Open Graph and Twitter Card templates.

Hey, I made an update, check it out.

Well, you forgot to also add the twitter:card tag which controls what type of thumbnail Twitter (and others) generate.

somratpro commented 3 years ago

you forgot to also add the twitter:card tag which controls what type of thumbnail Twitter (and others) generate.

If you want, you can add this and make a PR.

somratpro commented 3 years ago

Hello @salim-b

Do you want to create a PR of missing twitter:card tag? otherwise, I need to add this. let me know, thank you

salim-b commented 3 years ago

Do you want to create a PR of missing twitter:card tag?

@somratpro See https://github.com/themefisher/airspace-hugo/pull/144, I've written a solution that has more functionality than Hugo's internal Twitter Card partial. 😇