Uploaded video doesn't display

21

Okay after about 8 hours work I now have the following. The browser is displaying my page, just not my images or video. I’m trying really hard and I have a massive headache. I’ve been reading and rereading the Kirby website, but I need some help!

<div class="image-content">
	<?php $anyname =  $page->image_content()->toFiles();
	//so I have a 'collection' called anyname? The collection is the contents of the page image_content field? And this collection of images and videos is converted to files? Are they not files anyway?
	foreach($anyname as $files): 
		// here's the loopy thing? Not sure how this works or what it is?
		?>
		<?php if($anyname->type() == 'image'): ?>
			<img src="<?= $anyname->url() ?>" alt="<?= $anyname->alt() ?>" class="<?= $anyname->border() ?>">
			<?php if ($anyname->caption()->isNotEmpty()): ?>
				<p class="caption"><?= $anyname->caption() ?></p>
			<?php endif ?>
		<?php endif ?>

		<?php if($anyname->type() == 'video'): ?>
			<video>
				<source src="<?= $anyname->url() ?>" alt="<?= $anyname->alt() ?>" class="<?= $anyname->border() ?>">
			</video>
			<?php if ($anyname->caption()->isNotEmpty()): ?>
				<p class="caption"><?= $anyname->caption() ?></p>
			<?php endif ?>
		<?php endif ?>

	<?php endforeach ?>
</div>

I would call the collection $files, variables should make sense

I’d like to call my collection something else, so that I can’t get confused between the name of my collection and ‘files’ or ‘file’ - at least for now.

Once I get this to work, I intent to put the image and video code in a snippet, but for now I’d like to get the code to work in the template.

22

Please look at this code and try to understand what you are doing here and why it cannot possibly work.

In a foreach loop, the first element after the foreach keyword is the array or collection you loop through, the second element (after as) is the single element. That means, you then have to check for the type on this second element (like in the example code in the docs.

And if you name your variables properly, this immediately becomes more obvious as well:

<?php 
$files =  $page->image_content()->toFiles();
foreach($files as $file): ?>

<?php if($file->type() === 'image'): ?>
  <!-- code for image -->
<?php endif ?>

<?php if($file->type() === 'video'): ?>
  <!-- code for image -->
<?php endif ?>
<?php endforeach ?>
23

Okay so the name of my collection of images and videos is ‘files’ and the name of individual image and video files is ‘file’? But these could actually be called marmalade and moonshine?

24

I think you have asked the same question before, but yes, variables can be named anything within the limitations of the respective programming language.

Look up variables in PHP PHP: Basics - Manual.

It might make sense to study an introduction to PHP to get a grasp of the basics: variables, loops, conditions, basic data types etc. Also understanding error messages. Without a basic understanding of (PHP) programming, you will have a hard time.

Believe me, investing a bit of time in the basics will save you lots of time in the future.

25

Good suggestion. I don’t have a clue what a collection, variable, loop etc is, so a lot of your advice is going over my head. Any suggestions for a good introduction to php? The PHP: Basics - Manual link has already lost me.

26

This works!!! Yippee!!!

<div class="image-content">
	<?php 
	$files =  $page->image_content()->toFiles();
	foreach($files as $file): ?>

	<?php if($file->type() === 'image'): ?>
		<img src="<?= $file->url() ?>" alt="<?= $file->alt() ?>" class="<?= $file->border() ?>">
		<?php if ($file->caption()->isNotEmpty()): ?>
			<p class="caption"><?= $file->caption() ?></p>
		<?php endif ?>
	<?php endif ?>

	<?php if($file->type() === 'video'): ?>
		<video autoplay controls loop poster="<?= $file->poster() ?>" class="border">
			<source src="<?= $file->url() ?>">
		</video>
		<?php if ($file->caption()->isNotEmpty()): ?>
			<p class="caption"><?= $file->caption() ?></p>
		<?php endif ?>
	<?php endif ?>
	<?php endforeach ?>
</div>

But when I try and remove some of the code into snippets it doesn’t work:

<div class="image-content">
	<?php 
	$files =  $page->image_content()->toFiles();
	foreach($files as $file): ?>

	<?php if($file->type() === 'image'): ?>
		<?php snippet('image') ?>
	<?php endif ?>

	<?php if($file->type() === 'video'): ?>
		<?php snippet('video') ?>
	<?php endif ?>
	<?php endforeach ?>
</div>

Here’s my image.php snippet:

<img src="<?= $file->url() ?>" alt="<?= $file->alt() ?>" class="<?= $file->border() ?>">
<?php if ($file->caption()->isNotEmpty()): ?>
	<p class="caption"><?= $file->caption() ?></p>
<?php endif ?>

And my video.php snippet:

<video autoplay controls loop poster="<?= $file->poster() ?>" class="border">
	<source src="<?= $file->url() ?>">
</video>
<?php if ($file->caption()->isNotEmpty()): ?>
	<p class="caption"><?= $file->caption() ?></p>
<?php endif ?>
27

The snippet as you wrote it does not know what $file is. Yout have to pass $file object as an argument:

<?php if($file->type() === 'image'): ?>
	<?php snippet('image', ["file" => $file]) ?>
<?php endif ?>

<?php if($file->type() === 'video'): ?>
	<?php snippet('video', ["file" => $file]) ?>
<?php endif ?>
28

Thank you that works.

I though the snippet would simply inject the snippet code into the template, resulting in the code in my first example (see below) and so therefore it would know what $file is?

<?php if($file->type() === 'image'): ?>
	img src="<?= $file->url() ?>" alt="<?= $file->alt() ?>" class="<?= $file->border() ?>">
	<?php if ($file->caption()->isNotEmpty()): ?>
		<p class="caption"><?= $file->caption() ?></p>
	<?php endif ?>
<?php endif ?>
29

Nope, it does not work like that.

You can read and even watch a video about snippets in the Guide.

30

Okay, thanks. Looking at the Guide this isn’t as simple as adding the header and footer snippet… I have to “pass a variable to the snippet”?

31

It always depends on the data you need in the snippet. The global variables $page, $site and $kirby are available in the snippet without passing them, that’s why the header and footer snippets work as they are.

1 Like