Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customize the preview image for guides #1723

Open
gastaldi opened this issue Jun 12, 2023 · 5 comments · May be fixed by #1725
Open

Customize the preview image for guides #1723

gastaldi opened this issue Jun 12, 2023 · 5 comments · May be fixed by #1725

Comments

@gastaldi
Copy link
Collaborator

When pasting a guide URL in any social media (including chat apps, like Telegram), the preview image displayed is a static image (eg. https://quarkus.io/guides/rest-client-reactive):

It would be nice if the guide title were printed in that preview image (it could be generated during the build) so we could customize it in the <meta property="og:image" content="https://quarkus.io/assets/images/quarkus_card.png"> entry on each guide page

@gastaldi
Copy link
Collaborator Author

@insectengine can I have a PNG or SVG without the Supersonic Subatomic Java heading? Also what is the font used?

@insectengine
Copy link
Collaborator

The fonts for Quarkus is "Open Sans".

https://fonts.google.com/specimen/Open+Sans

@insectengine
Copy link
Collaborator

@gastaldi - Check your gchat.

@gastaldi gastaldi transferred this issue from quarkusio/quarkusio.github.io Jun 12, 2023
@quarkus-bot
Copy link

quarkus-bot bot commented Jun 12, 2023

/cc @MichalMaler (documentation), @ebullient (documentation), @hmanwani-rh (documentation), @inoxx03 (documentation), @michelle-purcell (documentation), @sheilamjones (documentation), @sunayna15 (documentation)

@gastaldi
Copy link
Collaborator Author

Based on https://www.digitalocean.com/community/tutorials/how-to-process-images-in-node-js-with-sharp#step-7-adding-text-on-an-image, I created a small NodeJS application that creates these images given a text: https://github.com/gastaldi/social-image-text/blob/main/addTextOnImage.js

Here is an example of a generated image:

quarkus-output

@gastaldi gastaldi transferred this issue from quarkusio/quarkus Jun 14, 2023
gastaldi added a commit that referenced this issue Jun 14, 2023
gastaldi added a commit that referenced this issue Jun 14, 2023
@gastaldi gastaldi linked a pull request Jun 14, 2023 that will close this issue
gastaldi added a commit that referenced this issue Jun 14, 2023
gastaldi added a commit to gastaldi/quarkusio.github.io that referenced this issue Jun 14, 2023
gastaldi added a commit to gastaldi/quarkusio.github.io that referenced this issue Jun 14, 2023
gastaldi added a commit to gastaldi/quarkusio.github.io that referenced this issue Jun 14, 2023
gastaldi added a commit to gastaldi/quarkusio.github.io that referenced this issue Jun 14, 2023
gastaldi added a commit that referenced this issue Jun 15, 2023
gastaldi added a commit that referenced this issue Jun 23, 2023
gastaldi added a commit that referenced this issue Oct 10, 2023
gastaldi added a commit that referenced this issue Oct 31, 2023
gastaldi added a commit that referenced this issue Nov 1, 2023
gastaldi added a commit that referenced this issue Nov 1, 2023
- Fixes #1723

Allow skipping social image generation

Also generate social image for blog posts
gastaldi added a commit that referenced this issue Feb 2, 2024
- Fixes #1723

Allow skipping social image generation

Also generate social image for blog posts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants