Accords-Library-Archive/accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Simplified how the images are loaded from markdown

Browse Source
This commit is contained in:
DrMint 2022-04-23 20:30:51 +02:00
parent ae7dc03821
commit 7dc8ab3a28
1 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Markdown/Markdawn.tsx
View File

@ -251,7 +251,7 @@ export default function Markdawn(props: Props): JSX.Element {
name?: string;
}) => (
<div
className="my-8 cursor-pointer"
className="my-8 cursor-pointer place-content-center grid"
onClick={() => {
setLightboxOpen(true);
setLightboxImages([
@ -262,29 +262,16 @@ export default function Markdawn(props: Props): JSX.Element {
setLightboxIndex(0);
}}
>
{compProps.src.startsWith("/uploads/") ? (
<div className="relative w-full aspect-video">
<Img
image={{
__typename: "UploadFile",
alternativeText: compProps.alt,
url: compProps.src,
width: compProps.width ?? 1500,
height: compProps.height ?? 1000,
caption: compProps.caption ?? "",
name: compProps.name ?? "",
}}
layout="fill"
objectFit="contain"
quality={ImageQuality.Medium}
></Img>
</div>
) : (
<div className="grid place-content-center">
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<img {...compProps} className="max-h-[50vh] " />
</div>
)}
<Img
image={
compProps.src.startsWith("/uploads/")
? getAssetURL(compProps.src, ImageQuality.Small)
: compProps.src
}
layout="fill"
objectFit="contain"
quality={ImageQuality.Medium}
></Img>
</div>
),
},