Is it possible to set a single image/logo for all social cards? Or can we disable them completely? (without the plugin?) [Windows trouble]

[MaximilianKohler]

I'm on Windows and having trouble setting up the social cards. Right now, websites are using the first image from each page. I'd like to either disable them from pulling any image, or set it to be a single image for all pages (Edit: solution using overrides).

Regarding my problems:
I saw on https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/ that there's a video guide. Unfortunately it's for MacOS.

I think I'm stuck here https://squidfunk.github.io/mkdocs-material/setup/dependencies/image-processing/#windows on the pngquant directions, and I opened an issue there about it jibsen/pngquant-winbuild#6.

I tried both of these, but neither disabled the previews completely:

plugins:
  - social:
      cards: false
      enabled: false

In index.md:

---
title: mywebsite
description: mywebsite description
social:
  cards: false
---

When I build on Windows with

plugins:
  - social

or anything similar, I get these errors which I haven't been able to solve:

Traceback (most recent call last):
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\runpy.py", line 196, in _run_module_as_main
    return _run_code(code, main_globals, None,
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\runpy.py", line 86, in _run_code
    exec(code, run_globals)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\Scripts\mkdocs.exe\__main__.py", line 7, in <module>
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 1128, in __call__
    return self.main(*args, **kwargs)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 1053, in main
    rv = self.invoke(ctx)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 1659, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 1395, in invoke
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 754, in invoke
    return __callback(*args, **kwargs)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\mkdocs\__main__.py", line 250, in build_command
    build.build(cfg, dirty=not clean)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\mkdocs\commands\build.py", line 270, in build
    config = config.plugins.run_event('config', config)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\mkdocs\plugins.py", line 520, in run_event
    result = method(item, **kwargs)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\material\plugins\social\plugin.py", line 116, in on_config
    self.font = self._load_font(config)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\material\plugins\social\plugin.py", line 398, in _load_font
    self._load_font_from_google(name)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\material\plugins\social\plugin.py", line 422, in _load_font_from_google
    zip = ZipFile(tmp)
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\zipfile.py", line 1269, in __init__
    self._RealGetContents()
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\zipfile.py", line 1336, in _RealGetContents
    raise BadZipFile("File is not a zip file")
zipfile.BadZipFile: File is not a zip file

I'm using Python 3.10.11. I installed the precompiled GTK runtime. And I had no issues with pip install pillow cairosvg.

Edit: more info in addition to the marked solution: #5761 (reply in thread)

[kamilkrzyskow]

The post is a bit all over the place or it's just me being stupid, as I'm not sure what are you trying to achieve.
Firstly, are you a sponsor of MkDocs Material to get access to the newer Social plugin with elaborate customization options? From the post I'm assuming yes, since you wanted to install pngquant too, which is needed for the optimization plugin, which is also Insiders only. I'm not a part of Insiders therefore, knowledge about those features is limited.

I'm on Windows and having trouble setting up the social cards. Right now, websites are using the first image from each page. I'd like to either disable them from pulling any image, or set it to be a single image for all pages.

Here you tell that the plugin works since it generates the images based on some criteria, but later you talk about the error, which prevents you from continuing? The social: cards: false setting in mkdocs.yml disables cards creation altogether, and I never used the setting in the front matter at the top of the file.
As for the video guide, even if it's for MacOS, apart of the installation guide nothing else should differ.
Here is one of the first videos showcasing the new social plugin customization features including setting an image in the background: https://twitter.com/i/status/1654832324272431104

As for the error, according to the traceback the error at the bottom originated in the _load_font_from_google function, which downloads the fonts specified in mkdocs.yml. The issue could be that the font you've chosen isn't in Google Fonts, you made a typo etc., Maybe the code doesn't handle network errors, as in google prevents you from downloading the fonts and instead of the ZIP file you download a 404 page or something.

I agree that the issue here is hard to pin point. However, maybe the discussion will lead to some sort of result 🤷

You could even try to reinstall mkdocs-material. Something along the lines of (for the non-Insiders version):

pip install mkdocs-material --force-reinstall

EDIT:
I also see you're using the Python version from the Windows Store. My preference is to install it from the official website and control every aspect of the installation etc. then use pip -m venv venv to create Virtual Environments and so on. As I don't know how Python from the Windows Store run scripts (maybe some sort of sandbox etc.), it could be yet another possible cause for the corrupted Google Fonts zip file, but I don't think that's the case.

[kamilkrzyskow]

OK, so based on the code from the function:

mkdocs-material/material/plugins/social/plugin.py

Lines 498 to 499 in 10b1501

	url = "https://fonts.google.com/download?family={}"
	res = requests.get(url.format(name.replace(" ", "+")), stream = True)

Your final URL should look like this https://fonts.google.com/download?family=Noto+Sans+N'Ko which results in a 404 page.
After searching for the font in Google Fonts, the file name is Noto_Sans_NKo.zip, which means that the ' symbol should be omitted. The plugin should clean the name from such characters, likely a bug.

Try with text: Noto Sans NKo

No plugin is needed for websites to use the first image of each page. They do that automatically.

Without a plugin no social cards are generated for the page. Social cards are the images shown when you share the link on social media. I saw on your profile that you have a website called Human Microbiome built without the Social plugin with Material 9.0.
If you send a link from that website onto Discord, Twitter or Facebook it shouldn't show any image or at best it would show an enlarged logo (theme: faviocon).
So having said that, I don't know what do you mean with "use the first image of each page automatically"

[kamilkrzyskow]

I missed that when writing the above message:

But I still got the error when using:

plugins:
  - search:
      separator: '[\s\-,:!=\[\]()"`/]+|\.(?!\d)|&[lg]t;|(?!\b)(?=[A-Z][a-z])'
  - social

I don't see the connection here... the traceback was exactly the same?

[MaximilianKohler]

So having said that, I don't know what do you mean with "use the first image of each page automatically"

Look at https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fhumanmicrobiome.info%2F for example. You can see it uses the first image on the page. Same for https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fhumanmicrobiome.info%2Ffmt, etc.

I don't see the connection here... the traceback was exactly the same?

I'm not sure what you mean by traceback. Oh, I see the "error output" includes the word "traceback", so here's the output:

Traceback (most recent call last):
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\runpy.py", line 196, in _run_module_as_main
    return _run_code(code, main_globals, None,
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\runpy.py", line 86, in _run_code
    exec(code, run_globals)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\Scripts\mkdocs.exe\__main__.py", line 7, in <module>
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 1128, in __call__
    return self.main(*args, **kwargs)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 1053, in main
    rv = self.invoke(ctx)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 1659, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 1395, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\click\core.py", line 754, in invoke
    return __callback(*args, **kwargs)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\mkdocs\__main__.py", line 250, in build_command
    build.build(cfg, dirty=not clean)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\mkdocs\commands\build.py", line 270, in build
    config = config.plugins.run_event('config', config)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\mkdocs\plugins.py", line 520, in run_event
    result = method(item, **kwargs)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\material\plugins\social\plugin.py", line 116, in on_config
    self.font = self._load_font(config)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\material\plugins\social\plugin.py", line 398, in _load_font
    self._load_font_from_google(name)
  File "C:\Users\User1\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\material\plugins\social\plugin.py", line 422, in _load_font_from_google
    zip = ZipFile(tmp)
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\zipfile.py", line 1269, in __init__
    self._RealGetContents()
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\zipfile.py", line 1336, in _RealGetContents
    raise BadZipFile("File is not a zip file")
zipfile.BadZipFile: File is not a zip file

I compared them in notepad++ and the only difference I see is this new bit return ctx.invoke(self.callback, **ctx.params) but perhaps I somehow left that out of the previous copy-paste.

[kamilkrzyskow]

Actually, I assumed you're correct, but just checked and there is no 'Times New Roman' font in Google Fonts either. Try with what I posted above or simply text: Roboto

As for the Linkedin, I will check it later once I find my account... #5761 (reply in thread)

The message below contains more information if this answer together with the previous posts isn't enough:
#5761 (reply in thread)

[squidfunk]

System fonts are currently not supported by the social plugin, because they differ among systems.

[MaximilianKohler]

Interesting, text: Roboto or text: Noto Sans both worked.

Wow, I was thinking that setting a single image for all pages would be preferable but I see the generated images in .cache\plugin\social and they look quite nice! Nice @squidfunk!

Just to confirm though, there is no option to set a single static image for all pages?

One issue I see is that the main heading text gets cut off instead of being shrunk to a smaller size https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fhumanmicrobiome.info%2Ffmt

Hmm, even the description gets cut off https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fhumanmicrobiome.info%2F

Ah, I see there's an experimental insiders option to shrink it https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/#overflow

EDIT: text: PT Sans Narrow is a good font to use since it's more compact and decreases the need for shrinking.

Oh, I see the front matter option I tried before is insiders-only https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/#disabling-social-cards

---
title: my page title
description: my page description
social:
  cards: false
---

Hmm, strange... I set it back to text: Noto Sans N'Ko and it still worked. Perhaps due to it being cached? https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/#caching

[kamilkrzyskow]

Why did you select your message as the answer when I was the one who said it first... 🙄 Anyways, did you try the text: Noto Sans NKo setting, as this is the font without the special character, so it should be able to download it.

The change in the font should reset the cache, as every image needs to be redone with the new font, so I don't know why it worked with the font containing the special character 🤔 Unless this is yet another bug in the plugin, currently away from the PC so I don't want to check the code.

EDIT2: So I got to the PC and checked:

mkdocs-material/material/plugins/social/plugin.py

Lines 207 to 213 in 3e8faa0

	# Generate social card if not in cache - TODO: values from mkdocs.yml
	hash = md5("".join([
	site_name,
	str(title),
	description
	]).encode("utf-8"))
	file = os.path.join(self.cache, f"{hash.hexdigest()}.png")

The cache does indeed NOT take into account the font name, and neither the hash of the logo. I guess that the TODO comment has been forgotten😅

[MaximilianKohler]

Why did you select your message as the answer when I was the one who said it first...

Because it contained more info (including the fact that I switched back and I still don't get the error), but I changed to your comment. I appreciate your help very much.

Anyways, did you try the text: Noto Sans NKo setting, as this is the font without the special character, so it should be able to download it.

No, I mentioned in the last comment that I set it back to text: Noto Sans N'Ko and it still worked.

[MaximilianKohler]

I upgraded MKdocs and Material today and noticed that you "fixed the bug". Unfortunately, for me this caused more problems:

I was building with the Google Font I wanted for the social cards, and then changing the font to Verdana and using that on my site. I could leave it on Verdana and it wouldn't cause any problems, nor would it change the social card font.

Unfortunately, after the update it will now not allow me to build with Verdana at all. I looked at the Overrides section, but do not understand how I might be able to bypass this. Perhaps \docs\stylesheets\extra.css could be used as well? But I'm not sure how.

Also, it only seems to be a "partial fix" since the .cache folder/files don't change at all when I change the font in mkdocs.yml. I don't think I'd want that "fixed" though.

Downgrading:

I don't see any info on downgrading to previous versions: https://squidfunk.github.io/mkdocs-material/ - via search for downgrade.

Nor in the issues https://github.com/squidfunk/mkdocs-material/issues?q=is%3Aissue+downgrade

Nor in discussions: https://github.com/squidfunk/mkdocs-material/discussions?discussions_q=downgrade

---

I guess the "best" solution might be to find a google font similar to Verdana, but I haven't found one yet. I switched to Verdana from Noto Sans N'Ko because I noticed that N'Ko wasn't distinguishing "I" from lowercase "l", like it shows on the google page https://fonts.google.com/?preview.text=Lowercase%20l%20shouldn%27t%20look%20like%20I&preview.text_type=custom&query=Noto+Sans+N%27Ko

---

EDIT:
Noto Sans Vithkuqi or Noto Sans Adlam Unjoined seem to work well enough.

And maybe this css would work:

:root {
  --md-text-font: "Verdana";
  --md-code-font: "Roboto Mono";
}

[MaximilianKohler]

Setting a font family via CSS has no effect on the social plugin. As noted in my previous comment, it currently must be a Google Font.

Yes, my goal was to have Verdana as the main text on my website, and a Google Font for the social cards. CSS would work fine for that right? (IE: Google font in mkdocs.yml and Verdana in extra.css)

[squidfunk]

Jup, that's right.

[MaximilianKohler]

I think that the Social plugin fonts should match the font used on the page, and therefore the cache should be reset after the font change IMO, so once I get to "fixing" I might propose such change in my PR.

If you do, I would suggest making it an optional on/off switch (and mentioned on the social cards page). One reason not mentioned yet is that it takes longer to build/serve, and if a person is just experimenting with other things then it would be an unnecessary time-consumption. Also, some fonts download large files to the .cache which may also be unwanted.

[MaximilianKohler]

Yes, my goal was to have Verdana as the main text on my website, and a Google Font for the social cards. CSS would work fine for that right? (IE: Google font in mkdocs.yml and Verdana in extra.css)

Hmm, this actually doesn't seem like a valid "fix". I just noticed that mobile browsers don't seem to care about the CSS, and they revert to their default font (not even the one in mkdocs.yml).

[squidfunk]

Yes, my goal was to have Verdana as the main text on my website, and a Google Font for the social cards. CSS would work fine for that right? (IE: Google font in mkdocs.yml and Verdana in extra.css)

Hmm, this actually doesn't seem like a valid "fix". I just noticed that mobile browsers don't seem to care about the CSS, and they revert to their default font (not even the one in mkdocs.yml).

Then you likely have an error in your CSS file or the CSS file was not loaded correctly.