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

add custom image model, fetch alt text

Browse Source
This commit is contained in:
Jonas Braathen
2024-05-15 04:42:42 +02:00
parent 5540040ea2
commit 71b0a87180
26 changed files with 358 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
dnscms/associations/migrations/0006_alter_associationpage_logo.py Normal file
View File

@ -0,0 +1,29 @@
# Generated by Django 5.0.6 on 2024-05-15 01:46
import django.db.models.deletion
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
("associations", "0005_associationindex_lead"),
("images", "0002_alter_customimage_options_alter_customimage_alt"),
]
operations = [
migrations.RemoveField(
model_name="associationpage",
name="logo",
),
migrations.AddField(
model_name="associationpage",
name="logo",
field=models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="images.customimage",
),
),
]

2
dnscms/associations/models.py
View File

@ -52,7 +52,7 @@ class AssociationPage(Page):
max_length=64, choices=AssociationType, default=AssociationType.FORENING
)
logo = models.ForeignKey(
"wagtailimages.Image",
"images.CustomImage",
null=True,
blank=True,
on_delete=models.SET_NULL,

3
dnscms/dnscms/settings/base.py
View File

@ -25,6 +25,7 @@ BASE_DIR = os.path.dirname(PROJECT_DIR)
INSTALLED_APPS = [
"dnscms",
"images",
"home",
"generic",
"associations",
@ -159,6 +160,7 @@ MEDIA_URL = "/media/"
# Wagtail settings
WAGTAIL_SITE_NAME = "dnscms"
WAGTAILIMAGES_IMAGE_MODEL = "images.CustomImage"
# Search
# https://docs.wagtail.org/en/stable/topics/search/backends.html
@ -184,6 +186,7 @@ GRAPPLE = {
"associations",
"events",
"venues",
"images",
],
"EXPOSE_GRAPHIQL": True,
}

30
dnscms/events/migrations/0026_alter_eventpage_featured_image.py Normal file
View File

@ -0,0 +1,30 @@
# Generated by Django 5.0.6 on 2024-05-15 01:40
import django.db.models.deletion
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
("events", "0025_delete_featuredeventsorderable"),
("images", "0002_alter_customimage_options_alter_customimage_alt"),
]
operations = [
migrations.RemoveField(
model_name="eventpage",
name="featured_image",
),
migrations.AddField(
model_name="eventpage",
name="featured_image",
field=models.ForeignKey(
blank=True,
help_text="Velg et bilde til bruk i programmet og andre visningsflater. Bør være et bilde eller en illustrasjon uten tekst – ikke gjenbruk et Facebook-cover ukritisk!",
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="images.customimage",
),
),
]

2
dnscms/events/models.py
View File

@ -127,7 +127,7 @@ class EventPage(Page):
# search_description: text (in promote panel)
featured_image = models.ForeignKey(
"wagtailimages.Image",
"images.CustomImage",
null=True,
blank=True,
on_delete=models.SET_NULL,

0
dnscms/images/__init__.py Normal file
View File

6
dnscms/images/apps.py Normal file
View File

@ -0,0 +1,6 @@
from django.apps import AppConfig
class ImagesConfig(AppConfig):
default_auto_field = 'django.db.models.BigAutoField'
name = 'images'

65
dnscms/images/migrations/0001_initial.py Normal file
View File

@ -0,0 +1,65 @@
# Generated by Django 5.0.6 on 2024-05-15 01:33
import django.db.models.deletion
import taggit.managers
import wagtail.images.models
import wagtail.models.media
import wagtail.search.index
from django.conf import settings
from django.db import migrations, models
class Migration(migrations.Migration):
initial = True
dependencies = [
('taggit', '0006_rename_taggeditem_content_type_object_id_taggit_tagg_content_8fc721_idx'),
('wagtailcore', '0093_uploadedfile'),
migrations.swappable_dependency(settings.AUTH_USER_MODEL),
]
operations = [
migrations.CreateModel(
name='CustomImage',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('title', models.CharField(max_length=255, verbose_name='title')),
('file', wagtail.images.models.WagtailImageField(height_field='height', upload_to=wagtail.images.models.get_upload_to, verbose_name='file', width_field='width')),
('width', models.IntegerField(editable=False, verbose_name='width')),
('height', models.IntegerField(editable=False, verbose_name='height')),
('created_at', models.DateTimeField(auto_now_add=True, db_index=True, verbose_name='created at')),
('focal_point_x', models.PositiveIntegerField(blank=True, null=True)),
('focal_point_y', models.PositiveIntegerField(blank=True, null=True)),
('focal_point_width', models.PositiveIntegerField(blank=True, null=True)),
('focal_point_height', models.PositiveIntegerField(blank=True, null=True)),
('file_size', models.PositiveIntegerField(editable=False, null=True)),
('file_hash', models.CharField(blank=True, db_index=True, editable=False, max_length=40)),
('alt', models.TextField(blank=True, help_text=('Er ikke synlig på nettsiden, men leses opp for de som bruker skjermlesere. Viktig for SEO og tilgjengelighet. Beskriv det du ser i bildet som til en blind person. F.eks. "Logo for Superforeningen" eller "Stemningsbilde fra konserten med Eminem"',), verbose_name='Alternativ bildetekst')),
('attribution', models.CharField(blank=True, help_text='Navn på fotograf, illustratør, organisasjon, e.l.', max_length=255, verbose_name='Kreditering')),
('collection', models.ForeignKey(default=wagtail.models.media.get_root_collection_id, on_delete=django.db.models.deletion.CASCADE, related_name='+', to='wagtailcore.collection', verbose_name='collection')),
('tags', taggit.managers.TaggableManager(blank=True, help_text=None, through='taggit.TaggedItem', to='taggit.Tag', verbose_name='tags')),
('uploaded_by_user', models.ForeignKey(blank=True, editable=False, null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.AUTH_USER_MODEL, verbose_name='uploaded by user')),
],
options={
'abstract': False,
},
bases=(wagtail.images.models.ImageFileMixin, wagtail.search.index.Indexed, models.Model),
),
migrations.CreateModel(
name='Rendition',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('filter_spec', models.CharField(db_index=True, max_length=255)),
('file', wagtail.images.models.WagtailImageField(height_field='height', storage=wagtail.images.models.get_rendition_storage, upload_to=wagtail.images.models.get_rendition_upload_to, width_field='width')),
('width', models.IntegerField(editable=False)),
('height', models.IntegerField(editable=False)),
('focal_point_key', models.CharField(blank=True, default='', editable=False, max_length=16)),
('image', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='renditions', to='images.customimage')),
],
options={
'unique_together': {('image', 'filter_spec', 'focal_point_key')},
},
bases=(wagtail.images.models.ImageFileMixin, models.Model),
),
]

22
dnscms/images/migrations/0002_alter_customimage_options_alter_customimage_alt.py Normal file
View File

@ -0,0 +1,22 @@
# Generated by Django 5.0.6 on 2024-05-15 01:40
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('images', '0001_initial'),
]
operations = [
migrations.AlterModelOptions(
name='customimage',
options={'permissions': [('choose_image', 'Can choose image')], 'verbose_name': 'image', 'verbose_name_plural': 'images'},
),
migrations.AlterField(
model_name='customimage',
name='alt',
field=models.CharField(blank=True, help_text=('Er ikke synlig på nettsiden, men leses opp for de som bruker skjermlesere. Viktig for SEO og tilgjengelighet. Beskriv det du ser i bildet som til en blind person. F.eks. "Logo for Superforeningen" eller "Stemningsbilde fra konserten med Eminem"',), max_length=512, verbose_name='Alternativ bildetekst'),
),
]

0
dnscms/images/migrations/__init__.py Normal file
View File

51
dnscms/images/models.py Normal file
View File

@ -0,0 +1,51 @@
from django.db import models
from django.utils.translation import gettext_lazy as _
from grapple.models import (
GraphQLString,
)
from wagtail.images.models import AbstractImage, AbstractRendition, Image
class CustomImage(AbstractImage):
alt = models.CharField(
max_length=512,
blank=True,
verbose_name="Alternativ bildetekst",
help_text=(
"Er ikke synlig på nettsiden, men leses opp for de som bruker skjermlesere. "
"Viktig for SEO og tilgjengelighet. "
"Beskriv det du ser i bildet som til en blind person. "
'F.eks. "Logo for Superforeningen" eller "Stemningsbilde fra konserten med Eminem"',
),
)
attribution = models.CharField(
max_length=255,
blank=True,
verbose_name="Kreditering",
help_text="Navn på fotograf, illustratør, organisasjon, e.l.",
)
admin_form_fields = Image.admin_form_fields + ("alt", "attribution")
@property
def default_alt_text(self):
return self.alt or self.title
class Meta(AbstractImage.Meta):
verbose_name = _("image")
verbose_name_plural = _("images")
permissions = [
("choose_image", "Can choose image"),
]
graphql_fields = [
GraphQLString("alt"),
GraphQLString("attribution"),
]
class Rendition(AbstractRendition):
image = models.ForeignKey(CustomImage, on_delete=models.CASCADE, related_name="renditions")
class Meta:
unique_together = (("image", "filter_spec", "focal_point_key"),)

30
dnscms/venues/migrations/0003_alter_venuepage_featured_image.py Normal file
View File

@ -0,0 +1,30 @@
# Generated by Django 5.0.6 on 2024-05-15 01:40
import django.db.models.deletion
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
("images", "0002_alter_customimage_options_alter_customimage_alt"),
("venues", "0002_venueindex"),
]
operations = [
migrations.RemoveField(
model_name="venuepage",
name="featured_image",
),
migrations.AddField(
model_name="venuepage",
name="featured_image",
field=models.ForeignKey(
blank=True,
help_text="Bilde av lokalet",
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="images.customimage",
),
),
]

2
dnscms/venues/models.py
View File

@ -22,7 +22,7 @@ class VenuePage(Page):
show_in_menus = False
featured_image = models.ForeignKey(
"wagtailimages.Image",
"images.CustomImage",
null=True,
blank=True,
on_delete=models.SET_NULL,

1
web/src/app/arrangementer/[slug]/page.tsx
View File

@ -37,6 +37,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
}
`);
const { data, error } = await getClient().query(eventBySlugQuery, {
slug: params.slug,
});

2
web/src/app/foreninger/[slug]/page.tsx
View File

@ -51,7 +51,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
{association.logo && (
<Image
src={association.logo.url}
alt=""
alt={`Logoen til ${association.title}`}
width={association.logo.width}
height={association.logo.height}
sizes="100vw"

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

@ -48,7 +48,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
{venue.featuredImage && (
<Image
src={venue.featuredImage.url}
alt=""
alt={venue.featuredImage.alt}
width={venue.featuredImage.width}
height={venue.featuredImage.height}
sizes="100vw"

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

@ -21,9 +21,7 @@ const VenueFragmentDefinition = graphql(`
}
}
featuredImage {
url
width
height
...Image
}
showAsBookable
floor

33
web/src/app/utleie/page.tsx
View File

@ -6,39 +6,6 @@ import Link from "next/link";
import { PageHeader } from "@/components/general/PageHeader";
import { BgPig } from "@/components/general/BgPig";
const VenueFragmentDefinition = graphql(`
fragment Venue on VenuePage {
__typename
id
slug
title
body {
id
blockType
field
... on RichTextBlock {
rawValue
value
}
}
featuredImage {
url
width
height
}
showAsBookable
floor
preposition
capabilityAudio
capabilityAudioVideo
capabilityBar
capabilityLighting
capacityLegal
capacityStanding
capacitySitting
}
`);
export default async function Page() {
const allVenuesQuery = graphql(`
query allVenues {

2
web/src/components/associations/AssociationItem.tsx
View File

@ -14,7 +14,7 @@ export const AssociationItem = ({
{association.logo && (
<Image
src={association.logo.url}
alt=""
alt={`Logoen til ${association.title}`}
width={0}
height={0}
sizes="20vw"

2
web/src/components/events/EventHeader.tsx
View File

@ -64,7 +64,7 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
{event.featuredImage && (
<Image
src={event.featuredImage.url}
alt=""
alt={event.featuredImage.alt}
width={event.featuredImage.width}
height={event.featuredImage.height}
sizes="100vw"

2
web/src/components/events/EventItem.tsx
View File

@ -32,7 +32,7 @@ export const EventItem = ({
{event.featuredImage && (
<Image
src={event.featuredImage.url}
alt=""
alt={event.featuredImage.alt}
width={0}
height={0}
sizes="20vw"

2
web/src/components/venues/VenueItem.tsx
View File

@ -10,7 +10,7 @@ export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
{venue.featuredImage && (
<Image
src={venue.featuredImage.url}
alt=""
alt={venue.featuredImage.alt}
width={0}
height={0}
sizes="20vw"

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

@ -25,11 +25,12 @@ const documents = {
"\n query allAssociations {\n index: page(\n contentType: \"associations.AssociationIndex\"\n urlPath: \"/home/foreninger/\"\n ) {\n ... on AssociationIndex {\n ...AssociationIndex\n }\n }\n associations: pages(contentType: \"associations.AssociationPage\") {\n ... on AssociationPage {\n ...Association\n }\n }\n }\n ": types.AllAssociationsDocument,
"\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 Venue on VenuePage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n url\n width\n height\n }\n showAsBookable\n floor\n preposition\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 body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n showAsBookable\n floor\n preposition\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n": types.VenueFragmentDoc,
"\n query allVenues {\n venues: pages(contentType: \"venues.VenuePage\") {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n ": types.AllVenuesDocument,
"\n fragment Home on HomePage {\n ... on HomePage {\n featuredEvents {\n id\n }\n }\n }\n": types.HomeFragmentDoc,
"\n query home {\n events: pages(contentType: \"events.EventPage\") {\n ...Event\n }\n home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n ... on HomePage {\n ...Home\n }\n }\n }\n ": types.HomeDocument,
"\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n url\n width\n height\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n": types.EventFragmentDoc,
"\n fragment Image on CustomImage {\n url\n width\n height\n alt\n attribution\n }\n": types.ImageFragmentDoc,
"\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n": types.EventFragmentDoc,
"\n query allEvents {\n events: pages(contentType: \"events.EventPage\") {\n ... on EventPage {\n ...Event\n }\n }\n eventCategories: eventCategories {\n ... on EventCategory {\n name\n slug\n showInFilters\n }\n }\n }\n": types.AllEventsDocument,
};
@ -98,7 +99,7 @@ export function graphql(source: "\n query venueBySlug($slug: String!) {\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 id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n url\n width\n height\n }\n showAsBookable\n floor\n preposition\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 id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n url\n width\n height\n }\n showAsBookable\n floor\n preposition\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 body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n showAsBookable\n floor\n preposition\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 id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n showAsBookable\n floor\n preposition\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.
*/
@ -114,7 +115,11 @@ export function graphql(source: "\n query home {\n events: pages(content
/**
* 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 Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n url\n width\n height\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n"): (typeof documents)["\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n url\n width\n height\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n"];
export function graphql(source: "\n fragment Image on CustomImage {\n url\n width\n height\n alt\n attribution\n }\n"): (typeof documents)["\n fragment Image on CustomImage {\n url\n width\n height\n alt\n attribution\n }\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 Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n"): (typeof documents)["\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

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

File diff suppressed because one or more lines are too long

11
web/src/lib/common.ts Normal file
View File

@ -0,0 +1,11 @@
import { graphql } from "@/gql";
const ImageFragmentDefinition = graphql(`
fragment Image on CustomImage {
url
width
height
alt
attribution
}
`);

4
web/src/lib/event.ts
View File

@ -38,9 +38,7 @@ const EventFragmentDefinition = graphql(`
}
}
featuredImage {
url
width
height
...Image
}
facebookUrl
ticketUrl