Image in Kirbytag and then reuse in template

Kirby 3 Questions 🤔
1

Hi there,

as already solved in the other thread how to use a image in a Kirbytag, there seems to be another problem now. I use the following Kirbytag:

<?php
  'youtube' => [
    'attr' => [
      'poster'
    ],
    'html' => function($tag) {
      dump($tag->poster);
      if ($tag->file($tag->poster)) {
        $poster = $tag->file($tag->poster)->url();
      } else {
        $poster = '';
      }
      dump($poster);
    }
  ]
?>

All is working fine … but now, I must use this Kirbytext in my Template.

echo kirbytag([
  'youtube' => $page->youtube_id(),
  'poster' => $page->youtube_poster()->toFile()->filename()
]);

All is working as expected, the dump() method gives me in the first dump() exactly the same filename when testing with page AND Kirbytag. But however, I can’t get it working that I “get” the image with the page. The second dump() is always empty. So the $tag->file() method is not working in this case. Does anybody know why?

2

Could you please post the complete tag?

3

Sure … but like said above, the Tag is working perfectly!

/* YOUTUBE */
  
  'youtube' => [
    'attr' => [
      'ratio',
      'start',
      'poster',
      'bw',
      'width',
      'height'
    ],
    
    'html' => function($tag) {

      $youtube_id = $tag->youtube;
      
      if(empty($youtube_id)) {
        
        $youtube_id = '1Q2pRCbLyOI';
        
      } else {
        
        $youtube_id = $youtube_id;
        
      }

      $ratio = $tag->ratio;
      
      if(empty($ratio)) {
        
        $ratio = '16by9';
        
      } else {
        
        $ratio = $ratio;
        
      }

      $start = $tag->start;
      
      if(empty($start)) {
        
        $start = '0';
        
      } else {
        
        $start = $start;
        
      }
      
      $bw = $tag->bw;
      
      if(empty($bw)) {
        
        $bw = 'false';
        
      } else {
        
        $bw = $bw;
        
      }
      
      $width = $tag->width;
      
      if(empty($width)) {
        
        $width = null;
        
      } else {
        
        $width = $width;
        
      }
      
      $height = $tag->height;
      
      if(empty($height)) {
        
        $height = null;
        
      } else {
        
        $height = $height;
        
      }
      
      dump($tag->poster);
      
      if ($tag->file($tag->poster)) {
        
        $poster = ' style="background-image: url(' . $tag->file($tag->poster)->thumb(['grayscale' => $bw, 'width' => $width, 'height' => $height, 'crop' => 'center'])->url() . ');"';

      } else {
        
        $poster = '';
        
      }
      
      dump($poster);

      $youtube_code  = '<div class="locked-youtube-container">';
      $youtube_code .= '  <div class="locked-youtube-preview embed-responsive embed-responsive-' . $ratio . '"' . $poster . '>';
      $youtube_code .= '    <a class="locked-youtube-show" href="javascript:;" data-youtube-id="' . $youtube_id . '" data-youtube-ratio="' . $ratio . '" data-youtube-start="' . $start . '">';
      $youtube_code .= '      <i class="fal fa-play"></i>';
      $youtube_code .= '    </a>';
      $youtube_code .= '    <div class="locked-youtube-notice"><sup>*</sup>Mit einem Klick auf <u>den Play Button</u> werden Daten von YouTube geladen und übertragen. Mehr Informationen in unserer <a href="' . url('datenschutz') . '" title="Datenschutzerklärung">Datenschutzerklärung</a></div>';
      $youtube_code .= '  </div>';
      $youtube_code .= '</div>';


      
      return $youtube_code;

    }
  ]
4

are you sure the dump() will not stop further execution of the kirbytag? have you tried without?

5

Yes, have also tested without the dump method. The dump I have only included to see if the output is the same

6

One thing that would work is to use the image() helper:

if ($file = image($tag->poster)) {
                
    $poster = ' style="background-image: url(' . $file->thumb(['grayscale' => $bw, 'width' => $width, 'height' => $height, 'crop' => 'center'])->url() . ');"';
        
} else {
                
    $poster = '';
                
}
7

EDIT: unfortunatelly there appear now some strange bugs with this method. When I upload an image to that page, the image is automatically taken …

Also strange, when I dump before and after the Kirbytag, all of the output is on top of the page and not like the original position (top and bottom of the video)

8

Does this only happen when the poster attribute is empty? Then we could fix it like this:

if ($tag->poster !== '' && $file = image($tag->poster)) {
9

Hi Sonja,

your nearly right :slight_smile: Tried with your solution but that didn’t work. But what seems to work is this (not with two ==)

if ($tag->poster != '' && $file = image($tag->poster)) { }

But I have generally to say that something with Kirbytags and Images is not working. Very often when I change some of the Tagsettings, for example change the width, the new image is not generated. I rename then the image, save, and rename again to force Kirby to generate the Thumbs new.

10

In your custom tag? Can you give me an example?