Currently link previews render with the photostructure logo as thumbnail:
(example screenshot from Signal app)
I would wish for the preview to render with a thumbnail image of the asset I’m linking to.
Suggested solution is to add an Open Graph image tag.
Tested with 2023.9.0-prealpha.17.
Welcome to PhotoStructure, @pac! Thanks for the suggestion.
I just verified, and OpenGraph requires the metadata to be in the <HEAD>. The current Asset view is rendered by Vue in a different part of the DOM after a call to an AJAX endpoint–so the og:* HEAD metadata has to be server-side rendered. I was thinking it would need to be cleared on navigation, but I guess the browser doesn’t care, so I’ll just leave those attributes be.
I’ve added a new openGraphWidth setting which allows you to specify roughly how large the thumbnail referenced will be. The default is 800px.
Note that base URL will be based on the requested URL. If this isn’t reliable, we’ll need to add a base URL setting override (or reuse the cspDirective setting).
This will be in the next v2023.10.0-alpha build.
Wow, that’s a fast turn-around. I’ll sure be upgrading once it comes out!
With regards to image width; I see that the library contains 4 size in both original and square format. You could even put all those in an array. I’d think the client will choose the appropriate size then? Not sure though, so maybe this is the safer approach.
I poked at the code a bit more and added an available-widths chunk, so we don’t need the new setting anymore–PhotoStructure will throw every preview it’s got (and even the actual original image, if it’s renderable to the browser), into the OG headers:
<meta property="og:image" content="http://localhost:1787/img/66/fit/160" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="160" />
<meta property="og:image" content="http://localhost:1787/img/66/fit/320" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="320" />
<meta property="og:image" content="http://localhost:1787/img/66/fit/640" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="640" />
<meta property="og:image" content="http://localhost:1787/img/66/actual" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1600" />
or for a video:
<meta property="og:video" content="http://localhost:1787/video/260" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="320" />
<meta property="og:image" content="http://localhost:1787/img/260/fit/160" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="160" />
<meta property="og:image" content="http://localhost:1787/img/260/fit/320" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="320" />
I’ve just upgraded to Alpa-1 and tested this, but now there is no thumbnail generated any more (also not the favicon as before).
I have inspected the source and the Open Graph tags are there (with http instead of https). But that doesn’t seem to be the root cause of the thumbnail not generating, because I’ve also tested it directly (without a reverse proxy) and then it also doesn’t generate a preview thumbnail.
I suspect that it’s maybe not working, because my Photostructure is not publicly hosted and only available locally. However that doesn’t make sense, because if the Open Graph tags are not present (e.g. in the grid view), then it does use the fav icon as preview. So that means that it’s able to read the page source and detect the Open Graph tags (and determines not to use the favicon), but then somehow doesn’t know how to deal with the provided image link. I did check that the image link was able to resolved locally.