scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-200): Fixed image sizes for RTE

Browse Source
This commit is contained in:
Erik Tiekstra
2024-11-12 14:34:19 +01:00
parent 0a35243d88
commit 92ad7192b1
3 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/JsonToHtml/renderOptions.tsx
View File

@@ -325,14 +325,16 @@ export const renderOptions: RenderOptions = {
const props = extractPossibleAttributes(node.attrs)
props.className = styles.image
return (
<Image
key={node.uid}
alt={alt}
height={image.node.dimension.height}
src={image.node.url}
width={image.node.dimension.width}
{...props}
/>
<div className={styles.imageContainer}>
<Image
alt={alt}
className={styles.image}
src={image.node.url}
fill
sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
{...props}
/>
</div>
)
}
}
@@ -393,22 +395,20 @@ export const renderOptions: RenderOptions = {
image = insertResponseToImageVaultAsset(attrs)
}
const alt = image.meta.alt ?? image.title
const width = attrs.width
? parseInt(attrs.width.replaceAll("px", ""))
: image.dimensions.width
const props = extractPossibleAttributes(attrs)
return (
<section key={node.uid}>
<Image
alt={alt}
className={styles.image}
height={365}
src={image.url}
width={width}
focalPoint={image.focalPoint}
{...props}
/>
<div className={styles.imageContainer}>
<Image
alt={alt}
className={styles.image}
src={image.url}
fill
sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
focalPoint={image.focalPoint}
{...props}
/>
</div>
<Caption>{image.meta.caption}</Caption>
</section>
)