Tag/Shortcut for Lightbox

Kirby 2 Questions 🤔
1

Hi Guys,
with this code I call the Lightbox (Fancybox3) with a picture:

<a href="image.jpg" data-fancybox data-caption="My caption" class="galerie" rel="galerie-2">
 <img src="thumbnail.jpg" alt="" />
</a>

Works great. However, I need next to the picture still a thumbnail and the URL to it. Does anyone know a shortcut or has a corresponding tag built, with the insertion of pictures and galleries in the blog is simplified?

2

Check out the gallery plugin: https://github.com/wottpal/kirby-lightbox-gallery

I’m not quite sure I understand correctly, you can always create a thumbnail from an image, if you don’t need art directed thumbnails.

3

@texnixe this guy seems to be a bit lazy to read the docs himself. i already have a long conversation with him via PM. while it’s an very individual matter, there is no all in one solution.

@hendrik
other than that maybe starting small with easier things is the right option there, instead of getting things done by other people which you don’t understand…

so there’s always multiple ways, as i suggested him via pm, going the

<?php foreach($page->images() as $image): ?>
 ....
....
<?php endforeach ?>

route is much more novice-friendly.

the custom tag i have been writing is for baguettebox and using focusCrop to get a lightbox done via kirbytext without too much hassle… maybe you can use that and change it to work for fancybox.

<?php
// Please Note, that a slideshow as well as galerie field based on imgage/checkboxes form is being used here to select, while the shortcode only used to tell where to display a slideshow....
kirbytext::$tags['galerie'] = array(
  'attr' => array(
    'text'
  ),
  'html' => function($tag) {
		$output = null;
    $output .= '<div class="gallery-'.$tag->attr('galerie').'">';
		if($galerie = $tag->page()->galerie()){
      foreach($galerie->split() as $slides){
        if($tag->file($slides)){
          $output .= '<a href="'.$tag->file($slides)->url().'"><img src="'.$tag->file($slides)->focusCrop(250,200)->url().'" class="width-25"/></a>';
        }
      }
		}
    $output .= '</div>';
    $output .= '<script>baguetteBox.run(".gallery-'.$tag->attr('galerie').'",';
    $output .= '{';
        // Custom options
    $output .= '});</script>';

    return $output;

  }
);

and another one using responsiveslides.js (slider)


<?php

kirbytext::$tags['slideshow'] = array(
  'attr' => array(
    'text'
  ),
  'html' => function($tag) {
		$output = null;
    $output .= '<ul class="rslides">';
		if($slide = $tag->page()->slideshow()){
      foreach($slide->split() as $slides){
        if($tag->file($slides)){
          $output .= '<li><img src="'.$tag->file($slides)->url().'" /></li>';
        }
      }
		}
    $output .= '</ul>';


    return $output;

  }
);
4

Well, yes, there are multiple options to achieve the same thing, provided that you have the knowledge to implement them or are willing to hire someone to do it for you if it is beyond your skills. Kirby is not like Wordpress where you drop in plugin after plugin that do the things for you until you end up with a horribly bloated site.

With Kirby, you get a fast site with just what you need, provided you can do without an “Eierlegende Wollmichsau” and get your hands dirty with coding.