How to add video into a list of images

The CMS Questions
1

I have a case study page, displaying a list of images. About half-way down the list I need a video.

Doing this with my old handcoded site was easy. But I don’t know how to add the video, in the Panel, into a list of images?

In my Panel I have a list of files/images, associated with the page, and I can order them as I wish. Is it possible to add the video into my list of files/images?

I’ve found the Kirby Vimeo helper <?= vimeo('http://vimeo.com/106181453') ?> but I don’t know how to add this to my list of images in the Panel

2

If you use an uploaded video, you can of course mix all types of files in a single files section (or a files field for that matter if you want to select them).

If you want to mix files with vimeo videos, a structure field would be the best option.

3

Can you give me some pointers on how to do a structure field?

Would I use this plugin? Structure field | Kirby CMS

My current Blueprint is:

title: Case study pages

columns:
	main:
		width: 2/3
		
		fields: 

			image_content:
				label: Images
				type: files

	sidebar:
		width: 1/3

		sections:
			section1:
				type: files
				label: All images

The sidebar automatically lists all the images inside the page folder. And then inside the main column I can select and order the images I want from the sidebar. Just not sure how I would also add Vimeo video into my image_content area?

4

Here is the documentation for the structure field: Structure | Kirby CMS

5

I’ve looked at that before, but didn’t understand it.

I’m still not sure how to add a Vimeo embed link to a div containing images

6

What exactly don’t you understand?

You could use a structure field like this:

medialinks:
  type: structure
  fields:
    type:
      type: radio
      options:
        - url
        - local
    url:
     type: url
     when: 
      type: url
    file:
      type: files
      max: 1
      when:
        type: local

(indentation might be off)

7

Thanks. I’m trying. I currently have a Blueprint:

title: Case study video pages

image_content:
	type: structure
	label: Images and video
	fields:
		file:
			type: files

But in the Panel I just get the following message

This page has no blueprint yet. You can define the setup in /site/blueprints/pages/case-study-video.yml

I’m guessing type: files will allow the client to upload files (images etc), but how do I allow them to add a link to a Vimeo video in the Structure field and have it embedded in the page?

8

I’m really not sure I need a structure field.

I simply want an area in the Panel where the client can upload images and link to Vimeo videos (that will embed in the page) and in the Panel have the ability to order them.

9

That’s why the structure field was suggested. Because obviously, you need to different fields to add urls or files. And you can only do this with a structure field, which let’s you then sort these items. How else would you want to do that? Since you cannot “upload” a link to the file system.

10

Okay I now have the following in my Blueprint:

title: Case study video pages

medialinks:
	type: structure
	fields:
		url:
			type: url
			when: 
				type: url
		file:
			type: files
			when:
				type: local

But I still get the error message in the Panel
This page has no blueprint yet. You can define the setup in /site/blueprints/pages/case-study-video.yml

Any idea what’s going on?

11

Please look at the documentation for blueprints, this is not complete. No fields or section key.

12

Okay I’ve now mentioned “fields” a lot

title: Case study video pages

sections:
	section1:
		type: fields
		fields:
		
			medialinks:
				type: structure
				fields:
					url:
						type: url
						when: 
							type: url
					file:
						type: files
						when:
							type: local

In the Panel it looks like I can add something, but when I click on it, it says “Maximum call stack size exceeded”. What does that mean?

Screenshot 2022-09-12 at 6.03.36 pm
Screenshot 2022-09-12 at 6.03.44 pm

13

You have removed the type field from my example above but are still using when, which doesn’t make sense. If I were you, I’d keep that field so that only one field can be filled in.

1 Like
14

Thank you so much, it’s working in the Panel and I sort of understand it! Thanks for putting in the extra help with the radio options.