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
Thanks for your direction,
Spencer
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 replace that with
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 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.
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()?>",
<?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'); ?>
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.
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:
line 29 to:
line 95 to:
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.
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.
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?
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?
"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.
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.
I'm imagining that it's just that the image's ratio is wider than the box you're sizing it into.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
you'd change it to
That should be it!
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!
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...
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...
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!
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
Spencer
That is lovely :) Can you turn the overlays off? I'm guessing yes, but always good to ask.
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...
Grab it here:http://www.mesuva.com.au/blog/technical-notes/a-slideshow-plugin-fo...
Hi - thank you for this. Is this on the marketplace or through your site? Please let me know. cheers
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.
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.
http://www.concrete5.org/marketplace/addons/billboards...
here's a demo if you want to play around with it:
http://demo.inneroptics.net/billboards/...