OGP images

[madrilene]

Automatically create OGP images for the different content types.

• [x] For articles, use the hero image specified in the front-matter if available, use a default background otherwise use dedicated square image, based on the hero image set in the front matter. No fallback set, breaks if no image for OG image creation is set.
• [ ] For presentations, use the first page of the presentation use dedicated square image (TBD how to reference it)
• [ ] For videos, use the placeholder image use dedicated square image (TBD how to reference it)
• [ ] Fallback for rest of website

All but fallback: pulling in title and lede (truncated). Color coded, and with a dedicated square photo.

[tobie]

Can we estimate the time this takes?

[madrilene]

Depends on the complexity of the design. I'd do that first in Figma so we can agree on a version for each content type. For the design I calculate an hour. The basic functionality is already there (for articles), I'd have to adjust the current template and add more for other content types.

[tobie]

Do we agree that it makes design sense to include the specific visuals (e.g. hero image, placeholder, etc.) in those?

[madrilene]

Yes! I already created a first basic version to get an idea. This just takes in the content type color scheme, title and date. Could be an MVP version for now, and enhance later.

[tobie]

I had seen this. My question was wrt including a dedicated image if present (e.g. hero image, video placeholder, etc.)

[madrilene]

I really like the title to be visible on those images. So I'd go for a version where the featured image / fallback is visible in a section, like I did for DX:

[tobie]

Yup. That totally works for me.

[madrilene]

We have to decide on a design to be implemented: https://www.figma.com/design/CIXElK1qmSorPlNk0UPRWr/Unlock-Open-Style-Guide?node-id=456-225&t=6aPddQSJ1E5lQBAf-0

[madrilene]

I start implementing these versions. Any preference for the read more button?

[tobie]

First one differentiates it more from the video and slides

[madrilene]

Chosen items

Articles

Presentations

Videos

TBD

[madrilene]

Automatically create OGP images for the different content types.

• [x] For articles, use the hero image specified in the front-matter if available, use a default background otherwise.
• [ ] For presentations, use the first page of the presentation
• [ ] For videos, use the placeholder image
• [ ] Fallback for rest of website

pulling in title, date or a custom string. Color coded, and with a custom SVG/Photo where available, else a coherent fallback.

We might have to rephrase this, now that we want to have a clean square image for videos and presentations as well. I can start with the presentations OGP image, but we should decide first where to store the (square) image that is being used.

Also, article OGP images don't fallback, but require a dedicated image.

As for the universal fallback, I made two very simple variations. Let me know if we implement one of them first, or if I should go over it again.

[tobie]

I'm not sure I understand what the question is.

[madrilene]

I mean: we have to rephrase the requirements, if you are okay with it.

• [...] use a default background otherwise: we have no fallback image / default for articles, because every article should always have its image assigned.
• For presentations, use the first page of the presentation: The idea is to use a clean image, not the first image (which contains text and is not square)
• For videos, use the placeholder image: same - we need clean, square images here

Then I also shared two simple fallback images for all other contents, and wanted to know if that works for you, or you want me to iterate on that and come up with another idea.

[tobie]

Can you translate what you're saying into concrete requirements here?

I thought we had agreed on: we need a empty square picture for everything.

Let's discuss the fallback case separately. As it's a little more complicated than this imho.

[madrilene]

Exactly! :) Sorry if I'm not making myself clear. I just want to adjust the written requirements, so I can tick them off correctly. Using "first page of the presentation" or "placeholder image" is not correct anymore.

And then we need a new issue where we can plan out how to structure the speaking post types and its respective images.

As for the fallback, I'm thinking in MVP terms, and of course we can create custom OGP images for everything, but I consider this something that can be added at any point. Having a first fallback image for all contents without dedicated OGP image gives us the freedom to publish this sooner. Having a simple design, I can implement it very fast. I think it's important to have this site online as soon as possible, and then continue to improve.

[tobie]

Ok. That makes sense. Feel free to edit and close.

[madrilene]

Universal fallback PR: https://github.com/unlockopen/www.unlockopen.com-v4/pull/39

[madrilene]

OG images for presentations and videos currently blocked by making decisions here: https://github.com/unlockopen/www.unlockopen.com-v4/issues/10