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