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

3
dnscms/dnscms/blocks.py
View File

@ -67,7 +67,7 @@ class ImageSliderItemBlock(blocks.StructBlock):
class Meta:
icon = "image"
label = "Bildegalleri"
# label = "Bilde"
@register_streamfield_block
@ -82,6 +82,7 @@ class ImageSliderBlock(blocks.StructBlock):
class Meta:
icon = "image"
label = "Bildegalleri"
@register_streamfield_block

27
dnscms/venues/migrations/0022_venuepage_images_alter_venuepage_featured_image.py Normal file
View File

@ -0,0 +1,27 @@
# Generated by Django 5.0.7 on 2024-08-09 02:01
import django.db.models.deletion
import wagtail.fields
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('images', '0003_alter_customimage_alt'),
('venues', '0021_venuepage_tech_specs_url'),
]
operations = [
migrations.AddField(
model_name='venuepage',
name='images',
field=wagtail.fields.StreamField([('image_slider', 4)], block_lookup={0: ('wagtail.images.blocks.ImageChooserBlock', (), {'label': 'Bilde'}), 1: ('wagtail.blocks.CharBlock', (), {'label': 'Tekst', 'max_length': 512, 'required': False}), 2: ('wagtail.blocks.StructBlock', [[('image', 0), ('text', 1)]], {}), 3: ('wagtail.blocks.ListBlock', (2,), {'label': 'Bilder', 'min_num': 1}), 4: ('wagtail.blocks.StructBlock', [[('images', 3)]], {})}, default=''),
preserve_default=False,
),
migrations.AlterField(
model_name='venuepage',
name='featured_image',
field=models.ForeignKey(blank=True, help_text='Bilde av lokalet som brukes i oversiktvisninger. Blir ikke automatisk med i bildekarusellen.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='images.customimage'),
),
]

19
dnscms/venues/migrations/0023_alter_venuepage_images.py Normal file
View File

@ -0,0 +1,19 @@
# Generated by Django 5.0.7 on 2024-08-09 02:15
import wagtail.fields
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('venues', '0022_venuepage_images_alter_venuepage_featured_image'),
]
operations = [
migrations.AlterField(
model_name='venuepage',
name='images',
field=wagtail.fields.StreamField([('image_slider', 4)], blank=True, block_lookup={0: ('wagtail.images.blocks.ImageChooserBlock', (), {'label': 'Bilde'}), 1: ('wagtail.blocks.CharBlock', (), {'label': 'Tekst', 'max_length': 512, 'required': False}), 2: ('wagtail.blocks.StructBlock', [[('image', 0), ('text', 1)]], {}), 3: ('wagtail.blocks.ListBlock', (2,), {'label': 'Bilder', 'min_num': 1}), 4: ('wagtail.blocks.StructBlock', [[('images', 3)]], {})}, help_text='Bilder som vises i bildekarusellen når man leser mer om lokalet. Inkluderer ikke automatisk bildet over.'),
),
]

24
dnscms/venues/models.py
View File

@ -8,11 +8,12 @@ from grapple.models import (
GraphQLString,
)
from wagtail.admin.panels import FieldPanel, FieldRowPanel, MultiFieldPanel
from wagtail.fields import RichTextField
from wagtail.fields import RichTextField, StreamField
from wagtail.models import Page
from wagtail.search import index
from wagtail_wordpress_import.models import WPImportedPageMixin
from dnscms.blocks import ImageSliderBlock
from dnscms.fields import CommonStreamField
@ -63,7 +64,22 @@ class VenuePage(WPImportedPageMixin, Page):
blank=True,
on_delete=models.SET_NULL,
related_name="+",
help_text=("Bilde av lokalet"),
help_text=(
"Bilde av lokalet som brukes i oversiktvisninger. "
"Blir ikke automatisk med i bildekarusellen."
),
)
images = StreamField(
[
("image_slider", ImageSliderBlock()),
],
block_counts={"image_slider": {"max_num": 1}},
blank=True,
help_text=(
"Bilder som vises i bildekarusellen når man leser mer om lokalet. "
"Inkluderer ikke automatisk bildet over."
),
)
body = CommonStreamField
@ -117,7 +133,8 @@ class VenuePage(WPImportedPageMixin, Page):
content_panels = Page.content_panels + [
FieldPanel("featured_image"),
FieldPanel("body"),
FieldPanel("images", heading="Bilder"),
FieldPanel("body", heading="Innhold"),
FieldPanel("floor", heading="Etasje"),
FieldPanel("preposition", heading="Preposisjon"),
FieldPanel("show_as_bookable", heading="Vis på utleieside"),
@ -135,6 +152,7 @@ class VenuePage(WPImportedPageMixin, Page):
graphql_fields = [
GraphQLImage("featured_image"),
GraphQLStreamfield("images"),
GraphQLStreamfield("body"),
GraphQLString("floor"),
GraphQLString("preposition"),

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