Forums

Image Preloading for the Slideshow Block.

Permalink 2 users found helpful
I am trying to improve the smoothness of the slideshow block experience for a client's site.

http://mckinleyarchitects.com/

Though each image will fade out smoothly, the next image is still loading and doesn't fade in. It abruptly appears or loads slowly from the top down. This only happens the first time through the images; after that the images have loaded and fade smoothly from one to another.

My client's server has had speed issues from the start(I tried to get them on something faster but they wouldn't budge), which I think has a lot to do with it, but if I can at least get the images to play smoothly the first time through it would help.

I don't know enough about it to try and add preloading - but if anyone else has done it or could help me figure it out - it would be so appreciated.
rickychapman
 
rickychapman replied on at Permalink Reply
rickychapman
Don't mean to be a pain and bump this, but I'm under the gun and not sure how to get this working right.

I feel like this has to be something someone has done, if you've gotten the slideshow block images to preload, I would love some advice.

Thanks again.
jordanlev replied on at Permalink Reply
jordanlev
Hi,
Not sure why you haven't gotten a response (in the future, you might have better luck with the "Building With Concrete5" forum as it seems to be more active than the others).

Here's how you can add preloading to the slideshow block:
Copy this file:
YOURSITE/concrete/blocks/slideshow/view.php

to a new folder you'll have to create:
YOURSITE/blocks/slideshow/

(note that the new folder is in your site's top-level "blocks" directory, NOT inside "concrete/blocks"!)

Now edit the newly-copied file ( YOURSITE/blocks/slideshow/view.php ) and at the very bottom, add this chunk of code:
<div style="display: none;">
   <!-- Preload images -->
   <?php foreach ($images as $imgInfo): ?>
   <img src="<?php echo $imgInfo['url']; ?>" />
   <?php endforeach; ?>
</div>


-Jordan
snebold replied on at Permalink Reply
snebold
I tried it and all it did was mess up the slideshow so that it repeated the images in my slideshow down the page.
jordanlev replied on at Permalink Reply
jordanlev
You may have put the code in a bad place (like inside the slideshow element instead of outside it). Can you post your custom template code here and so can take a look?
snebold replied on at Permalink Reply
snebold
Actually, I decided to just delete it because the issue seemed to be the fact that the code was there at all. I had made a copy of the view.php file and created a new slideshow directory inside my site's blocks directory as you said, but even if the extra code wasn't added at the end I still had the same issue where, if I had 3 images in my slideshow, it would place the first image in the correct location, then the 2nd would appear directly below that and the third would appear below the 2nd.

I wonder if anyone else has had this problem or any success.
chrisjwilliams replied on at Permalink Best Answer Reply
chrisjwilliams
Hi there,

I got this working with a few adjustments. The snippet above is slightly off in the sense that it set the image source as the image 'link' rather than the source itself.

I changed it to:

<?php foreach ($images as $imgInfo) {
$f = File::getByID($imgInfo['fID']);
 ?>
   <img src="<?php echo $f->getRelativePath()?>" />
   <?php } ?>


(I actually used a CSS class for the images to get the display:none property, but the <div> should work.)

Secondly, the view.css file (from the original slideshow folder) must be copied to the new directory you've made, otherwise the the positioning CSS is lost , causing each image to repeat down the page.

Hope this helps!

Cheers,

Chris.
jkernick replied on at Permalink Reply
jkernick
Can you tell me where exactly in the view.php code this snippet should be added? I'm having the repeating image thing happening, too, and I did include my view.css in the blocks/slideshow/ folder.
nkennel replied on at Permalink Reply
nkennel
jkernick, this took a lot of trial and error for me. For me, placing view.php at YOURSITE/blocks/slideshow/view.php did not work properly. It didn't seem it was being used ahead of YOURSITE/concrete/blocks/slideshow/view.php. This was probably my own error, or a misunderstanding between me and my browser since this should work, but nevertheless...

So I copied view.php to YOURSITE/blocks/slideshow/templates/ and renamed to "preload_images.php". I also placed view.css in the same templates folder (check for this if your images either seem to disappear after the first image, or if they move farther and farther down the page as they are displayed) The custom template approach is kind of nice because then you can choose whether or not to activate this feature for any particular slideshow instance in your site. With your page in edit mode, click on your slideshow block, and choose "custom template", and "Preload Images" will be an option in the drop-down menu - very cool - nice job concrete5 team.

So, to finally answer your question. I placed chrisjwilliams' version at the VERY BOTTOM of the preload_images.php (or view.php) file, with one modification - don't forget somehow hide the preload images! Here's my working combination of the two versions:

<!-----PRELOAD IMAGES------>
<div style="display: none;">
   <?php foreach ($images as $imgInfo) {
   $f = File::getByID($imgInfo['fID']);
    ?>
   <img src="<?php echo $f->getRelativePath()?>" />
   <?php } ?>
</div>


Good luck! And thanks for the help guys. Nice, simple solution. You saved me lots of time.