Better sharable images for speaker pages

[jawache]

Is your feature request related to a problem? Please describe.

When speakers share their pages on social media the image that's shared is very generic, it doesn't give them much to be proud of and is not customized.

If the image that shared was better then I think more speakers would be willing to share and socialize their pages.

For example look at this person sharing their page:

Describe the solution you'd like

Can each speaker page have a customized image for that speaker? Their face, name, link to their speaker profile, languages. Not sure but something that would make them more proud to share their speaker page, make sure their speaker page is kept up to date.

Describe alternatives you've considered

Alternative to a customised image perhaps let's have at least a better image with at least the speaker page url, the current image is very minimal.

Additional context

N/A

[zanete]

We will discuss what's possible in web call on the 11th of January

[zanete]

@osamajandali please describe the solution you have in mind before implementing

[osamajandali]

The best way to make this is to use this package: https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

but we need a place to run the edge function, so what do you think @jawache ?

[jawache]

Thanks @osamajandali. Sounds complex and time consuming, what's your estimate re: time for doing it the code heavy way? ;)

Another more manual solution could be to just use a canva template. @holanita what do yo think? Have Jenya create a Canva template for a social sharing card, when you add a new person, just have a step in the process to create a canva image and check that in also with the markdown file.

[holanita]

@jawache @osamajandali

• the canva part sounds easy. are there any specifics e.g. image dimensions that we should keep in mind?
• how do I add the image to the markdown file?

[osamajandali]

Canva is so much easier solution than implementing this to be auto-generated. Although I can spend some time implementing this script. @holanita, if you and @jawache are happy with the canvas solution, then you will only need to add the image in a folder that I will tell you about with the same file name as the speaker's file name; there is no need to add anything extra to the markdown file. Once we have the images ready, please share them with me, and I'll batch-add them, and afterward, I will tell you that from now on, you need to add the image to this specific folder.

[holanita]

@osamajandali if we implement the Canva solution, will speakers still have the option to simply just use their github profile image? or is it an either / or situation? I'm asking because pulling the images from github made things so easy so far and only a few people said they wanted to use a different image. also, it will be very time consuming to ask 80 people for new images and then processing them. I'd like to avoid that if possible.

[osamajandali]

@holanita I don't know if you fully understand the Canva solution, but the image will be created by Jenya once for each speaker, which means that you're the one who decides which photo should be there. If we want to have it autogenerated, then we need to go with a code solution where the image will be generated according to each speaker's data without any interference from your end.

@jawache, do you think auto-generating the image will be better in this case? Going to Canva and returning to add the image will create bugs and headaches for Anita.

@jawache The code to produce it is relatively easy, and I can do it quickly. My only concern is that I'll need to run a cloud function somewhere to generate those images on the fly. The best option is to go with https://vercel.com/ because they are the creators of the packages, and indeed they will have a more manageable workflow to run the edge function.

[jawache]

I'm a little confused, @holanita if we go the canva way then you can use whatever image you want, it's a manual process.

@osamajandali will just tell you where to put the image to make sure it's shared correctly.

@osamajandali it's a lot of moving pieces that need to be maintained with vercel and edge functions which make me sure we're going to have some caching bugs etc... I'd rather have something simple.

[osamajandali]

@jawache, so let’s proceed with making canvas designs

[holanita]

Hey @jawache @osamajandali – sorry to be a pain, I'm just conscious that manual work will be too much. Can someone help me do this? 80 speakers are a lot to handle. And I'm not too sure indeed what the exact canva workflow would look like technically. Also, keep in mind that we don't have any images yet. So unless we can simply grab the images from the github profiles of speakers (not sure?), we have to wait until they all send their images.

[jawache]

Of course @holanita. We are just talking here about the best way to solve this problem. We're not saying you will do it and we're also not saying it needs to be done now.

[zanete]

@jawache and @holanita:

This is what I understand needs to happen and in this order (As discussed with @osamajandali 18th of Jan web weekly call):

• @Jenya-design - to create a Canva template that would produce a speaker-specific share card ( should include Speakers avatar, name and languages - @jawache any more things?
• @osamajandali - programmatically collect all avatars from existing speaker Github profiles
• TBC who - create share cards using the Canva template, download and store in some location to be passed on to @osamajandali
• @osamajandali - create a way to store speaker-specific share cards
• @osamajandali - upload the final share cards to the new storage for current set of speakers
• @osamajandali - update documentation for how to add/edit speakers to include the process for creating a share card

If you are in agreement, then @osamajandali can start working as soon as ALL the speaker cards are prepared

• as most of the work will be in testing all images
• and it's only testable on live, so it wouldn't be considered consistent behaviour if some speakers could share their profile nicely and some couldn't.

It is not urgent, I understand, so we can park this for now until we have a resource to do the TBC bits, correct @jawache ?

[jawache]

Sounds good. In the meantime can we just have something a bit nicer in general for the share image?

[osamajandali]

@jawache What's your suggestion for it?

[osamajandali]

Here are the avatars for the current speakers avatars.zip

[Jenya-design]

@zanete @holanita It looks like I can proceed with Canva template for this issue right after AR materials In case I have the text for all speakers collected in one doc + links to their photos, I can make 80 speaker specific options based on one template relatively fast Please add the issue to graphic design project when you have time Thank you

[holanita]

Hi all, thanks @Jenya-design it will take some time to collate all the new images. Asim mentioned this is not urgent, but it would be good to fix the shareable images asap at least. Unsure if you need to tweak those images yourself or Osama can proceed with what he has. So @osamajandali is the ball on your court now re: shareable images?

[jawache]

Hia, so looks like @osamajandali had collected all the avatar images and @Jenya-design says she can make the Canva template and batch create all of the images for each avatar right?

Is my understanding correct?

If so I'd say go ahead, @osamajandali do you think you can handle updating all the speaker markdowns yourself.

If @osamajandali and @Jenya-design can cover this between you not requiring much of @holanita time then I'm happy to go ahead. Anita and I are focused on process improvement/hiring next few weeks, so we'll be busy in other areas 😊

[osamajandali]

@jawache I can take care of it yes after @Jenya-design make the canva design

[zanete]

We have discussed this with @osamajandali and now believe this is the fastest way to move forward:

• @Jenya-design to make one Canva template with placeholder text for one speaker (which means we don't need a doc with info on all speakers)
• @osamajandali will make the individual speaker-specific share-cards based on the Canva template and using the Speaker informations already in markdown
• @osamajandali - create a way to store speaker-specific share cards
• @osamajandali - upload the final share cards to the new storage for current set of speakers
• @osamajandali - update documentation for how to add/edit speakers to include the process for creating a share card

This shuold be fairly quick for @osamajandali to do as soon as the Canva template is done, so there is no need to spend time thinking about a general shareable image. Agreed @Jenya-design @jawache @holanita ? (assuming Yes, so reassigning this to @Jenya-design and adding to Graphic Design board)

[Jenya-design]

Hello @osamajandali @zanete Please check Canva templates for speakers and let me know what you think

There are two design options - with and without text block Each option goes in two sizes: 1200x1200 - LI or Twitter post 1200x627 - LI post (shared image in the task description has the same rato, I can adjust for 1920x1080 if necessary) Thank you

[osamajandali]

Now each speaker page has details from it. you can check it out by putting any speaker link in here https://metatags.io/

@Jenya-design I have tweaked the design a bit where the company is smaller than the name, just to give some space to the name to be more visible.

@holanita, all you will do in the future is export the canva file as a png image and put it in "/public/social/speakers" folder with the same file name as the markdown file. Let me know if you want any further help in doing that in the future.

[holanita]

Awesome thanks @osamajandali & @Jenya-design. @jawache feel free to close this if you are also happy with the end result.

[Jenya-design]

Thank you @osamajandali I'm not sure how to access speaker link to check the final view, but I trust your judgment here

[osamajandali]

@Jenya-design here is Asim's one

[Jenya-design]

Thank you @osama You're right, accent on the name looks better this way

[zanete]

on @jawache behalf, change the url to be https://speakers.greensoftware.org/

[osamajandali]

@zanete, I think we agreed to keep it greensoftware.org and not the full URL, or I misunderstood? Here is the updated version

[zanete]

@osamajandali yes, I feel that's more appropriate for the purpose (shorter is easier to remember and it's not where clicking on the image would take anyways).

[zanete]

It's looking great https://www.opengraph.xyz/url/https%3A%2F%2Fspeakers.greensoftware.foundation%2Fspeakers%2Fannie-freeman%2F