From 8cf1160bd38f6155d3cf28c2b59fab920aab4d0a Mon Sep 17 00:00:00 2001 From: Stephen Tse Date: Fri, 15 Nov 2024 22:23:10 -0800 Subject: [PATCH 1/2] Updated OG image header to allow image path from outside of static dir --- docs/features/social images.md | 2 +- quartz/components/Head.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/features/social images.md b/docs/features/social images.md index 0822651f46702..78644ec768840 100644 --- a/docs/features/social images.md +++ b/docs/features/social images.md @@ -45,7 +45,7 @@ The following properties can be used to customize your link previews: | `socialDescription` | `description` | Description to be used for preview. | | `socialImage` | `image`, `cover` | Link to preview image. | -The `socialImage` property should contain a link to an image relative to `quartz/static`. If you have a folder for all your images in `quartz/static/my-images`, an example for `socialImage` could be `"my-images/cover.png"`. +The `socialImage` property should contain a link to an image relative to your base URL. For example, if you have an image `cover.png` in `quartz/static/`, the `socialImage` value could be `"static/cover.png"`. If your image is in `content/assets/`, then the `socialImage` value would become `"assets/cover.png"`. > [!info] Info > diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx index f4c9d490e694e..e908511ce3728 100644 --- a/quartz/components/Head.tsx +++ b/quartz/components/Head.tsx @@ -147,7 +147,7 @@ export default (() => { // Override with frontmatter url if existing if (frontmatterImgUrl) { - ogImagePath = `https://${cfg.baseUrl}/static/${frontmatterImgUrl}` + ogImagePath = `https://${cfg.baseUrl}/${frontmatterImgUrl}` } // Url of current page From 73fc1ce95913103d07fb7cf20e44bd1015178b3c Mon Sep 17 00:00:00 2001 From: Stephen Tse Date: Tue, 19 Nov 2024 19:22:09 -0800 Subject: [PATCH 2/2] Added full URL support to frontmatter socialImage link --- docs/features/social images.md | 6 +++++- quartz/components/Head.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/features/social images.md b/docs/features/social images.md index 78644ec768840..17bb59e92b00e 100644 --- a/docs/features/social images.md +++ b/docs/features/social images.md @@ -45,7 +45,11 @@ The following properties can be used to customize your link previews: | `socialDescription` | `description` | Description to be used for preview. | | `socialImage` | `image`, `cover` | Link to preview image. | -The `socialImage` property should contain a link to an image relative to your base URL. For example, if you have an image `cover.png` in `quartz/static/`, the `socialImage` value could be `"static/cover.png"`. If your image is in `content/assets/`, then the `socialImage` value would become `"assets/cover.png"`. +The `socialImage` property should be a link to an image. It can be relative to your base URL, or you can provide a full URL with scheme (HTTP protocol only). For example: + +1. If you have an image `cover.png` in `quartz/static/`, the `socialImage` value could be `"static/cover.png"`. +2. If your image is in `content/assets/`, then the `socialImage` value would become `"assets/cover.png"`. +3. If your image is hosted elsewhere, say `https://example.com/cover.png`, then the `socialImage` value should be `"https://example.com/cover.png"`. > [!info] Info > diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx index e908511ce3728..4c076a6e64a1a 100644 --- a/quartz/components/Head.tsx +++ b/quartz/components/Head.tsx @@ -44,6 +44,8 @@ const defaultOptions: SocialImageOptions = { excludeRoot: false, } +const urlSchemeRegex = new RegExp("^(http|https)://", "i") + export default (() => { let fontsPromise: Promise @@ -147,7 +149,9 @@ export default (() => { // Override with frontmatter url if existing if (frontmatterImgUrl) { - ogImagePath = `https://${cfg.baseUrl}/${frontmatterImgUrl}` + ogImagePath = urlSchemeRegex.test(frontmatterImgUrl) + ? frontmatterImgUrl + : `https://${cfg.baseUrl}/${frontmatterImgUrl}` } // Url of current page