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

add image carousel to venues

Browse Source
This commit is contained in:
Jonas Braathen
2024-08-09 04:24:20 +02:00
parent 996b63911c
commit 175dcb8e8f
8 changed files with 201 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/app/lokaler/[slug]/page.tsx
View File

@ -1,4 +1,5 @@
import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock";
import { Breadcrumb } from "@/components/general/Breadcrumb";
import { Image } from "@/components/general/Image";
@ -51,58 +52,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
const venue = (data?.venue ?? {}) as VenueFragment;
const featuredImage: any = venue.featuredImage;
// remove when real content is ready
const placeholderBlock = {
id: "d3971f38-32f9-46aa-9d56-9e69d2765cdc",
blockType: "ImageSliderBlock",
field: "image_slider",
images: [
{
image: {
id: "7",
url: "https://cms.neuf.kult.444.no/media/original_images/22-06-02a_Storsalen_BR55620_FotoHelgeBrekke_SauXqU1.jpg",
width: 1024,
height: 683,
alt: "",
attribution: "Helge Brekke",
__typename: "CustomImage",
},
text: "",
__typename: "ImageSliderItemBlock",
},
{
image: {
id: "6",
url: "https://cms.neuf.kult.444.no/media/original_images/biblioteket_zPrxTfl.jpg",
width: 1200,
height: 800,
alt: "Biblioteket, inkl. boksamlingen og griseportretter",
attribution: "",
__typename: "CustomImage",
},
text: "For et fint bilde! Dette er bildetekst i et bildegalleri.",
__typename: "ImageSliderItemBlock",
},
{
image: {
id: "3",
url: "https://cms.neuf.kult.444.no/media/original_images/ABBAfever-22_websize-e1714644654899_kTNzMdU.jpg",
width: 1200,
height: 904,
alt: "",
attribution: "",
__typename: "CustomImage",
},
text: "For et fint bilde! Dette er bildetekst i et bildegalleri. Jeg lurer også på hvordan det ser ut når bildeteksten går over flere linjer, så her er muligens en test av det. Det kommer sikkert litt an på skjermstørrelsen, men når jeg skriver såpass langt som dette er jeg garantert minst to linjer tror jeg!",
__typename: "ImageSliderItemBlock",
},
],
__typename: "ImageSliderBlock",
};
return (
<main className="site-main" id="main">
<ImageSliderBlock block={placeholderBlock} hero />
{venue.images && venue.images.length !== 0 && (
<ImageSliderBlock block={venue.images[0]} hero />
)}
<div className="page-header-small">
<Breadcrumb link="/utleie" text="Lokale" />
<h1 className="page-title">{venue.title}</h1>

3
web/src/app/lokaler/page.tsx
View File

@ -23,6 +23,9 @@ const VenueFragmentDefinition = graphql(`
id
slug
title
images {
...Blocks
}
body {
...Blocks
}

4
web/src/gql/gql.ts
View File

@ -30,7 +30,7 @@ const documents = {
"\n query allVenueSlugs {\n pages(contentType: \"venues.VenuePage\") {\n id\n slug\n }\n }\n ": types.AllVenueSlugsDocument,
"\n query venueBySlug($slug: String!) {\n venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n ": types.VenueBySlugDocument,
"\n fragment VenueIndex on VenueIndex {\n ... on VenueIndex {\n title\n lead\n body {\n ...Blocks\n }\n }\n }\n": types.VenueIndexFragmentDoc,
"\n fragment Venue on VenuePage {\n __typename\n id\n slug\n title\n body {\n ...Blocks\n }\n featuredImage {\n ...Image\n }\n showAsBookable\n floor\n preposition\n usedFor\n techSpecsUrl\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n": types.VenueFragmentDoc,
"\n fragment Venue on VenuePage {\n __typename\n id\n slug\n title\n images {\n ...Blocks\n }\n body {\n ...Blocks\n }\n featuredImage {\n ...Image\n }\n showAsBookable\n floor\n preposition\n usedFor\n techSpecsUrl\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n": types.VenueFragmentDoc,
"\n query venueIndex {\n index: venueIndex {\n ... on VenueIndex {\n ...VenueIndex\n }\n }\n venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n ": types.VenueIndexDocument,
"\n fragment Home on HomePage {\n ... on HomePage {\n featuredEvents {\n id\n }\n }\n }\n": types.HomeFragmentDoc,
"\n query home {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n ... on HomePage {\n ...Home\n }\n }\n news: pages(contentType: \"news.newsPage\", order: \"-first_published_at\", limit: 4) {\n ... on NewsPage {\n ...News\n }\n }\n }\n ": types.HomeDocument,
@ -137,7 +137,7 @@ export function graphql(source: "\n fragment VenueIndex on VenueIndex {\n ..
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment Venue on VenuePage {\n __typename\n id\n slug\n title\n body {\n ...Blocks\n }\n featuredImage {\n ...Image\n }\n showAsBookable\n floor\n preposition\n usedFor\n techSpecsUrl\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n"): (typeof documents)["\n fragment Venue on VenuePage {\n __typename\n id\n slug\n title\n body {\n ...Blocks\n }\n featuredImage {\n ...Image\n }\n showAsBookable\n floor\n preposition\n usedFor\n techSpecsUrl\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n"];
export function graphql(source: "\n fragment Venue on VenuePage {\n __typename\n id\n slug\n title\n images {\n ...Blocks\n }\n body {\n ...Blocks\n }\n featuredImage {\n ...Image\n }\n showAsBookable\n floor\n preposition\n usedFor\n techSpecsUrl\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n"): (typeof documents)["\n fragment Venue on VenuePage {\n __typename\n id\n slug\n title\n images {\n ...Blocks\n }\n body {\n ...Blocks\n }\n featuredImage {\n ...Image\n }\n showAsBookable\n floor\n preposition\n usedFor\n techSpecsUrl\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

128
web/src/gql/graphql.ts
View File

File diff suppressed because one or more lines are too long