Skip to content
This repository has been archived by the owner on Feb 8, 2024. It is now read-only.

Added Img support to Markdown, added image formatting as webp #56

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Otju
Copy link
Contributor

@Otju Otju commented Feb 13, 2023

Basic image support for Markdown. Image formatting as webp, if strapi-plugin-local-image-sharp is installed and working in the backend.

@@ -11,6 +11,7 @@ const markdownComponents: Components = {
p: P,
pre: Pre,
a: A,
img: Img,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably add img: Ignore to plainTextComponents as well.

@@ -1,6 +1,6 @@
const parseImageUrl = (url: string) => {
if (process.env.NODE_ENV === "development") {
return process.env.STRAPI_URL + url
return `${process.env.STRAPI_URL + url}?format=webp`
}
return url
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we end up implementing Tietokilta/tikweb-cms#51 or similar in production, we should also add ?format=webp here.

If we do it that way, the image URL will also move to https://<strapi>/uploads, which will require adding STRAPI_URL to each.

export const Img = ({ className, alt, src, ...props }: ImgProps) => (
<img
alt={alt}
src={src && parseImageUrl(src)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should consider supporting srcset here since Strapi provides various sizes of images.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants