Custom OG/Twitter Metadata Image per Category

pr-welcome
starter-task

(Pat David) #1

Howdy!

I run an instance that caters to various Free Software photography projects. I’ve created specific categories for each project to use as their own.

I am thinking it might be nice, from a social outreach perspective, to allow them to specify metadata images for each individual category.

For instance, the RawTherapee project has a category here: RawTherapee - discuss.pixls.us

I occasionally post to twitter/facebook/google+ about posts from that category. Right now, the social platform picks up the default opengraph image url and twitter summary large image url values and shows the images correctly. But they’re site-wide.

I know that the projects would love to be able to control this branding themselves possibly. Perhaps as another image option on the category settings? Maybe as a “Category Metadata Image”?


(Pat David) #2

Please note, I’m happy to try hacking this together if someone wanted to point me to the roughly relevant areas?


(Jeff Atwood) #3

I believe someone named @erlend_sh was looking for “starter issues” :wink:

Since this is metadata based it is a bit easier than most.


(Pat David) #4

Wondering if there was anyone hacking at this or if so, any progress? :smiley:


(stefan) #5

Hello, I got invited to this topic.

Seem interesting and would be nice to take a stab at this but I already got a few on my plate and I’ve been kinda busy lately.

If this is needed urgently then someone else can take it over :smile: otherwise I can take a look once I start progressing on my backlog :sweat_smile:

Regards


(Ronaq) #6

Hello everyone,

I would like to take this. As I am a new to discourse so I will be needing help in understanding the project and hacking on this.

Thanks. :slight_smile:


(Charles Walter) #7

Wanted to lift up this topic. Often the image for the category is a specific size that suits the top of the category. However, I’d like to propose that the category og:image could take the og:image associated with the About the category topic.


(Saurabh Patel) #8

Hi,
Can someone correct me if i m missing anything that needs to be done for this task.

From what I can gather

  1. Add a new category similar to logo and background image for meta.
  2. Store image for this new category.

What else needs to be done with that image after it is uploaded and saved for this task? Does it need to be shown somewhere and/or add some specific meta data?

Thanks


(Charles Walter) #9

Ensure that the image url gets picked up in the Meta tags in the html header.

<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

More details on Open Graph Markup
https://developers.facebook.com/docs/sharing/webmasters/


(Saurabh Patel) #10

ok noted @charleswalter

One more question - do you want this new category meta image when you share a post or topic? Or if you share category link?

Currently it looks like when you share a topic/post, og:image is given value of topic’s image_url. For example: current topic has following og:image - https://meta-s3-cdn.freetls.fastly.net/optimized/3X/5/0/50ad3a625d196757ed0b50a9100e7adb1ca66255_1_587x500.png

So do you want category image to come instead of this topic image?

I m new to discourse so sorry for having too many questions :sweat_smile:

Thanks


(Charles Walter) #11

For now, was just thinking the category link. That will go far. I don’t think we want to get into impacting behavior on topics from the category, though it’s not a bad idea. Perhaps it could be a checkbox option, and would be used if no other image is available. Certainly for backlog, not for now.

This is how sharing a category currently looks. Would be nice to also be able to overwrite the og:title, so instead of just Thalia for example, it could say something like “What’s the community saying about Thalía?”

These changes could really help us grow our community

For a future request, I’d love to see how admins could specify promotional metadata for a topic that would not be editable by the end user. But I’ll create a separate topic for that once we see the value of this change on the categories :slight_smile:

I love seeing the questions, and the activity around this.


(Pat David) #12

I would agree that this would be nice for the base category link. So in my instance, I’d like to see the custom logo for direct links to a category like this:

I would imagine that if a topic doesn’t have an image in the first post to pickup for linking, then use this as well?

So this topic in that category has an image in the first post, and uses it:

This other topic in the same category doesn’t have an image in the first post, so uses the default site-wide logo (this is the one that should also use the custom logo):


(Charles Walter) #13

I think there’s merit to that, but I imagine it requires much extra work and we should really get out the category link image. And if we are going to allow inheriting the image on the topics, this should probably be a setting at a community level, and perhaps a category level


(Saurabh Patel) #14

Hi,

I have raised PR’s to show category meta image on sharing of category:


Thanks


(Sam Saffron) #15

I feel we rushed this a bit, we accepted PRs now for the data model but the naming is all over the place.

We have:

  • Category Logo Image
  • Category Background Image

and now … soon with a UI

  • Category Meta Image

Explaining this is going to be a support nightmare, how do you pick any of these images? Where are they used?

We first need to clean up the naming here @codinghorror otherwise we are already eating up technical debt before even shipping the feature.

Step 1 is… what do we call this beast? What are the restrictions on it (what dimensions should we expect)?

Options:

  • Square Category Image
  • Sharing Category Image
  • External Link Category Image

Something like that. I don’t know… but names are everything.


(Jeff Atwood) #16

I am super confused, isn’t there just ONE new image, which is the “Category Sharing Image”?

Logo and background are quite clear to me so I am not sure I see the big dramas here?


(Saurabh Patel) #17

Hi,
Should I just change the text from category meta image to category sharing image.

Or, should i rename columns in database too?

cc @sam


(Sam Saffron) #18

The database needs to be renamed as well, we now have uploaded_background_id this should be uploaded_sharing_id per @codinghorror’s name up there.