I’m pretty new to Kirby, so far I like it a lot.
I’ve been working on a project where I can have multiple image slideshows on one page and to have an ability to add images through panel (if it’s even possible)
does anyone have an idea how I can implement it?
thanks in advance for your time, guys
One option - and probably the nicest one - would be the gallery field by @timoetting. You can either add a gallery field for each slideshow or use the gallery field within a structure field.
Edit: I just realized that the gallery field does not seem to work within a structure field.
Just for a better understanding: You mean something like this? http://www.standardissuedesign.com/projects/art-direction
Yes, it’s the same idea.
I’m also wondering is there a way to link image thumbnail to the same image in a slideshow on a different page.
Thanks for looking into it
Thanks, I’ll give it a try
You could do that, you’d have to “construct” that target url based on the structure of your slideshow and the anchor name of your image.
Not all slideshow allow #anchors which are used to direct the browser to a specific portion of the page.
that’s similar to what I’m trying to build.
did you use any plugins?
thanks in advance for your help
thanks, I’ll try that
I’m thinking of another idea where thumbnails on another page are synchronized with the images from the slideshow.
basically when I upload pictures to slideshow the thumbnails appear simultaneously.
I hope it makes sense
That’s also something you can do. If you want some help at any point let us know!
thank you so much for your help.
I’m very new to Kirby and I definitely need your help to figure out how to do it.
for I’m looking into possible plug-ins to have multiple slideshows on page. any suggestions on which you think is the better one?
I’ve only created one website with Kirby so far and didn’t have a chance to work with slideshows yet.
sorry, my previous response was meant to be sent to you
Alright, I’ll get back to you tomorrow and we’ll find a solution!
thank you so much for you time
2 Likes
Alright, time to ask a lot of questions 
-
Have you built your front-end already? Kirby is agnostic to the way your front-end is built, and the “plugin” or “solution” you decide to choose for the actual slideshow is not going to have an impact on Kirby. Note: It may actually have an impact if your slideshow requires all images to be loaded in Javascript. I’d recommend finding a slideshow snippet that has a simple html structure so you’ll easily adapt it to Kirby. What Kirby will give you is a collection of images you selected in a field in the panel (and which field doesn’t really matter here), and for each image, you will create a new slide and output the image. More on that below*.
-
Can you describe the structure of the page(s) on which you want the slideshow(s) and thumbnail(s) to appear?
=> My understanding: You want a page with several slideshows and another page with thumbnails of all the images in those slideshows. Correct? -
What progress have you made? Do you have any template or blueprint we can start from?
*More on the slideshow
A simple structure for a slideshow could be a list of images (this is pure HTML):
<ul class="slideshow">
<li>
<img src="image1.jpg"/>
</li>
<li>
<img src="image2.jpg"/>
</li>
<li>
<img src="image3.jpg"/>
</li>
<li>
<img src="image4.jpg"/>
</li>
</ul>
Now let’s say you have a structure field called slideshow1, in which you selected images in a field called img, with a caption in a field called alt, transforming the code above to dynamically create slides from your images could look something like this:
<ul class="slideshow">
<?php foreach ($page->slideshow1()->toStructure() as $slide):?>
<li><img src="<?= $slide->img()->toFile()->url() ?>" alt="<?= $slide->alt()->html()?>" /></li>
<?php endforeach ?>
</ul>
And you could repeat that a second time on the same page, changing the field name “slideshow1” to the name of your second slideshow.
Note: the code above is untested but should give you a general idea of the structure. For more robust code, you need to check that the image exists before trying to output it, otherwise, you could get breaking errors in your site.
To check that an image exists, replace the single line starting with <li> above by the following:
<?php if($img = $slide->img()->toFile()): ?>
<li><img src="<?= $img->url() ?>" alt="<?= $slide->alt()->html()?>" /></li>
<?php endif ?>
About thumbnails on another page
Now if you want to display thumbnails of all those images on another page, it would be very similar, only you would need to pass the page id to Kirby:
<ul class="thumbnails">
// Getting slidesfrom first slideshow
<?php $slides= page('slideshow-page')->slideshow1()->toStructure(); ?>
// Adding slidesfrom second slide show to previous list
<?php $thumbnails->add(page('slideshow-page')->slideshow2()->toStructure()); ?>
// Treating all slides as **$thumbnail** and outputing in a list
<?php foreach ($slides as $thumbnail):?>
<li class="thumbnail"><img src="<?= $thumbnail->img()->toFile()->url() ?>" alt="<?= $thumbnail->alt()->html()?>" /></li>
<?php endforeach ?>
</ul>
Note: again, please check that the image exists before trying to output it.
I hope this was helpful. I haven’t had the chance to test any of the code above, it was all written directly on the forum, and I appologize if there are typos or errors… 
1 Like
Wow, thank you so much for such quick reply.
I’m still working on front-end right now.
The website is pretty simple, it will have only three pages.
Yeah, you’re right, there will be one page with several slideshows. I’m thinking of using what you have described - a simple snippet where I can add images in panel.
and there will also be an index page that will have thumbnails from each slider ( these I want to be generated with images I add to the slideshows in panel).
the last page is just simple text, which is already done.
I’ll integrate those parts of the code you provided and let you know how it works.
Thanks again for your help!!!
1 Like
Hi,
Thanks again.
I’m working on it and let you know how it goes with the code.
No worries @katialove ! Don’t hesitate to come back and chat if there’s anything not working / you don’t understand
Hi @Thiousi
I’m trying to add slideshow to my home template, but It doesn’t seem to work. Could you please tell me what I’m doing wrong?
The blueprint is:
title: Homepage
files: true
fields:
title:
label: title
type: text
required: true
gallery1:
label: gallery1
type: gallery
required: true
gallery2:
label: gallery2
type: gallery
required: true
gallery3:
label: gallery2
type: gallery
required: true
Here’s a pice of code I’m trying to add to create first slideshow with Gallery1:
<div class="slideshow1">
<ul class="rslides" id="slider">
<?php foreach($page->gallery1()->yaml() as $image): ?>
<?php if($img = $page->image($image)): ?>
<li>
<img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" />
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>
Thank you so much for your help
What exactly does not work? Don’t you get any output at all? Do you get an error message?
@texnixe No error message, but I don’t see slider.
To check if slider works I used this code that adds all the images from the folder:
<div class="slideshow1">
<ul class="rslides" id="slider">
<?php foreach($page->pictures()->yaml() as $image): ?>
<?php if($img = $page->image($image)): ?>
<li>
<img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" />
<!-- <p class="caption">This is a caption</p> -->
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>
But my idea is to have multiple slideshows on one page, so that’s why I have different galleries in blueprint file.
I hope it makes sense