Referencing a blog page's image in custom kirbytag

Hi, I’m trying to use a custom kirbytag which creates a <figure> tag with srcset attributes. It uses thumb() to automatically resize an image for different screen sizes.

The code for this kirby tag is here: https://gist.github.com/mbecher/0106039f494258728d52

I am trying to create a “post” snippet that automatically resizes the thumbnail image using this kirbytag.

I am using page()->children()->flip() to show the last 3 posts:

<ul>
  <?php foreach(page('blog')->children()->flip()->visible()->limit(3) as $post): ?>
    <?php snippet('posts',array('post' => $post)) ?>
  <?php endforeach ?>
</ul>

…which uses this snippet to display the blog post’s thumbnail:

<?php if($image = $post->images()->sortBy('sort', 'asc')->nth(1)): ?>
    <div class="thumbnail">
      <a href="<?php echo $post->url() ?>">
        <?php echo kirbytag(array('figure'=>$image,'width'=>'500','alt'=>$post->title()->html())); ?>
      </a>
    </div>
<?php endif ?>

My problem is, this code does not work. I have tried passing $image and $image->url() and a few other random helpers.

What should I be passing in order for the custom kirbytag “figure” to recognize the correct image associated with this post?

Thanks so much for your help.

I may be wrong but I don’t think you’re supposed to use a Kirby tag for your case.
Kirbytags are used inside a Kirby text field.
Have you tried using a snippet or a plug-in instead?

You probably need to pass a filename rather than the image object.

@Thiousi Kirtytags can also be used standalone via the kirbytag helper: https://getkirby.com/docs/cheatsheet/helpers/kirbytag

1 Like

@texnixe didn’t know that. Thanks for sharing.

I’m confused as to best practices regarding whether to use a controller, a module, a snippet or a Kirbytag.

Controllers, modules, snippets and Kirbytags have different use-cases:

  • Controllers help with extracting logic out of the template. They can be used if you want to filter, sort, group etc. pages or if you want to validate a contact form and send an email. All of this code had to be directly in the template before, which bloated it and wasn’t very elegant. Controllers make it possible to move this code to a file that just contains logic, no template (HTML) code.
  • The new registry allows to register templates, snippets, blueprints, routes etc. from a plugin. It makes it possible to keep all of that inside the plugin. Before it existed, users had to copy the other code to the respective directories within /site.
  • The core components allow to override core functionality of Kirby, like the templating, thumb generation etc.
  • Snippets are used to keep templates DRY. They contain template code that is used in several templates (like headers and footers). You can also use snippets to structure your templates in a better way.
  • Kirbytags can be run from within Kirbytext. All of the above are backend components that are run from PHP, while Kirbytags are exposed to the editor. Because you sometimes need Kirbytags from the template, there’s a helper for that as stated above, but it’s not the main use-case.

I hope this information helps. :slight_smile:

2 Likes

Thanks all for the very helpful information.

I tried using $image->filename() as @texnixe suggested, but that didn’t work either. I have tried just about every $file function that seemed like it might be relevant.

I’m going to go ahead and try adapting this kirbytag as a snippet or plugin instead, as @Thiousi suggested.

Thanks again!

This is great! I’ve read the full docs but don’t recall seeing this laid out so clearly. Did I miss it?
If not it may be a good addition in the dev guide. Just thinking out loud here sorry for deviating the topic. @seadour if you find a solution, let us know!

1 Like

An overview of the advanced features is a great idea! :slight_smile:

Okay I found a plugin someone made to do this, and I am using it instead.

It’s at https://github.com/jbeyerstedt/kirby-plugin-thumbExt

<?php echo ThumbExt($image, array('width' => 500, alt => $post->title(), 'srcset' => '2x, 3x')) ?>

1 Like

Great to know you found your solution!