forked from cms/tibi-svelte-starter
XXErste Collections für eine Media-Library. Weitere Collections für spätere neue Projekte hinzugefügt. (alles WorkInProgress)
This commit is contained in:
parent
2ab447274a
commit
969ebabd18
@ -6,7 +6,7 @@ name: articles
|
|||||||
uploadPath: ../media/articles
|
uploadPath: ../media/articles
|
||||||
meta:
|
meta:
|
||||||
# Navigationseintrag in der Admin-UI
|
# Navigationseintrag in der Admin-UI
|
||||||
label: { de: "Artikel auf der Seite", en: "Page articles" }
|
label: { de: "Artikel", en: "Articles" }
|
||||||
# Icon (Material UI) für den Navigationseintrag
|
# Icon (Material UI) für den Navigationseintrag
|
||||||
muiIcon: file-document-edit-outline
|
muiIcon: file-document-edit-outline
|
||||||
# Standardsortierung der Liste
|
# Standardsortierung der Liste
|
||||||
@ -19,18 +19,18 @@ meta:
|
|||||||
mediaQuery: "(max-width:599px)"
|
mediaQuery: "(max-width:599px)"
|
||||||
primaryText: path
|
primaryText: path
|
||||||
columns:
|
columns:
|
||||||
- article.general.public
|
- article.general.public
|
||||||
- article.content.title
|
- article.content.title
|
||||||
- article.general.position
|
- article.general.position
|
||||||
- article.general.sort
|
- article.general.sort
|
||||||
# Desktop
|
# Desktop
|
||||||
- type: table
|
- type: table
|
||||||
mediaQuery: "(min-width:600px)"
|
mediaQuery: "(min-width:600px)"
|
||||||
columns:
|
columns:
|
||||||
- article.general.public
|
- article.general.public
|
||||||
- article.content.title
|
- article.content.title
|
||||||
- article.general.position
|
- article.general.position
|
||||||
- article.general.sort
|
- article.general.sort
|
||||||
|
|
||||||
imageFilter:
|
imageFilter:
|
||||||
xs:
|
xs:
|
||||||
|
|||||||
359
api/collections/fields/_article.yml
Normal file
359
api/collections/fields/_article.yml
Normal file
@ -0,0 +1,359 @@
|
|||||||
|
name: article
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
widget: tabs
|
||||||
|
label:
|
||||||
|
de: Einstellungen zum Artikel
|
||||||
|
en: Article Setings
|
||||||
|
activeTab: 1
|
||||||
|
subFields:
|
||||||
|
- name: general
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
label:
|
||||||
|
de: Allgemein
|
||||||
|
en: General
|
||||||
|
css:
|
||||||
|
subFields:
|
||||||
|
- name: public
|
||||||
|
type: boolean
|
||||||
|
meta:
|
||||||
|
label:
|
||||||
|
de: Veröffentlicht
|
||||||
|
en: Public
|
||||||
|
helperText:
|
||||||
|
de: "Der Artikel wird auf der Seite angezeigt."
|
||||||
|
en: "This article is displayed on the page."
|
||||||
|
- name: publish_date
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
label:
|
||||||
|
de: Datum der Veröffentlichung
|
||||||
|
en: Release Date
|
||||||
|
css: "grid grid-50"
|
||||||
|
subFields:
|
||||||
|
- name: from
|
||||||
|
type: date
|
||||||
|
meta:
|
||||||
|
inputProps:
|
||||||
|
type: "datetime-local"
|
||||||
|
label:
|
||||||
|
de: Datum (ab)
|
||||||
|
en: Date (from)
|
||||||
|
- name: until
|
||||||
|
type: date
|
||||||
|
meta:
|
||||||
|
inputProps:
|
||||||
|
type: "datetime-local"
|
||||||
|
label:
|
||||||
|
de: Datum (bis)
|
||||||
|
en: Date (until)
|
||||||
|
- name: position
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Position auf der Seite
|
||||||
|
en: Position on page
|
||||||
|
defaultValue: []
|
||||||
|
choices:
|
||||||
|
- { id: "content", name: { de: "Inhaltsbereich", en: "Content Area" } }
|
||||||
|
- { id: "sidebar", name: { de: "Sidebar", en: "Sidebar" } }
|
||||||
|
- name: categories
|
||||||
|
type: string[]
|
||||||
|
meta:
|
||||||
|
widget: chipArray
|
||||||
|
label:
|
||||||
|
de: Position auf der Seite
|
||||||
|
en: Position on page
|
||||||
|
defaultValue: ["c1"]
|
||||||
|
autocomplete: true
|
||||||
|
choices:
|
||||||
|
- { id: "c1", name: { de: "Category 1", en: "" } }
|
||||||
|
- { id: "c2", name: { de: "Category Number 2", en: "" } }
|
||||||
|
- { id: "c3", name: { de: "Best Category 3", en: "" } }
|
||||||
|
- name: sort
|
||||||
|
type: number
|
||||||
|
meta:
|
||||||
|
inputProps:
|
||||||
|
type: number
|
||||||
|
placeholder: 0
|
||||||
|
label: { de: "Sortierung", en: "Sorting" }
|
||||||
|
helperText:
|
||||||
|
de: "1...5...10...100"
|
||||||
|
en: "1...5...10...100"
|
||||||
|
- name: content
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
label:
|
||||||
|
de: Inhalt
|
||||||
|
en: Content
|
||||||
|
css:
|
||||||
|
subFields:
|
||||||
|
- name: slug
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Permalink", en: "Permalink" }
|
||||||
|
- name: title
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Titel", en: "Title" }
|
||||||
|
- name: subtitle
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Untertitel", en: "Subtitle" }
|
||||||
|
- name: types
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
widget: tabs
|
||||||
|
label:
|
||||||
|
de: Inhalt dieses Artikel
|
||||||
|
en: Article Content
|
||||||
|
activeTab: 0
|
||||||
|
subFields:
|
||||||
|
- name: teaser
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: richtext
|
||||||
|
label: { de: "Teaser-Text des Artikel", en: "Article Teaser Text" }
|
||||||
|
- name: details
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: richtext
|
||||||
|
label: { de: "Detail-Text des Artikel", en: "Article Detail Text" }
|
||||||
|
- name: contentMedia
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
label:
|
||||||
|
de: Medien
|
||||||
|
en: Media
|
||||||
|
css:
|
||||||
|
subFields:
|
||||||
|
- name: mediaFiles
|
||||||
|
type: object[]
|
||||||
|
meta:
|
||||||
|
label: { de: "Bilder", en: "Images" }
|
||||||
|
subFields:
|
||||||
|
- name: title
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Datei-Titel", en: "File Title" }
|
||||||
|
- name: alternateText
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Alternativer Text", en: "Alternate Text" }
|
||||||
|
- name: id
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Technischer Name / ID", en: "Technical name / ID" }
|
||||||
|
- name: file
|
||||||
|
type: file
|
||||||
|
meta:
|
||||||
|
widget: image
|
||||||
|
label: { de: "Datei", en: "File" }
|
||||||
|
- name: caption
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Bildunterschrift", en: "Caption" }
|
||||||
|
- name: contentAttachments
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
label:
|
||||||
|
de: Anhänge / Downloads
|
||||||
|
en: Attachments / Downloads
|
||||||
|
css:
|
||||||
|
subFields:
|
||||||
|
- name: attachments
|
||||||
|
type: object[]
|
||||||
|
meta:
|
||||||
|
label: { de: "Anhänge", en: "Attachments" }
|
||||||
|
subFields:
|
||||||
|
- name: title
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Datei-Titel", en: "File Title" }
|
||||||
|
- name: id
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Technischer Name / ID", en: "Technical name / ID" }
|
||||||
|
- name: file
|
||||||
|
type: file
|
||||||
|
meta:
|
||||||
|
label: { de: "", en: "" }
|
||||||
|
- name: layout
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
widget: tabs
|
||||||
|
label:
|
||||||
|
de: Layout
|
||||||
|
en: Layout
|
||||||
|
css:
|
||||||
|
subFields:
|
||||||
|
- name: variant
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Erscheinungsbild
|
||||||
|
en: Appearance
|
||||||
|
defaultValue: ["_self"]
|
||||||
|
choices:
|
||||||
|
- { id: "top", name: { de: "Artikelbild oben (volle Breite)", en: "Article picture top (full width)" } }
|
||||||
|
- { id: "right", name: { de: "Artikelbild rechts (volle Höhe)", en: "Article picture right (full height)" } }
|
||||||
|
- { id: "bottom", name: { de: "Artikelbild unten (volle Breite)", en: "Article picture left (full width)" } }
|
||||||
|
- { id: "left", name: { de: "Artikelbild links (volle Höhe)", en: "Article picture left (full height)" } }
|
||||||
|
- { id: "after-teaser", name: { de: "Artikelbild unter Teaser (volle Breite)" , en: "Article picture under teaser (full width)" } }
|
||||||
|
- { id: "top-left", name: { de: "Artikelbild oben links", en: "Article picture above left" } }
|
||||||
|
- { id: "top-right", name: { de: "Artikelbild oben rechts", en: "Article picture above right" } }
|
||||||
|
- { id: "bottom-left", name: { de: "Artikelbild unten links", en: "Article picture below left" } }
|
||||||
|
- { id: "bottom-right", name: { de: "Artikelbild unten rechts", en: "Article picture below right" } }
|
||||||
|
- name: margin
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
label: { de: "Abstand nach außen (Margin)", en: "Distance to the outside (Margin)" }
|
||||||
|
subFields:
|
||||||
|
- name: top
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Oben
|
||||||
|
en: Top
|
||||||
|
choices:
|
||||||
|
- { id: "", name: "Kein Abstand" }
|
||||||
|
- { id: "mt-xs", name: "Sehr kleiner Abstand" }
|
||||||
|
- { id: "mt-sm", name: "Kleiner Abstand" }
|
||||||
|
- { id: "mt-md", name: "Normal" }
|
||||||
|
- { id: "mt-lg", name: "Großer Abstand" }
|
||||||
|
- { id: "mt-xl", name: "Sehr großer Abstand" }
|
||||||
|
- name: right
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Rechts
|
||||||
|
en: Right
|
||||||
|
choices:
|
||||||
|
- { id: "", name: "Kein Abstand" }
|
||||||
|
- { id: "mr-xs", name: "Sehr kleiner Abstand" }
|
||||||
|
- { id: "mr-sm", name: "Kleiner Abstand" }
|
||||||
|
- { id: "mr-md", name: "Normal" }
|
||||||
|
- { id: "mr-lg", name: "Großer Abstand" }
|
||||||
|
- { id: "mr-xl", name: "Sehr großer Abstand" }
|
||||||
|
- name: bottom
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Unten
|
||||||
|
en: Bottom
|
||||||
|
choices:
|
||||||
|
- { id: "", name: "Kein Abstand" }
|
||||||
|
- { id: "mb-xs", name: "Sehr kleiner Abstand" }
|
||||||
|
- { id: "mb-sm", name: "Kleiner Abstand" }
|
||||||
|
- { id: "mb-md", name: "Normal" }
|
||||||
|
- { id: "mb-lg", name: "Großer Abstand" }
|
||||||
|
- { id: "mb-xl", name: "Sehr großer Abstand" }
|
||||||
|
- name: left
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Links
|
||||||
|
en: Left
|
||||||
|
choices:
|
||||||
|
- { id: "", name: "Kein Abstand" }
|
||||||
|
- { id: "ml-xs", name: "Sehr kleiner Abstand" }
|
||||||
|
- { id: "ml-sm", name: "Kleiner Abstand" }
|
||||||
|
- { id: "ml-md", name: "Normal" }
|
||||||
|
- { id: "ml-lg", name: "Großer Abstand" }
|
||||||
|
- { id: "ml-xl", name: "Sehr großer Abstand" }
|
||||||
|
- name: padding
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
label: { de: "Abstand nach innen (Padding)", en: "Distance inside (Padding)" }
|
||||||
|
subFields:
|
||||||
|
- name: top
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Oben
|
||||||
|
en: Top
|
||||||
|
choices:
|
||||||
|
- { id: "", name: "Kein Abstand" }
|
||||||
|
- { id: "pt-xs", name: "Sehr kleiner Abstand" }
|
||||||
|
- { id: "pt-sm", name: "Kleiner Abstand" }
|
||||||
|
- { id: "pt-md", name: "Normal" }
|
||||||
|
- { id: "pt-lg", name: "Großer Abstand" }
|
||||||
|
- { id: "pt-xl", name: "Sehr großer Abstand" }
|
||||||
|
- name: right
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Rechts
|
||||||
|
en: Right
|
||||||
|
choices:
|
||||||
|
- { id: "", name: "Kein Abstand" }
|
||||||
|
- { id: "pr-xs", name: "Sehr kleiner Abstand" }
|
||||||
|
- { id: "pr-sm", name: "Kleiner Abstand" }
|
||||||
|
- { id: "pr-md", name: "Normal" }
|
||||||
|
- { id: "pr-lg", name: "Großer Abstand" }
|
||||||
|
- { id: "pr-xl", name: "Sehr großer Abstand" }
|
||||||
|
- name: bottom
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Unten
|
||||||
|
en: Bottom
|
||||||
|
choices:
|
||||||
|
- { id: "", name: "Kein Abstand" }
|
||||||
|
- { id: "pb-xs", name: "Sehr kleiner Abstand" }
|
||||||
|
- { id: "pb-sm", name: "Kleiner Abstand" }
|
||||||
|
- { id: "pb-md", name: "Normal" }
|
||||||
|
- { id: "pb-lg", name: "Großer Abstand" }
|
||||||
|
- { id: "pb-xl", name: "Sehr großer Abstand" }
|
||||||
|
- name: left
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Links
|
||||||
|
en: Left
|
||||||
|
choices:
|
||||||
|
- { id: "", name: "Kein Abstand" }
|
||||||
|
- { id: "pl-xs", name: "Sehr kleiner Abstand" }
|
||||||
|
- { id: "pl-sm", name: "Kleiner Abstand" }
|
||||||
|
- { id: "pl-md", name: "Normal" }
|
||||||
|
- { id: "pl-lg", name: "Großer Abstand" }
|
||||||
|
- { id: "pl-xl", name: "Sehr großer Abstand" }
|
||||||
|
- name: link
|
||||||
|
type: object
|
||||||
|
meta:
|
||||||
|
label:
|
||||||
|
de: Verlinkung
|
||||||
|
en: Link
|
||||||
|
css:
|
||||||
|
subFields:
|
||||||
|
- name: url
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Ziel-URL", en: "Target URL" }
|
||||||
|
- name: text
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Link-Beschriftung", en: "Link-Text" }
|
||||||
|
- name: target
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Zielfenster
|
||||||
|
en: Target
|
||||||
|
defaultValue: ["_self"]
|
||||||
|
choices:
|
||||||
|
- { id: "_self", name: "(Standardwert) gleicher Tab oder Seite" }
|
||||||
|
- { id: "_blank", name: "Neuer Tab oder Fenster" }
|
||||||
|
- { id: "_parent", name: "Elternfenster" }
|
||||||
127
api/collections/galleries.yml
Normal file
127
api/collections/galleries.yml
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
###############################################################
|
||||||
|
# Galleries
|
||||||
|
###############################################################
|
||||||
|
|
||||||
|
# Name/URL-Anteil der Kollektion
|
||||||
|
name: galleries
|
||||||
|
uploadPath: ../media/galleries
|
||||||
|
|
||||||
|
# Metaangaben zur Kollektion welche in der Admin-UI verwendet werden können
|
||||||
|
meta:
|
||||||
|
# Navigationseintrag in der Admin-UI
|
||||||
|
label: { de: "Galerien", en: "Galleries" }
|
||||||
|
# Icon (Material UI) für den Navigationseintrag
|
||||||
|
muiIcon: image-multiple-outline
|
||||||
|
# Identifizierung eines Eintrags für z.B. Select-Boxen in der Admin-UI
|
||||||
|
rowIdentTpl: { twig: "{{ path }}" }
|
||||||
|
# Standardsortierung der Liste
|
||||||
|
defaultSort: { field: "path", order: "ASC" }
|
||||||
|
# Admin-Backend Ansichten
|
||||||
|
defaultImageFilter: s
|
||||||
|
views:
|
||||||
|
# Mobile Darstellung
|
||||||
|
- type: simpleList
|
||||||
|
mediaQuery: "(max-width:599px)"
|
||||||
|
primaryText: name
|
||||||
|
columns:
|
||||||
|
- name
|
||||||
|
- variant
|
||||||
|
# Desktop
|
||||||
|
- type: table
|
||||||
|
mediaQuery: "(min-width:600px)"
|
||||||
|
columns:
|
||||||
|
- name
|
||||||
|
- variant
|
||||||
|
|
||||||
|
imageFilter:
|
||||||
|
xs:
|
||||||
|
- fit: true
|
||||||
|
height: 90
|
||||||
|
width: 90
|
||||||
|
resampling: lancos
|
||||||
|
quality: 60
|
||||||
|
s:
|
||||||
|
- fit: true
|
||||||
|
height: 300
|
||||||
|
width: 300
|
||||||
|
resampling: lancos
|
||||||
|
quality: 60
|
||||||
|
m:
|
||||||
|
- fit: true
|
||||||
|
height: 600
|
||||||
|
width: 600
|
||||||
|
resampling: lancos
|
||||||
|
quality: 60
|
||||||
|
l:
|
||||||
|
- fit: true
|
||||||
|
height: 1200
|
||||||
|
width: 1200
|
||||||
|
resampling: lancos
|
||||||
|
quality: 60
|
||||||
|
xl:
|
||||||
|
- fit: true
|
||||||
|
height: 2000
|
||||||
|
width: 2000
|
||||||
|
resampling: lancos
|
||||||
|
quality: 60
|
||||||
|
|
||||||
|
permissions:
|
||||||
|
public:
|
||||||
|
methods:
|
||||||
|
get: true
|
||||||
|
post: false
|
||||||
|
put: false
|
||||||
|
delete: false
|
||||||
|
user:
|
||||||
|
methods:
|
||||||
|
get: true
|
||||||
|
post: false
|
||||||
|
put: false
|
||||||
|
delete: false
|
||||||
|
# token als Zusatzsicherung gegen Spam, mehr siehe Hook
|
||||||
|
"token:${PUBLIC_TOKEN}":
|
||||||
|
methods:
|
||||||
|
get: false
|
||||||
|
post: false
|
||||||
|
put: false
|
||||||
|
delete: false
|
||||||
|
|
||||||
|
# Feldliste der Kollektion
|
||||||
|
fields:
|
||||||
|
- name: name
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Name der Galerie", en: "Gallery Name" }
|
||||||
|
- name: variant
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
widget: select
|
||||||
|
label:
|
||||||
|
de: Erscheinungsbild
|
||||||
|
en: Appearance
|
||||||
|
defaultValue: ["default"]
|
||||||
|
choices:
|
||||||
|
- { id: "default", name: { de: "Standard", en: "Default" } }
|
||||||
|
- { id: "simple-with-title", name: { de: "Einfach mit Titel", en: "Simple with title" } }
|
||||||
|
- name: items
|
||||||
|
type: object[]
|
||||||
|
meta:
|
||||||
|
label: { de: "Bilder der Galerie", en: "Gallery Images" }
|
||||||
|
subFields:
|
||||||
|
- name: file
|
||||||
|
type: file
|
||||||
|
meta:
|
||||||
|
widget: image
|
||||||
|
label: { de: "Datei", en: "File" }
|
||||||
|
- name: title
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Titel", en: "Title" }
|
||||||
|
- name: description
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Beschreibung", en: "Description" }
|
||||||
|
- name: alt
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Alternativer Text", en: "Alternative caption" }
|
||||||
91
api/collections/mediaLibrary.yml
Normal file
91
api/collections/mediaLibrary.yml
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
###############################################################
|
||||||
|
# Media Library
|
||||||
|
###############################################################
|
||||||
|
|
||||||
|
# Name/URL-Anteil der Kollektion
|
||||||
|
name: media-library
|
||||||
|
uploadPath: ../media/media-library
|
||||||
|
|
||||||
|
# Metaangaben zur Kollektion welche in der Admin-UI verwendet werden können
|
||||||
|
meta:
|
||||||
|
# Navigationseintrag in der Admin-UI
|
||||||
|
label: { de: "Medien", en: "Media Library" }
|
||||||
|
# Icon (Material UI) für den Navigationseintrag
|
||||||
|
muiIcon: file-document-multiple
|
||||||
|
# Identifizierung eines Eintrags für z.B. Select-Boxen in der Admin-UI
|
||||||
|
rowIdentTpl: { twig: "{{ path }}" }
|
||||||
|
# Standardsortierung der Liste
|
||||||
|
defaultSort: { field: "path", order: "ASC" }
|
||||||
|
# Admin-Backend Ansichten
|
||||||
|
defaultImageFilter: s
|
||||||
|
views:
|
||||||
|
- type: mediaLibrary
|
||||||
|
mediaQuery: "(min-width:0px)"
|
||||||
|
columns:
|
||||||
|
- file
|
||||||
|
- title
|
||||||
|
|
||||||
|
imageFilter:
|
||||||
|
xs:
|
||||||
|
- fit: true
|
||||||
|
height: 90
|
||||||
|
width: 90
|
||||||
|
resampling: lanczos
|
||||||
|
quality: 60
|
||||||
|
s:
|
||||||
|
- fit: true
|
||||||
|
height: 300
|
||||||
|
width: 300
|
||||||
|
resampling: lanczos
|
||||||
|
quality: 60
|
||||||
|
m:
|
||||||
|
- fit: true
|
||||||
|
height: 600
|
||||||
|
width: 600
|
||||||
|
resampling: lanczos
|
||||||
|
quality: 60
|
||||||
|
l:
|
||||||
|
- fit: true
|
||||||
|
height: 1200
|
||||||
|
width: 1200
|
||||||
|
resampling: lanczos
|
||||||
|
quality: 60
|
||||||
|
xl:
|
||||||
|
- fit: true
|
||||||
|
height: 2000
|
||||||
|
width: 2000
|
||||||
|
resampling: lanczos
|
||||||
|
quality: 60
|
||||||
|
|
||||||
|
permissions:
|
||||||
|
public:
|
||||||
|
methods:
|
||||||
|
get: true
|
||||||
|
post: false
|
||||||
|
put: false
|
||||||
|
delete: false
|
||||||
|
user:
|
||||||
|
methods:
|
||||||
|
get: true
|
||||||
|
post: false
|
||||||
|
put: false
|
||||||
|
delete: false
|
||||||
|
# token als Zusatzsicherung gegen Spam, mehr siehe Hook
|
||||||
|
"token:${PUBLIC_TOKEN}":
|
||||||
|
methods:
|
||||||
|
get: false
|
||||||
|
post: false
|
||||||
|
put: false
|
||||||
|
delete: false
|
||||||
|
|
||||||
|
# Feldliste der Kollektion
|
||||||
|
fields:
|
||||||
|
- name: file
|
||||||
|
type: file
|
||||||
|
meta:
|
||||||
|
widget: mediaLibraryFile
|
||||||
|
label: { de: "Datei", en: "File" }
|
||||||
|
- name: title
|
||||||
|
type: string
|
||||||
|
meta:
|
||||||
|
label: { de: "Titel des Dokuments/Bild", en: "Document/Image Title" }
|
||||||
@ -8,6 +8,7 @@ meta:
|
|||||||
# Liste aller möglichen Kollektionen (Listen, Seiten...) zum Projekt
|
# Liste aller möglichen Kollektionen (Listen, Seiten...) zum Projekt
|
||||||
collections:
|
collections:
|
||||||
- !include collections/general.yml
|
- !include collections/general.yml
|
||||||
|
- !include collections/mediaLibrary.yml
|
||||||
- !include collections/articles.yml
|
- !include collections/articles.yml
|
||||||
- !include collections/content.yml
|
- !include collections/content.yml
|
||||||
- !include collections/contact_form.yml
|
- !include collections/contact_form.yml
|
||||||
|
|||||||
73
src/components/page/Article.svelte
Normal file
73
src/components/page/Article.svelte
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { navigate } from "svelte-routing"
|
||||||
|
|
||||||
|
import { apiBaseURL } from "../../config"
|
||||||
|
|
||||||
|
export let article: SWArticle
|
||||||
|
export let cssClass: string = ""
|
||||||
|
export let showDetails: boolean = false
|
||||||
|
|
||||||
|
const getImageSrc = () => {
|
||||||
|
return `${apiBaseURL}articles/${article?.id}/${article?.image?.src}?filter=l`
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<article class="{article?.position} {cssClass}">
|
||||||
|
{#if article?.position !== "content"}
|
||||||
|
<div
|
||||||
|
class="article-image"
|
||||||
|
style="background-image: url({getImageSrc()});"
|
||||||
|
>
|
||||||
|
{#if article?.title}
|
||||||
|
<div class="article-title">{@html article?.title}</div>
|
||||||
|
{/if}
|
||||||
|
{#if article?.position === "top" || article?.position === "end-of-content"}
|
||||||
|
{#if article?.subtitle}
|
||||||
|
<div class="article-subtitle">
|
||||||
|
{@html article?.subtitle}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if article?.position !== "top"}
|
||||||
|
<div class="article-content">
|
||||||
|
{#if article?.position === "content"}
|
||||||
|
{#if article?.title}
|
||||||
|
<div class="article-title">{@html article?.title}</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
{#if article?.position === "content" || article?.position === "top-of-content"}
|
||||||
|
{#if article?.subtitle}
|
||||||
|
<div class="article-subtitle mb-md">
|
||||||
|
{@html article?.subtitle}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !showDetails && article?.content}
|
||||||
|
<div class="mb-lg">
|
||||||
|
{@html article?.content}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if showDetails && article?.details?.length}
|
||||||
|
<div class="mb-lg">
|
||||||
|
{@html article?.details}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !showDetails && article?.details}
|
||||||
|
<div
|
||||||
|
class="article-link"
|
||||||
|
on:click="{() => {
|
||||||
|
navigate('/articles/' + article?.id)
|
||||||
|
}}"
|
||||||
|
>
|
||||||
|
Details
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</article>
|
||||||
114
src/components/page/Galleries.svelte
Normal file
114
src/components/page/Galleries.svelte
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { fade } from "svelte/transition"
|
||||||
|
|
||||||
|
import { getGalleries } from "../../api"
|
||||||
|
import { apiBaseURL } from "../../config"
|
||||||
|
|
||||||
|
import Modal from "./Modal.svelte"
|
||||||
|
|
||||||
|
export let article
|
||||||
|
let galleries: Gallery[]
|
||||||
|
|
||||||
|
const loadLinkedGalleries = async () => {
|
||||||
|
galleries = await getGalleries(article?.galleries)
|
||||||
|
}
|
||||||
|
loadLinkedGalleries()
|
||||||
|
|
||||||
|
let selectedImage = null
|
||||||
|
let selectedGallery = null
|
||||||
|
const showDetails = (gallery, image) => {
|
||||||
|
selectedImage = image
|
||||||
|
selectedGallery = gallery
|
||||||
|
console.log(selectedGallery.items.indexOf(image))
|
||||||
|
}
|
||||||
|
const closeDetails = () => {
|
||||||
|
selectedImage = null
|
||||||
|
selectedGallery = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const next = () => {
|
||||||
|
let nextImage
|
||||||
|
let nextIndex = selectedGallery.items.indexOf(selectedImage) + 1
|
||||||
|
if (!selectedGallery.items[nextIndex]) {
|
||||||
|
nextImage = selectedGallery.items[0]
|
||||||
|
} else {
|
||||||
|
nextImage = selectedGallery.items[nextIndex]
|
||||||
|
}
|
||||||
|
selectedImage = nextImage
|
||||||
|
}
|
||||||
|
|
||||||
|
const prev = () => {
|
||||||
|
let prevImage
|
||||||
|
let prevIndex = selectedGallery.items.indexOf(selectedImage) - 1
|
||||||
|
if (prevIndex < 0) {
|
||||||
|
prevImage = selectedGallery.items[selectedGallery.items.length - 1]
|
||||||
|
} else {
|
||||||
|
prevImage = selectedGallery.items[prevIndex]
|
||||||
|
}
|
||||||
|
selectedImage = prevImage
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleKeydown = (e) => {
|
||||||
|
if (e.keyCode === 37) {
|
||||||
|
prev()
|
||||||
|
}
|
||||||
|
if (e.keyCode === 39) {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window on:keydown="{handleKeydown}" />
|
||||||
|
|
||||||
|
<section class="galleries">
|
||||||
|
{#each galleries || [] as gallery}
|
||||||
|
<div class="gallery gallery-{gallery.variant}">
|
||||||
|
{#each gallery.items || [] as image, index}
|
||||||
|
<div
|
||||||
|
class="gallery-item"
|
||||||
|
on:click="{() => showDetails(gallery, image)}"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="{apiBaseURL}galleries/{gallery.id}/{image.file
|
||||||
|
.src}?filter=s"
|
||||||
|
alt="{image.alt ? image.alt : image.title}"
|
||||||
|
/>
|
||||||
|
{#if gallery.variant === "simple-with-title"}
|
||||||
|
<div class="gallery-item-title">
|
||||||
|
{image.title}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#if selectedGallery && selectedImage}
|
||||||
|
<Modal show="{selectedGallery && selectedImage}">
|
||||||
|
<div transition:fade class="gallery-image-details">
|
||||||
|
<img
|
||||||
|
src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage
|
||||||
|
.file.src}?filter=l"
|
||||||
|
alt="{selectedImage.alt
|
||||||
|
? selectedImage.alt
|
||||||
|
: selectedImage.title}"
|
||||||
|
on:click="{closeDetails}"
|
||||||
|
/>
|
||||||
|
<div class="gallery-info">
|
||||||
|
{#if selectedImage.title}
|
||||||
|
<div class="gallery-title">
|
||||||
|
{selectedImage.title}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if selectedImage.description}
|
||||||
|
<div class="gallery-description">
|
||||||
|
{selectedImage.description}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="prev" on:click|preventDefault="{prev}">‹</div>
|
||||||
|
<div class="next" on:click|preventDefault="{next}">›</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
35
src/components/page/Modal.svelte
Normal file
35
src/components/page/Modal.svelte
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { scale } from "svelte/transition"
|
||||||
|
|
||||||
|
export let show: boolean = false
|
||||||
|
export let size: string = "md"
|
||||||
|
|
||||||
|
const clickOnBackground = () => {
|
||||||
|
show = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="modal-wrapper" class:show on:click="{clickOnBackground}">
|
||||||
|
<div class="modal modal-{size}" transition:scale on:click|stopPropagation="{() => {}}">
|
||||||
|
{#if $$slots.close}
|
||||||
|
<div class="modal-close">
|
||||||
|
<slot name="close" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if $$slots.header}
|
||||||
|
<div class="modal-header">
|
||||||
|
<slot name="header" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if $$slots.default}
|
||||||
|
<div class="modal-content">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if $$slots.header}
|
||||||
|
<div class="modal-footer">
|
||||||
|
<slot name="footer" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user