kc0bfv / autophugo

AutoPhugo [ˌɔtoʊˈfjuːgəʊ] is a gallery/photoblog theme for Hugo that's a little more automatic than Phugo.
Other
97 stars 56 forks source link

Add album thumb to social media preview #26

Closed githubmonkey closed 2 years ago

githubmonkey commented 2 years ago

When sending a link via social media the preview contains the album title but not the thumb.

Screenshot 2021-09-06 at 21 18 01

I believe, this is because you are using two internal templates which seem to look for a front matter variable called images (takes a list.) However, you have named the variable albumthumb, taking a single value, so the og and twitter templates don't find the info.

# from layouts/partials/head.html:
{{- template "_internal/opengraph.html" . }}
{{- template "_internal/twitter_cards.html" . }}

I see two possible solutions:

  1. Add an images field to the front matter. It will dublicate the information already specified in albumthumb.
  2. Let the internal templates do what they can and manually add additional fields for og:image and twitter:image to the head section based on the value of albumthumb.

Personally, I am leaning towards the second option but the outcome would be the same.

kc0bfv commented 2 years ago

I like this - I like the pull too. I think there's a third option - add a custom opengraph / twitter_card template. Maybe a fourth - the opengraph template built into hugo should maybe be a little more flexible (maybe not). I'll try to get back to this this weekend. Thanks for the issue & pull!

kc0bfv commented 2 years ago

I wish I had a way to just set the "images" properties that the internal templates look for - I'd need to set them in template code though and I don't think there's a way to do that. Barring that - I have to use scratch values.

Perhaps I should recommend changes to the internal templates such that they also look on .Scratch.Get "images" or something, for the images.

Barring that - I sliced up the internal templates into a partial. The page title and descriptions were calculated differently than the page metadata was - so I modified how that works in the partial. And of course - I took whatever gets calculated as albumthumb and made it the image.

I refactored the albumthumb calculation so the code is only in one place. I had to do some wonky things with Scratch. I learned that I need a Scratch object on the "." context that's going into the partial - because partials don't get the "$" context. So more scratch complexity pops up - I should be grateful for the separation of scope, but I find it just confuses when I switch back and forth between this templating language (thus, all my reminder comments).

I put up a new branch - cur_ver_release - and let it deploy to the demo site. The FB opengraph and Twitter card validators both show things working as expected.

kc0bfv commented 2 years ago

Separately - I made "cur_ver_release" expecting that I'd integrate our non-breaking changes over the next couple weeks there. Changes that are unlikely to mess with things the way people are using this now.

This change is modifying some default behavior from the internal templates - I guess I think it's unlikely that this change is "breaking" though. So I put it on cur_ver_release branch.

I plan to keep it so that I wouldn't feel bad merging cur_ver_release with main at any time. If we slow down, I might do that at some point so the cool stuff gets on main.

For changes that seem "breaking", I'll merge them into "new_ver_release". Then when we get done making these changes I'll make a big note about the changes, or I'll change a bigger version number, or both, and merge the new_ver_release with main then.

kc0bfv commented 2 years ago

On main now.