Spectrum: Dynamically create meta images for threads
Imgix has a neat text API that lets one generate an image from some text. We should use this and set the twitter:image meta tag on thread views to an image of the thread title + maybe the number of messages in the thread.
For example, click this link: http://assets.imgix.net/~text?txt=Test&txtclr=4B5E75
mxstbr
All 13 comments
I'd like to work on this @mxstbr
Where should I start looking?
alejandronanez
on 11 Apr 2018
Awesome! In src/views/thread/index.js you'll see a <Head> component being rendered.
That image prop needs to be updated to some dynamically generated imgix link, which would ideally show:
- The Spectrum logo
- The community and channel name the thread was posted in
- The thread title
- The thread author
- Optionally: how many responses the thread has, if there are any
For example, here is what dev.to's automatically generated images look like:
This is a quick and very dumb mockup of what ours should kinda look like with lots of information missing:
@uberbryn can probably give you an actual mockup later, this should be enough to get you started though!
Note: I don't know whether you can tackle this without access to our imgix account, if not let me know!
mxstbr
on 12 Apr 2018
That seems like an awesome starting point! We'll definitely want to trim at a certain # of chars and figure out how things like break-word should work :)
brianlovin
on 12 Apr 2018
Yeah for sure, there's a looot of edge cases to be handled there but it could really help our click-through rate from Twitter
mxstbr
on 12 Apr 2018
Wow thanks a lot!
I’ll hit you up if I need something else :)
alejandronanez
on 12 Apr 2018
I'll add mockups for this to my to-do list for next week.
superbryntendo
on 12 Apr 2018
Hey all!
In spectrum/src/views/thread/index.js around line 360 we have this conditional:
if (thread.watercooler)
return (....)
I don't see any watercooler type of thread in the default Spectrum community so I decided to create my own community to start playing with everything I need. What is happening is that I can't create a watercooler type of thread 😱
What am I missing here?
Thanks a lot!
alejandronanez
on 17 Apr 2018
Watercooler threads are currently an alpha experiment, you can see one in e.g. the React community: https://spectrum.chat/react
I wouldn't worry about those now, let's get those done later?
mxstbr
on 17 Apr 2018
Oh yeah! I thought this ticket was related only to Watercooler type of posts, sorry my bad.
I’ll keep working on this then :)
Thanks!
alejandronanez
on 17 Apr 2018
Guys, where (in imgix) can I find an image like this one but without the text that's inside the red box.
From what I've read in the imgix docs I think it's not possible to add multiple texts to an image (one in the center, one in the right bottom, etc...).
That said, I think generating an image with the thread title is totally doable, but I'm not sure about generating an image with the thread title + author + # of responses in different spots (hopefully this makes sense)
alejandronanez
on 17 Apr 2018
Imgix only let's you add one text box to the image?! That'd suck! /cc @copyconstruct
mxstbr
on 17 Apr 2018
I guess let's start with only the title for now, and iterate when we figure out how to add multiple texts to images 🤷♂️
mxstbr
on 17 Apr 2018
Sounds good to me @mxstbr, thanks!
alejandronanez
on 17 Apr 2018
Related issues
brianlovin
·
5Comments
zefexdeveloper
·
5Comments
carloslfu
·
3Comments
atlx
·
5Comments
brianlovin
·
6Comments
Most helpful comment
Yeah for sure, there's a looot of edge cases to be handled there but it could really help our click-through rate from Twitter