Automatic Image Resize in Slideshow?

Permalink
Are there any slideshow apps that automagically resize the images in a slideshow to the set dimensions? The ones I have used crop the images or have no resizing options. I want to make it as easy as possible for my client to toss photos into a file set and have it work seamlessly.

Thanks for your direction,
Spencer

SpencerC
View Replies:
Tony replied on at Permalink Reply
Tony
you might want to check out the billboards block. You can set a max width and height for your images (although it will maintain the aspect ratio).
http://www.concrete5.org/marketplace/addons/billboards...

here's a demo if you want to play around with it:
http://demo.inneroptics.net/billboards/...
kirkroberts replied on at Permalink Reply
kirkroberts
You could use the standard c5 Slideshow block and update a bit of code to have it resize images for you.

Copy /concrete/blocks/slideshow/view.php to /block/slideshow/view.php
In the new view.php around line 89 look for
fullFilePath:"<?php echo $f->getRelativePath()?>",
replace that with
<?php $ih = Loader::helper('image'); ?>
            fullFilePath:"<?php echo $ih->getThumbnail($f, 300, 200)->src; ?>",

replace the 300, 200 with whatever dimensions you want.
This will scale the images proportionally into whatever size window you want. If you want it to crop let me know and I can provide some more code.

Hope that helps!
by the way... I didn't test the above code... but it should work

EDIT: just realized I put the image helper code into a loop... and it will be re-loaded for every image. The line
<?php $ih = Loader::helper('image'); ?>
should be moved *above* the foreach() start on line 80 ... make sure to remove the enclosing php tags.

EDIT 2: of course this will make any slideshow block on your site whatever dimensions you specify... but you can create custom templates for each size you need... or get fancy and fork the block to add width and height variables.
shaned replied on at Permalink Reply
shaned
Kirk's reply is right on, but a few more lines need to be altered in the view for it to work.

Change line 22 to reflect the height of the thumbnails:
this.displayWrap.css('height',275);


line 29 to:
this.imgEls[i].css('top',0);


line 95 to:
imgHeight:275


I'm sure this could be done more elegantly and it leaves some unnecessary code in the javascript, but replace 275 with your thumbnail height and you should be good to go.
zoinks replied on at Permalink Reply
I made all the changes you both recommended...

seemed to be PERFECT at first...

then I noticed a large space at the top. Any idea why? Seems like a large margin or padding on the top, but I used shaned's code to make the margin 0:

this.imgEls[i].css('top',0);

isn't that what it does?
kirkroberts replied on at Permalink Reply
kirkroberts
"getThumbnail" is just the name of the method that resizes images in the Concrete5 image helper. So it's clear what the original intent was, but you can enter whatever dimensions you want, as long as the source file is larger than the new size.
kirkroberts replied on at Permalink Reply
kirkroberts
Can you share a link to view?
I'm imagining that it's just that the image's ratio is wider than the box you're sizing it into.
zoinks replied on at Permalink Reply
Unfortunately, I can't. It's super secret, but thank you for helping and offering to help. Sorry I edited my post several times without realizing you were in act of replying to me. I'm used to not getting a response for at least a few hours, so I was updating my post as I made changes and saw results and then noticed different things.
zoinks replied on at Permalink Reply
Firebug reveals that the height is 570px... despite the fact that this height was absolutely nowhere in the view.php code. The WIDTH was 550 and the height was 366... I assumed the code you gave above was maximum either/or settings.
zoinks replied on at Permalink Reply
There is something in the view.php that wants to slide the images up and down depending on the side. Some kind of padding or margin nonsense... which makes it impossible to just let the image stay flush to the top.
kirkroberts replied on at Permalink Reply
kirkroberts
If you've already followed shaned's advice (above) then I can't tell you without seeing it myself. Do a search in view.php for maxHeight and set it manually to the same height as in your getThumbnail call.
zoinks replied on at Permalink Reply
Thanks, Kirk! Works beautifully! I'd love to know how to crop, personally.

I'm a PHP noob so I don't know... is it difficult to write client-side sizing into the slideshow control panel? My guess is YES, EXTREMELY FOR A NOOB, but probably not at all for a pro.
kirkroberts replied on at Permalink Reply
kirkroberts
Check out the updated image helper that allows you to crop to size. Grab the attachment from this post:http://www.concrete5.org/index.php?cID=70847#105621...
There are also instructions on use in the same thread. Apparently this will be included in the Concrete5 core as part of the next release.

If you want the user to crop an image manually in C5, the only way I know about currently is to use the Picnik editor. In the File Manager click on an image and choose Edit.
zoinks replied on at Permalink Reply
Wow, you even put a quality compression engine in it? I was just asking about that the other day! Unfortuantely for me, I see the amount of replies and instruction from others and... I can't follow anything JordanLev is talking about there and the *you have to use it with image helper* comment assures me I'm lost.
kirkroberts replied on at Permalink Reply
kirkroberts
Just download the image.php file and put it in your /helpers directory.
Then update your getThumbnail method call to include the new array.
If you start with:
getThumbnail($f,300,200)

you'd change it to
getThumbnail($f,300,200,array('crop'=>true))

That should be it!
kirkroberts replied on at Permalink Reply
kirkroberts
Sorry, I misread your question!
If you want the user to set the slideshow dimensions you'll need to learn about working with custom blocks. You'd need to update the add/edit form, the database set-up, and the block template.

For a newcomer, I'd suggest looking at custom templates first. You could provide a few different templates with different size choices.
Here's a tutorial about that:
http://www.concrete5.org/documentation/how-tos/designers/custom-blo...
zoinks replied on at Permalink Reply
yep, I'm getting pretty good at Custom Templates! :) Thanks! I didn't realize it was possible to do a custom template for the slideshow for some dumb reason!
SpencerC replied on at Permalink Reply
SpencerC
I ended up buying Slider Overlay which does this nicely and adds a caption screen. Worth the $15.http://www.concrete5.org/marketplace/addons/slider-overlay/...

Spencer
zoinks replied on at Permalink Reply
That is lovely :) Can you turn the overlays off? I'm guessing yes, but always good to ask.
mesuva replied on at Permalink Reply
mesuva
I think from this thread you've worked out a solution, but if anyone is interested I've released a slideshow block of my own (which does auto resizing).

Grab it here:http://www.mesuva.com.au/blog/technical-notes/a-slideshow-plugin-fo...
OahuFringeFestival replied on at Permalink Reply
OahuFringeFestival
Hi - thank you for this. Is this on the marketplace or through your site? Please let me know. cheers
mesuva replied on at Permalink Reply
mesuva
This is from quite some time ago, 2011 - it's not something that I ever put on the marketplace, but I've also removed it from our blog. It's not something I support or offer now, sorry.
OahuFringeFestival replied on at Permalink Reply
OahuFringeFestival
Cheers for that. I did check you site also. It is something that I was looking for - images not resizing for me as I'm not good with code this seemed perfect. (wanted images to resize to fit in a block / layout) I'll check your site for other add-ons. Appreciate the reply.