My question;
is it possible to hide a file with a specific template in my media gallery on a page?
Situation:
I have a page called Work with subpages called Projects and on each project page I have a media gallery which contains both images and videos ( I would like the image and video to be in the same section so I can arrange the order as I see fit )
When I add a new file to the media gallery it will assign either a image or video blueprint which I have set up in the hook file.create:after
The reason I do it on the hook is that I also have a file upload on the video that takes an image which I use as poster for the video. It will assign a blueprint called poster.yml if the image file contains ‘-poster’:
This seems to be in one file (video.yml), but I don’t understand how these two parts relate. Would have been better to post the complete blueprint, if this information is needed to understand the problem.
title: Video
accept:
type: video
# set focus to false for video files.
focus: false
image:
type: query
query: file.videoCoverPhoto.toFile
ratio: 5/4
cover: true
columns:
- width: 1/3
sections:
information:
type: fields
fields:
videoDescription:
label: Video description
type: text
caption:
label: Video caption
type: textarea
buttons: false
placeholder: caption for video
videoCoverPhoto:
type: files
layout: list
label: Video poster
size: tiny
uploads:
template: poster
max: 1
- width: 1/3
sections:
meta:
type: fields
fields:
license:
label: License
help: Include license meta data for the image.
width: 1/2
type: toggle
default: true
text:
- "no"
- "yes"
copyright:
label: Copyright
help: Include copyright meta data for the image.
width: 1/2
type: toggle
default: true
text:
- "no"
- "yes"
videoDurationHours:
label: "Hours:"
help: "hours"
width: 1/3
type: time
display: HH
videoDurationMinutes:
label: "Minutes:"
help: ""
width: 1/3
type: time
display: mm
videoDurationSeconds:
label: "Seconds:"
help: ""
width: 1/3
type: time
display: ss
videoUploadDate:
label: upload date
type: date
videoWidth:
label: video width
type: number
width: 1/2
videoHeight:
label: video height
type: number
width: 1/2
toggleLoopable:
label: Is the video loopable?
type: toggle
default: true
text:
- "no"
- "yes"
- width: 1/3
sections:
color:
type: fields
fields:
videoForgroundColor:
type: color
label: Image forground color
help: Pick a destinct forground color from the image
videoBackgroundColorFrom:
type: color
label: Image background color
help: Pick a destinct background color from the image
videoBackgroundColorTo:
type: color
label: Image background color
help: Pick a destinct background color from the image
What I am trying to do its assign an image to the video which function as both a poster for the front end but also as a preview image so I can easily see what video file I moving around.
Here is a screenshot of how it looks now in the project page’s media gallery:
Yes, when using a query, you cannot sort manually anymore, that’s the downside.
The only way out of this dilemma would be to:
assign the same blueprint to all files that should be in the section, while moving the posters to a separate section. Downside: You would have to use conditions in your file blueprint to show video fields for videos and image fields for images.
or
Use separate sections per file type and add an additional files field where you would select and sort manually the files you want to see in the gallery.
Hi @texnixe thanks for the suggestions. I went with the second option and it’s now all working.
For anyone else looking for a similar solution here’s the blueprint:
#
# Blueprint for Projects
#
# page title
title: Project
# options for when creating a new work projects
create:
title: "{{ page.client }} – {{ page.project }}"
fields:
- client
- project
slug: "{{ page.client }}-{{ page.project }}"
# options for available status options
status:
listed: Published
draft: Draft
unlisted: Unlisted
#
# Content
#
tabs:
#
# TAB 1 - content
#
content:
label: Content
icon: text
columns:
# layout
media:
width: 1/2
fields:
#
# Project - media
#
mediaGallery:
type: files
layout: cards
size: medium
label: Project Media
uploads: false
help: select media, to upload see storage tab.
sortable: true
info: "{{ file.template }}"
#
# Project - information
#
information:
width: 1/2
fields:
#
# Project - client
#
client:
label: Project client
width: 1/2
type: select
required: true
placeholder: select client
help: Select client for project, or create new under Work > Settings
options:
type: query
query: site.find("work").clients.toStructure
text: "{{ item.clientname }}"
value: "{{ item.clientname }}"
#
# Project - title
#
project:
label: project title
width: 1/2
type: text
help: Enter the project name
required: true
# break
lineA:
type: line
#
# Project - categories
#
tags:
type: tags
label: Categories
min: 1
accept: options
help: Select one or more categories for the project, or create new under Work > Settings
options:
type: query
query: site.find("work").categories.toStructure
text: "{{ item.category }}"
value: "{{ item.category }}"
# break
lineB:
type: line
#
# Project - description
#
description:
type: textarea
size: small
buttons: false
toggleDisplayDescription:
label: Hide description on project page?
type: toggle
help: Hide the description on the project page but will keep it for SEO.
default: "no"
options:
- no
- yes
# break
lineC:
type: line
#
# Project - credit list
#
credits:
label: Credit list
type: structure
fields:
name:
label: name
type: text
role:
label: role
type: text
link:
label: link
type: url
#
# TAB 2 - media storage
#
storage:
label: Media
icon: import
fields:
#
# Media - Image uploading section
#
imageMedia:
label: Image upload
help: Upload project images here.
type: files
layout: cards
size: medium
uploads: image
info: "{{ file.template }}"
# break
lineD:
type: line
#
# Media - Video uploading section
#
videoMedia:
label: Video upload
help: Upload project videos here.
type: files
layout: cards
size: medium
uploads: video
info: "{{ file.template }}"
# break
lineF:
type: line
#
# Media - Audio uploading section
#
audioMedia:
label: Audio upload
help: Upload project audio here.
type: files
layout: cards
size: medium
uploads: audio
info: "{{ file.template }}"
thank you