Dynamic OpenGraph/Twitter card images
Larke12 opened this issue · comments
As an extension of a previous issue I was curious if dynamic image sharing could be implemented. Default to the album photo (as it already does), but if you are viewing a photo in the overlay have the OG/Twitter card display the clicked image instead. Example URL being:
https://kc0bfv.github.io/autophugo/cats/#afacb21102930330bdae685961ac0de1
Wherein instead of the album artwork and description, it'd display the linked image and image description. This way you can share a link to the image and see a preview of the image and information it's directly linked to for better context.
It's a great idea. However, as Twitter, for example, pulls the URL content to determine what the image should be, it gets our statically compile webpage for the entire album. It would be a big change, and I don't think it'd work well, to have a separate page per image - and that's how you'd have to do it to have Twitter pull from our static website and get a different OG/Twitter card image suggestion.
Most of what's happening to make the image pop up is in JS, in part because this is a static site, not dynamic. That URL as an example - the part before the # tells the server what static file to retrieve. The server ignores the # and beyond. Then the browser loads the webpage and uses JS to interpret the hash portion. It sees that there's an image ID, so it transitions to lightbox mode and shows the image. We could take that opportunity to modify the meta tags programmatically too. They'd look right in the browser there... Those tags as they are in the browser don't get handed over to Twitter though... Twitter loads the website for the URL you gave it, then Twitter does not execute JS, so it just gets the static image in there.
I don't think there's a good way to get there from here.