Preview images and page descriptions for social media about creativecommons.github.io-source

[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