edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add reusable ImageFigure component

Browse Source
This commit is contained in:
Jonas Braathen
2024-07-07 17:43:19 +02:00
parent e03e2624db
commit ada7d25083
15 changed files with 70 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/blocks/FeaturedBlock.tsx
View File

@@ -1,6 +1,6 @@
import { FeaturedBlock as FeaturedBlockType } from "@/gql/graphql";
import Link from "next/link";
import Image from "../general/Image";
import { Image } from "@/components/general/Image";
import styles from "./featuredBlock.module.scss";
// the 'text' field has been aliased to 'featuredBlockText' and i'm

2
web/src/components/blocks/HorizontalRuleBlock.tsx
View File

@@ -1,5 +1,5 @@
import { HorizontalRuleBlock as HorizontalRuleBlockType } from "@/gql/graphql";
import Image from "../general/Image";
import { Image } from "@/components/general/Image";
import styles from "./horizontalRuleBlock.module.scss";
export const HorizontalRuleBlock = ({

24
web/src/components/blocks/ImageSliderBlock.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { ImageSliderBlock as ImageSliderBlockType } from "@/gql/graphql";
import Image from "../general/Image";
import { ImageFigure } from "@/components/general/Image";
import styles from "./imageSliderBlock.module.scss";
// import swiper modules & styles
@@ -31,18 +31,16 @@ export const ImageSliderBlock = ({
{block.images &&
block.images.map((imageItem: any, index: number) => (
<SwiperSlide key={index}>
<figure key={imageItem.image.id}>
<Image
src={imageItem.image.url}
alt={imageItem.image.alt ?? ""}
width={imageItem.image.width}
height={imageItem.image.height}
// width={0}
// height={0}
// sizes="20vw"
/>
{imageItem.text && <figcaption>{imageItem.text}</figcaption>}
</figure>
<ImageFigure
key={imageItem.image.id}
src={imageItem.image.url}
alt={imageItem.image.alt ?? ""}
width={imageItem.image.width}
height={imageItem.image.height}
attribution={imageItem.image.attribution}
caption={imageItem.text}
sizes="100vw"
/>
</SwiperSlide>
))}
</Swiper>

32
web/src/components/blocks/ImageWithTextBlock.tsx
View File

@@ -1,26 +1,20 @@
import { ImageWithTextBlock as ImageWithTextBlockType } from "@/gql/graphql";
import Image from "../general/Image";
import styles from "./imageWithTextBlock.module.scss";
import { ImageFigure } from "@/components/general/Image";
export const ImageWithTextBlock = ({
export function ImageWithTextBlock({
block,
}: {
block: ImageWithTextBlockType;
}) => {
}) {
return (
<figure
className={`${styles.imageWithTextBlock} ${styles[block.imageFormat]}`}
>
<Image
src={block.image.url}
alt={block.image.alt ?? ""}
width={block.image.width}
height={block.image.height}
// width={0}
// height={0}
// sizes="20vw"
/>
{block.text && <figcaption>{block.text}</figcaption>}
</figure>
<ImageFigure
src={block.image.url}
alt={block.image.alt ?? ""}
width={block.image.width}
height={block.image.height}
attribution={block.image.attribution}
caption={block.text}
imageFormat={block.imageFormat}
/>
);
};
}

55
web/src/components/blocks/imageWithTextBlock.module.scss
View File

@@ -1,55 +0,0 @@
.imageWithTextBlock {
width: 100%;
margin: 0;
img {
display: block;
max-width: 100%;
height: auto;
}
figcaption {
width: 100%;
max-width: var(--size-width-p);
margin: 0 auto;
padding: var(--spacing-s) 0;
font-size: var(--font-size-caption);
line-height: 1.4;
opacity: .8;
}
&.bleed {
width: 100vw;
margin: 2rem calc(var(--spacing-sitepadding-inline)*-1);
img {
width: 100%;
}
@media (max-width: 800px) {
padding: var(--spacing-xs) var(--spacing-sitepadding-inline);
}
}
&.fullwidth {
margin: 2rem 0;
img {
width: 100%;
}
}
&.original {
width: 100%;
margin: 2rem auto;
text-align: center;
img {
margin: auto;
}
figcaption {
text-align: left;
}
}
}