Display Image or Video

Kirby 3 Solved ✅
#1

Hi there

Looking for a way to display either one image OR one video from my “news” blueprint and getting stuck. I tried a few things (below), but I’m new to kirby and not a php pro so could use some help. Thank you in advance!

<?php if($pages->find('news')->$filterBy('type', 'image'): ?>

<?php else($pages->find('news')->$filterBy('type', 'video'):?> 
<video source src="<?= $pages->find('news')->file() ?>" type="video/mp4" id="news-img" controls></video>
<?php endif ?>
#2

Do you want to get the image/video from the page folder or from a field where you select the file?

In any case, using the $ sign before a method doesn’t make sense. Assuming you want to fetch the file from the page folder:

<?php if ($page = page('news')): ?>
  <?php if ($image = $page->files()->filterBy('type', 'image')->first()): ?>
    <img src="<?= $image->url() ?>" alt="">
  <?php elseif ($video =  $page->files()->filterBy('type', 'video')->first()): ?>
    <video source src="<?= video->url() ?>" type="<?= $video->mime() ?>" id="news-img" controls></video>
  <?php endif ?>
<?php endif ?>
#3

Thanks for your quick response.
When I put this code in it produces a syntax error for the video tag.

It is a one page site and I have a blueprint for this section which allows any file to be uploaded, but only one to be selected at a time:

sections:
  content:
    type: fields
    fields:
      marquee:
        label: Marquee News
        type: text
      overlayimage:
        label: Overlay Image or Video
        type: files
        multiple: false
        max: 1
      caption:
        label: Overlay Image Caption
        type: textarea

When I upload an image or video through the panel, it goes into a page folder “news” but I only want the one selected in the backend to display.

Thank you!

#4

You were calling the news page in your first code example, so I was assuming the files were located there.

So you are calling this code in a section snippet? Could you please provide an outline of your content structure?

To fetch a file object from a field, you can use the toFile() method:

<?php if ($file = $page->overlayimage()->toFile()): ?>
  <?php if ($file->type() === 'image'): ?>
    <!--  do stuff for image -->
  <?php endif ?>
  <?php if ($file->type() === 'video'): ?>
   <!--  do stuff for video -->
  <?php endif ?>
<?php endif ?>

Note that if this happens in a section snippet and you are using a different variable to refer to the page (e.g. $section) then you have to adapt the code snippet.

#5

I have separate folders in the content folder for different areas of content on the page (ie. “news” “about” etc.) which also have separate blueprints and have been pulling content into my templates / snippets like this:

<?= $pages->find('news')->caption()->kt() ?> <?= $site->find('about')->description()->kt() ?>

I have a header and footer snippet and home template which calls them. This particular code for the overlay image is in the header snippet.
I can give you the site url if that helps.

Tried this, but no img or video tag appears:

<?php if ($file = $page->overlayimage()->toFile()): ?> <?php if ($file->type() === 'image'): ?> 
<img src="<?= $image()->url() ?>" id="news-img"/>
<?php endif ?> <?php if ($file->type() === 'video'): ?> <?php endif ?> <?php endif ?>
#6

What is the name of the blueprint you posted above? I’m still confused as to where the file is supposed to be located? In which page?

#7

it’s in blueprints > pages > news.yml

#8 
<?php if ($page = page('news')): ?>
    <?php if ($file = $page->overlayimage()->toFile()): ?>
        <?php if ($file->type() === 'image'): ?>
            <!--  do stuff for image -->
        <?php endif ?>
        <?php if ($file->type() === 'video'): ?>
             <!--  do stuff for video -->
         <?php endif ?>
    <?php endif ?>
<?php endif ?>

If this doesn’t fix it for you, feel free to upload your project somewhere and provide a link via PM.

1 Like
#9

It works now, thank you so so much!