Preview images and page descriptions for social media

[ericsteuer]

Hi -- just a suggestion: Blog post pages on the open source blog don't appear to be optimized well for Twitter and Facebook (etc.) to be able to fetch and display image and description previews. See attached screenshots

[SamOdum]

I can handle this. Please may I proceed?

[kgodey]

Sure @SamOdum, I see you've commented on a couple of other issues on this repo as well, please pick one issue at a time so that others have a chance too. Let me know which one you want to tackle first and I'll mark that one as in progress.

[SamOdum]

Thank you for responding. May I start with this one?

[kgodey]

Go ahead.

[chimenekouomogne]

Hi @kgodey ! Pleace may i work with you on this ?

[kgodey]

@chimenekouomogne This is already in progress, there is a pull request for it.

[techievivek]

@kgodey mam If this is not fixed I will love to work on this one.
Thank you.

[kgodey]

@techievivek go ahead

[techievivek]

@kgodey hello mam, I tried solving this issue but since all the blog posts need not have image how will we able to show the featured image for same, I think @SamOdum idea is one we can go with.
Or please suggest me something so that I can move forward with or think about it.
The main problem is with the featured image, the description part can be done easily.
Thank you.

[kgodey]

We should use the first image on the page/blog post if it exists, otherwise we should not have a featured image at all.

[techievivek]

@kgodey so in case if no images are part of blog/page can we use cc logo. So that it looks genuine and better while sharing.

[kgodey]

I think it's best to skip the featured image entirely if there's no image in the post/page.

[techievivek]

@kgodey hello mam, I have almost worked on this issue but just some queries before I start a pull request.

1. For index page i.e. opensource.creativecommons.org , since I am getting first image by default(if there), so here it is not showing CC logo rather a black & white keyboard image, as that is the first image for this page.
2. Description part of meta tag, I don't know what I have to put here, first, I thought to go with body(content part of post), but that is markdown content so we will need to strip it to get text content (there is a plugin too in lektor striphtmltags), but i am unable to install it, secondly we will have to slice the content(as post content can be very long) and there is again a plugin in lektor markdown-excerpt, but this is also not working.
   Please help me so that i can initiate the PR.
   Thank you

[techievivek]

@kgodey hello mam, should i create a pull request and then you will check it out?

[kgodey]

@techievivek

1. that's fine
2. what errors are you running into with the Lektor plugins?

[techievivek]

@kgodey hello mam, I have added both striphtmltags and markdown-excerpt plugin to the project so that I can convert body content into plain text and then just get the first line content using markdown-excerpt.
I have added by running the command

lektor plugin add markdown-excerpt
lektor plugin add strip-html-tags

This is the content of file .lektorproject after I run the above command.

But none of them is working.
Below is the error I am receiving.

Progress till now

I have just added the image functionality, i.e. it will select an image if there.

{% set image = this.attachments.images.first() %}
      {% if image %}
<meta property="og:image" content="{{ image | url }}" />
      {% endif %}

Please suggest me how do I proceed with this?
Thank you

[techievivek]

@kgodey hello mam, please look into this.
Thank you

[kgodey]

@techievivek please create a PR so that I can see why the error is happening.

[techievivek]

@kgodey mam, I have created a PR, please look into it.
Thank you

[techievivek]

@kgodey hello mam, did u have a look at it?

[kgodey]

Not yet, it will take me a couple more days, sorry.

[techievivek]

@kgodey Ok mam, sure. I am looking at other repo under CC.

[techievivek]

@kgodey Mam, can we just show the image (first one in the post) and the title while sharing on different platform.( we can skip the description part).
I am attaching a picture on how it looks while sharing for the above condition.

( The link part will be of the CC site, I am using ngrok to tunnel localhost).
If we can go with this I will update my PR.
Or else we just have to sort the description part somehow.

[techievivek]

@kgodey mam please take a look at above suggestion.

[kgodey]

@techievivek I think GitHub ate my last comment because I definitely replied to this :/

Yes, we can skip the description for now. Could you make a separate GitHub issue for adding the description once this is merged? We can tackle that separately.

[techievivek]

@kgodey Yes mam I will do that. Also please take a look at one of the bug that I experienced today here #182

[techievivek]

@kgodey I have created a new PR, please have a look. And I will add a new issue for the description part.

[techievivek]

@kgodey I have added a new issue for description part, please have a look and suggest if I have to change anything.
#184