Global slideshow with Repeatable and Thumbnails module

[kasperwf]

So, I've just started fiddling around with PW and so far I love it!

I'm rather new to the PW way of thinking, code wise, so I hope you can help me with this thing I'm trying to do. And by all means, tell me if its a completely foolish method I'm trying. (I would then prefer to be guided in the right direction then ;-))

I've created a repeatable for the basic-page template, which consists of an image and a text field and, and what I want to do is create a jQuery slideshow with ul's and li's, where each slide has an image with a text description. So a rather simple slideshow actually.

I've created a template for the repeatable loop and I also use the "Thumbnails" module for cropping the images back end. All that works perfectly.

Now, my question is: Is it possible to create a "global" slideshow which is included in the top of all pages, instead of creating and uploading a repeatable with image for every single menu item?

And if yes, could I make the "default" slideshow only appear if the current page doesn't have a custom slideshow repeatable defined? Meaning that the default slideshow would appear on all pages where no other slideshow is created.

I hope you can help

Kasper

[Wanze]

Hi kasperwf, welcome to the forums!

For the slideshow you want to achieve, I think you don't need a repeater since you can already store multiple images with description in the Image-Fieldtype itself.

Check out the options of your image field:

Under "Details", set the option "Maximum files allowed" to zero. This way, you can add as many images as you want (with description).

You can also give the description field more than one row in the "Input" section of the options.

For the global slideshow, I would create a separate page which stores all global images & descriptions. This page can be hidden, as it serves only to store the global images.

Then in your template code, you could do something like this:

//Check if the actual page has some images stored in a field called images
if ($page->images && count($page->images)) {
 foreach ($page->images as $image) {
   //..output page images slideshow
 }
} else {
 //Display global slideshow
 $global_page = $pages->get("/path_to_your_global_page/");
 foreach ($global_page->images as $image) {
   //... output global images slideshow
 }
}

[kasperwf]

Hi Wanze!

Thanks for your fast reply, I'll try it out ASAP :-D

I failed to mention I also have added an URL field as well as a text field (for the link button), to create a button on each slide, which is why I didn't use the standard page images.

[Wanze]

Alrighty, then the repeater is of course a good solution

For the second part with the global slideshow, I would do the same with the repeater field.

=> Check if the current page has a repeater-field with more than zero entries, otherwise grab all the stuff from the repeater of the global page.

[kasperwf]

Thanks again

I really enjoy working with PW compared to a lot of the other framework-kind-of thingies that are out there. So easy to understand and get started with.

[kasperwf]

And of course I already have an additional question

So, I could just CSS my way out of this one, but I just wanted to try something to see if I could get it to work with what I had in mind instead, and now, 2 hours later, here I am, looking for help again.

Check this out: (I haven't integrated your solutions yet, Wanze, one step at a time )

if(count($page->slides)) echo "<div id='slideshow'><ul>";
foreach($page->slides as $slide) {
$slide->prefix = "wideslide_";
echo $slide->render();
}
if(count($page->slides)) echo "</ul></div>";

The container div will always be a fixed width and height - for each site I create (maybe vary in height from front to sub pages) - so as I said, I could just create a CSS definition width the dimensions of the container div in it, and then change it when I wanted to, but for me - and my projects, it would be ideal if the code above could take the dimensions of the wideslide setting from the image-crop module, and inline CSS it into the div tag. That way, I can also just change it back end without having to mess around the CSS files.

I've looked at the $image->width properties in the cheat sheet, and I've also tried the getThumb('wideslide') function for the Thumbnails module pack, but it seems like it doesn't quite work (or rather, I can't seem to get it to work) with Repeatables - it returns an empty string or fails with a big red "admin only" message, when I try to get too creative.

Actually, above problem is why I also - as you can see in my code above - have created a "prefix" variable for the template that renders the li's, which just then throws the prefix into the image URL. Please tell me if there's a smarter and better way to do this, I really want to learn how to do this the most correct way.

My template file:

echo "<li>";
echo " <h2>{$page->slide_title}</h2>";
echo " <p>{$page->slide_description}</p>";
if($page->slide_url != "" && $page->slide_button_text != "")
echo " <a href='{$page->slide_url}' class='btn'>{$page->slide_button_text}</a>";
echo" <img src='{$page->slide_image->url}{$page->prefix}{$page->slide_image}' alt='{$page->slide_title}' />";
echo "</li>";

[Wanze]

Not sure if I can help you out since I've never used the Thumbnails module so far.

I looked a bit how the Thumbnail module works.

I think the problem is that the method "getThumb('wideslide')" returns the url to your cropped image.

This is just a String and not an PageImage object, so you can't access the property "width".

As a workaround, you could find out the width of the thumbnail with php:

//Find out the width of the cropped image before the loop
$width = 0;
$first_slide = $page->slides->eq(0);
if ($first_slide) {
 $crop_url = $first_slide->slide_image->eq(0)->getThumb('wideslide');
 $crop_path = $config->paths->root . $crop_url;
 if (file_exists($crop_path)) {
   $size = getimagesize($crop_path);
   $width = $size[0];
 }
}
if (count($page->slides)) {
 echo "<div id='slideshow'";
 if ($width) echo " style='width: {$width}'></div>";
 foreach($page->slides as $slide) {
 /// continue

In your repeater-template, you should get the correct cropped image url with:

$img_url = $page->slide_image->eq(0)->getThumb('wideslide');
echo" <img src='{$img_url}' alt='{$page->slide_title}' />";

I have not tested my code and the chances that I just had an overcomplicated idea and there are some errors are quite big.

Maybe some Processwire-crack comes up with a better idea

[diogo]

i'm at the mobile, and can't confirm this, but i seem to remember that with the thumbnail module you define the width in the settings of the field. so you can safely know in advance what will be the size of the images generated by it

[kasperwf]

Yeah I know the settings of the "wideslide", so I could just as we'll type it into the CSS, but I would like to retrieve the width and height from the setting automatically front end, so I won't have to change the CSS file if I choose to change the dimensions of the "wideslide" thumbnail setting. ;-)

[diogo]

that setting must be easily accessible on the template. maybe if you have a look at the module code you will find how. sorry that i can't help more now...

[apeisa]

that setting must be easily accessible on the template. maybe if you have a look at the module code you will find how. sorry that i can't help more now...

There isn't a method to grab width or height of single thumbnail. Never actually even thought about it, since you have defined those by yourself (they aren't actually dynamic values).

I have been thinking of making cropping little less custom and work little like size(100,100) works. So you could say:

$page->image->crop('thumbnail')->url;

Then it would actually return pageimage and it would have all the methods normal pageimage has.