Am I missing something with the social plugin

[SteveRosam]

I'm trying to use the social plugin.
Our site was generating the default social images. I changed it to use a custom layout (which when running locally renders images into the .cache\plugin\social folder just fine)

When deployed we don't get any social images. I can see that the images are there in the correct folder on the server where everything is deployed.. so I guess this isn't an MKDocs or Material issue. Buuutt.. anyone know if anything else needs to be done to get this working?

Deployed to GitHub pages via a GitHub action fwiw

(
How are the images served/sent/provided to the platform their being posted on?
I assume there is a URL that's called to get the image?
)

[kamilkrzyskow]

Hello,
please refer to this comment for further instructions: #6130 (reply in thread)

[SteveRosam]

Thanks that helped understand things a little. I didnt know about the linked in post inspector. Thanks.

[squidfunk]

Do you have the tags property defined in your custom layout? Note that this is mandatory for images to be correctly discovered:

definitions:

  - &page_title_with_site_name >-
    {%- if not page.is_homepage -%}
      {{ page.meta.get("title", page.title) }} - {{ config.site_name }}
    {%- else -%}
      {{ page.meta.get("title", page.title) }}
    {%- endif -%}

  - &page_description >-
    {{ page.meta.get("description", config.site_description) or "" }}

tags:

  og:type: website
  og:title: *page_title_with_site_name
  og:description: *page_description
  og:image: "{{ image.url }}"
  og:image:type: "{{ image.type }}"
  og:image:width: "{{ image.width }}"
  og:image:height: "{{ image.height }}"
  og:url: "{{ page.canonical_url }}"

  twitter:card: summary_large_image
  twitter:title: *page_title_with_site_name
  twitter:description: *page_description
  twitter:image: "{{ image.url }}"

[SteveRosam]

Erm... no. Thanks.

[SteveRosam]

I have added these and I'm still having issues.

When playing around with different values and settings on my local machine I noticed that I get warnings when using :

plugins:
  - social:
      cards_layout: default/invert

I get: WARNING - Config value 'plugins': Plugin 'material/social' option 'cards_layout': Unrecognised configuration name: cards_layout

and with this:

plugins:
  - social:
      cards_layout_options:
        background_image: layouts/background.jpg
        background_color: transparent

(The background file exists in layouts and layouts is on the same level as docs (i.e. not inside docs)
I get no error or warning but also get just the default social cards in both the .cache\plugin\social and site\assets\images\social folders.

These aren't issues with custom social cards but seem to point to a gener issue generating social cards.

I have installed pillow and cairosvg.

[kamilkrzyskow]

The warning about the missing config option cards_layout points to the question, are you using the Insiders version of the theme?

If you open up the source of the generated .html file you can see a meta tag in the header.

<meta name="generator" content="..."> you should have a mkdocs-material+insiders there

[SteveRosam]

Locally... no. Good point. Thanks.
We only use it for the CI build.
I'll try it now. Thanks.

[SteveRosam]

Thank you guys. Solved by installing insiders locally and adding :

tags:

  og:type: website
  og:title: *page_title_with_site_name
  og:description: *page_description
  og:image: "{{ image.url }}"
  og:image:type: "{{ image.type }}"
  og:image:width: "{{ image.width }}"
  og:image:height: "{{ image.height }}"
  og:url: "{{ page.canonical_url }}"

  twitter:card: summary_large_image
  twitter:title: *page_title_with_site_name
  twitter:description: *page_description
  twitter:image: "{{ image.url }}"

[ITProggeruz]

Ehh they need to fix it on thier docs or smth

[ITProggeruz]

They need to put Sponsors only text with like sponsor icon

[kamilkrzyskow]

There is the ❤️ emoji next to settings that are Insiders only: https://squidfunk.github.io/mkdocs-material/conventions/#sponsors-only