Set up image gallery structure field
This commit is contained in:
Paul Nicoué
parent
2e9d72eb16
commit
00b2118e2c
5 changed files with 77 additions and 84 deletions
|
|
@ -2,27 +2,15 @@
|
|||
// KIRBY PANEL CUSTOMIZATION
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Textarea headline buttons
|
||||
// Structure field gallery
|
||||
|
||||
.k-textarea-field {
|
||||
.k-field-name-image_gallery {
|
||||
|
||||
.k-toolbar {
|
||||
table {
|
||||
|
||||
.k-dropdown {
|
||||
|
||||
.k-button:nth-of-type(2),
|
||||
.k-button:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
tbody {
|
||||
--bubble-size: 7.5em;
|
||||
--table-row-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Visual image crop field properties
|
||||
|
||||
.kirby-imagecrop-field {
|
||||
|
||||
.k-column:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,12 @@
|
|||
title: Image
|
||||
accept:
|
||||
mime: image/jpeg, image/png
|
||||
columns:
|
||||
left:
|
||||
width: 3/4
|
||||
fields:
|
||||
caption:
|
||||
label:
|
||||
en: Caption
|
||||
fr: Légende
|
||||
type: writer
|
||||
when: false
|
||||
toolbar:
|
||||
inline: false
|
||||
nodes: false
|
||||
marks:
|
||||
- bold
|
||||
- italic
|
||||
- '|'
|
||||
- link
|
||||
- email
|
||||
- '|'
|
||||
- clear
|
||||
help:
|
||||
en: "Informative text displayed below the image."
|
||||
fr: "Texte informatif affiché sous l'image."
|
||||
alt_text:
|
||||
label:
|
||||
en: Alternative text
|
||||
fr: Texte alternatif
|
||||
type: text
|
||||
help:
|
||||
en: "Short description displayed if the image can't be loaded and used by screen readers."
|
||||
fr: "Courte description affichée si l'image ne peut être chargée et utilisée par les lecteurs d'écran."
|
||||
right:
|
||||
width: 1/4
|
||||
fields:
|
||||
related_image:
|
||||
label:
|
||||
en: Related image
|
||||
fr: Image associée
|
||||
type: files
|
||||
query: site.find('media-library').images
|
||||
uploads:
|
||||
parent: site.find('media-library')
|
||||
template: image
|
||||
multiple: false
|
||||
layout: cards
|
||||
size: small
|
||||
image:
|
||||
ratio: 1/1
|
||||
# help:
|
||||
# en: ""
|
||||
# fr: ""
|
||||
fields:
|
||||
alt_text:
|
||||
label:
|
||||
en: Alternative text
|
||||
fr: Texte alternatif
|
||||
type: text
|
||||
help:
|
||||
en: "Short description displayed if the image can't be loaded (also used by screen readers)."
|
||||
fr: "Courte description affichée si l'image ne peut être chargée (également utilisée par les lecteurs d'écran)."
|
||||
|
|
|
|||
|
|
@ -4,12 +4,59 @@ fields:
|
|||
label:
|
||||
en: Image gallery
|
||||
fr: Galerie d'images
|
||||
type: files
|
||||
query: site.find('media-library').images
|
||||
uploads:
|
||||
parent: site.find('media-library')
|
||||
template: image
|
||||
min: 2
|
||||
layout: cards
|
||||
image:
|
||||
ratio: 1/1
|
||||
type: structure
|
||||
columns:
|
||||
main_image:
|
||||
width: 1/3
|
||||
related_image:
|
||||
width: 1/3
|
||||
caption:
|
||||
width: 1/3
|
||||
fields:
|
||||
main_image:
|
||||
label:
|
||||
en: Main image
|
||||
fr: Image principale
|
||||
type: files
|
||||
query: site.find('media-library').images
|
||||
uploads:
|
||||
parent: site.find('media-library')
|
||||
template: image
|
||||
multiple: false
|
||||
layout: cards
|
||||
image:
|
||||
ratio: 1/1
|
||||
width: 1/2
|
||||
related_image:
|
||||
label:
|
||||
en: Related image
|
||||
fr: Image associée
|
||||
type: files
|
||||
query: site.find('media-library').images
|
||||
uploads:
|
||||
parent: site.find('media-library')
|
||||
template: image
|
||||
multiple: false
|
||||
layout: cards
|
||||
image:
|
||||
ratio: 1/1
|
||||
width: 1/2
|
||||
caption:
|
||||
label:
|
||||
en: Caption
|
||||
fr: Légende
|
||||
type: writer
|
||||
toolbar:
|
||||
inline: false
|
||||
nodes: false
|
||||
marks:
|
||||
- bold
|
||||
- italic
|
||||
- '|'
|
||||
- link
|
||||
- email
|
||||
- '|'
|
||||
- clear
|
||||
# help:
|
||||
# en: "Informative text displayed below the image."
|
||||
# fr: "Texte informatif affiché sous l'image."
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
|
||||
return function ($site) {
|
||||
|
||||
// Get image files section content
|
||||
$images = $site->image_gallery()->toFiles();
|
||||
// Get items from image gallery structure field
|
||||
$galleryItems = $site->image_gallery()->toStructure();
|
||||
|
||||
// Get contact fields content
|
||||
$email = $site->email();
|
||||
$instagram = $site->instagram();
|
||||
|
||||
return [
|
||||
'images' => $images,
|
||||
'galleryItems' => $galleryItems,
|
||||
'email' => $email,
|
||||
'instagram' => $instagram,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -68,9 +68,10 @@
|
|||
<div class="splide" aria-label="{{ site.title }}'s artwork gallery">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
{% for image in images %}
|
||||
{% for galleryItem in galleryItems %}
|
||||
{% set mainImage = galleryItem.main_image().toFile() %}
|
||||
<li class="splide__slide">
|
||||
<img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
|
||||
<img class="splide__image" src="{{ mainImage.url }}" srcset="{{ mainImage.srcset() }}" alt="{{ mainImage.alt_text }}">
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue