Resizing, Fitting and Cropping
Permalink Browser Info Environment
I just purchased this add-on and it's very cool however I may have misunderstood the whole resizing and cropping options. (My fault, I guess I should have asked for clarification ahead of time)
What I would like to do is have a slideshow of a featured images set on my homepage that has no controls or overlay. That part is easy enough. The problem is that these images would be a combination of landscape and portrait images as well as not all being the same dimensions. I want the images to be resized (constrained proportions) so that the entire image is displayed without any cropping. I don't have any problems with there being blank black space around the images within the block as the site has a black background anyway.
Is it possible to make this happen with the add-on? Does a custom template need to be setup for that or something? Forgive my ignorance as I'm very new to working in concrete. Any help or suggestions would be greatly appreciated.
- Nathan
What I would like to do is have a slideshow of a featured images set on my homepage that has no controls or overlay. That part is easy enough. The problem is that these images would be a combination of landscape and portrait images as well as not all being the same dimensions. I want the images to be resized (constrained proportions) so that the entire image is displayed without any cropping. I don't have any problems with there being blank black space around the images within the block as the site has a black background anyway.
Is it possible to make this happen with the add-on? Does a custom template need to be setup for that or something? Forgive my ignorance as I'm very new to working in concrete. Any help or suggestions would be greatly appreciated.
- Nathan
| Type: | Discussion |
|---|---|
| Status: | New |
Hi Nathan, sure that is possible to do with a custom block template or sile tweak to the view.css file. I'm away from my computer at the moment but will look that up for you and get to you later today. Thanks for your patience.
Actually, the latest version (I have on my computer) has a block template called "No Cropping". In edit mode if you click the Slider Overlay block and choose "Custom Template", see if you can find it there.
If not, please let me know and I'll upload the latest version to the C5 marketplace so you can access it.
If not, please let me know and I'll upload the latest version to the C5 marketplace so you can access it.
Thanks for the replies. I did try using that "No Cropping" template earlier but it didn't seem to achieve what I wanted when I tried it before. I just tried it again and it seems to get close to what I wanted. Just for reference the site I'm working on ishttp://www.nathanvergin.com
It appears as though I had to change the width setting after selecting that custom template in order for it to fully take effect.
Also, I had previously increased the width of the theme's layout (Dark Chocolate) to be 1000px. If I set the width of the slider to 1000px as well it seems to get confused for some reason and will cut off a fair portion of some of the wider images such as the image of the three hunters. If however I set it to a smaller value such as 995px it works correctly as far as that is concerned. So the no cropping is working for that.
I had taken all the portrait images out previously so I just threw some of them back into the "featured set" and they too are working correctly now as far as resizing and not cropping is concerned.
I do have two follow-up questions though now that we've worked through the cropping.
1. Is there some way to have the images centered within the block both vertically and horizontally now that they aren't being cropped. As I said before, I don't mind the black spaces around the images but it does look strange when for instance, the portrait images are kicked over to the left side.
2. After applying the no cropping template it seems to force the overlay to appear at the bottom of the images every time they change. Toggling the "Hide Overlay" setting off and back on has no effect.
Again, thanks for your help so far! It's awesome to have developers who are in touch and care about their work!
It appears as though I had to change the width setting after selecting that custom template in order for it to fully take effect.
Also, I had previously increased the width of the theme's layout (Dark Chocolate) to be 1000px. If I set the width of the slider to 1000px as well it seems to get confused for some reason and will cut off a fair portion of some of the wider images such as the image of the three hunters. If however I set it to a smaller value such as 995px it works correctly as far as that is concerned. So the no cropping is working for that.
I had taken all the portrait images out previously so I just threw some of them back into the "featured set" and they too are working correctly now as far as resizing and not cropping is concerned.
I do have two follow-up questions though now that we've worked through the cropping.
1. Is there some way to have the images centered within the block both vertically and horizontally now that they aren't being cropped. As I said before, I don't mind the black spaces around the images but it does look strange when for instance, the portrait images are kicked over to the left side.
2. After applying the no cropping template it seems to force the overlay to appear at the bottom of the images every time they change. Toggling the "Hide Overlay" setting off and back on has no effect.
Again, thanks for your help so far! It's awesome to have developers who are in touch and care about their work!
I updated this package a little while ago to add new features (such as hiding the overlay), but didn't update the "no cropping" block template.
Please just replace the content of the "no_cropping.php" file with this:
http://pastie.org/2824047
That should sort out the issue with the overlay coming back.
To center the images horizontally, edit the slider.css file (line 1) and edit to the following:
.code]
ul.jbsliderul, ul.jbsliderul li{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
width:100%;
}
[/code]
As for centering vertically, unfortunately there is no CSS support for that. It's one of those things that does pain designers all the time. Although there are some fancy workarounds available, it doesn't really go well with the dynamic nature of this type of block (meaning the sizes of the images can change on each slide).
Hope this helps.
JB
Please just replace the content of the "no_cropping.php" file with this:
http://pastie.org/2824047
That should sort out the issue with the overlay coming back.
To center the images horizontally, edit the slider.css file (line 1) and edit to the following:
.code]
ul.jbsliderul, ul.jbsliderul li{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
width:100%;
}
[/code]
As for centering vertically, unfortunately there is no CSS support for that. It's one of those things that does pain designers all the time. Although there are some fancy workarounds available, it doesn't really go well with the dynamic nature of this type of block (meaning the sizes of the images can change on each slide).
Hope this helps.
JB
That helped a ton! Thanks so much. The vertical centering was less important than horizontal anyway so that's not a big deal.
I've been looking at the files and trying to understand how they're put together but most of it is beyond my current understanding. Some of it seems to make sense while other bits I have no idea about. (I really need to learn css and php)
I'm still struggling with the width/centering a bit. We're real close but it still "appears" just slightly off. Is there padding or margins around the photos at all? If you take a look at the site you'll notice that they aren't quite centered with the menu above them. They're off just a bit, shifted slightly to the right in comparison. However, I'm starting to wonder if perhaps it's the theme itself and the width of the content area or menu that might be messed up as opposed to your add-on. A screenshot I took is showing that the menu at top is 1010px or 1012px wide when it should only be 1000px. Still trying to figure out why... But that difference might cause your add-on to appear offset when in fact the slider may actually be correct. Not sure yet, but trying to work through it. Any suggestions?
In any case, thanks again for your help!
I've been looking at the files and trying to understand how they're put together but most of it is beyond my current understanding. Some of it seems to make sense while other bits I have no idea about. (I really need to learn css and php)
I'm still struggling with the width/centering a bit. We're real close but it still "appears" just slightly off. Is there padding or margins around the photos at all? If you take a look at the site you'll notice that they aren't quite centered with the menu above them. They're off just a bit, shifted slightly to the right in comparison. However, I'm starting to wonder if perhaps it's the theme itself and the width of the content area or menu that might be messed up as opposed to your add-on. A screenshot I took is showing that the menu at top is 1010px or 1012px wide when it should only be 1000px. Still trying to figure out why... But that difference might cause your add-on to appear offset when in fact the slider may actually be correct. Not sure yet, but trying to work through it. Any suggestions?
In any case, thanks again for your help!
When looking at the no_cropping.php file, can you explain what lines 28 and 40 do as I see that they are dealing with width and appear to be adding and subtracting to that value.
28) width: <?php echo $imgwth + 50;?>px; /* important to be same as image width or wider */
40) width: <?php echo $imgwth-20;?>px;
I tried setting them to 0 as a shot-in-the-dark and I think it fixed the issue. However I'm trying to understand what exactly I changed.
Does line 28 effect the overall width of the content area that the slider is working with and line 40 actually sets the width of the image displayed? Is that right? So in effect by setting them to 0 it would make everything go directly off of the width setting directly with no adjustments? Is that close to being correct?
28) width: <?php echo $imgwth + 50;?>px; /* important to be same as image width or wider */
40) width: <?php echo $imgwth-20;?>px;
I tried setting them to 0 as a shot-in-the-dark and I think it fixed the issue. However I'm trying to understand what exactly I changed.
Does line 28 effect the overall width of the content area that the slider is working with and line 40 actually sets the width of the image displayed? Is that right? So in effect by setting them to 0 it would make everything go directly off of the width setting directly with no adjustments? Is that close to being correct?
To be honest, it's been so long since I created that add-on, I can't remember the reason for lines 28 & 40 (I probably should have written better comments). There must have been some logic to it at the time, but I can't imagine you doing any damage with what you've described (settings the number to "0"). So if that looks like it works well, just go with the flow. :-)
JB
JB
HAHA I appreciate your honesty! :)
If I had to wager a guess, it would be that those two settings (if they do what I think) are probably set up to ensure that the cropped images fill the entire image area. I think it would effectively make them slightly larger than the visible content area... maybe... haha
In any case, yes it seems to be working as I want now. Super happy! Thanks again and have a good one!
If I had to wager a guess, it would be that those two settings (if they do what I think) are probably set up to ensure that the cropped images fill the entire image area. I think it would effectively make them slightly larger than the visible content area... maybe... haha
In any case, yes it seems to be working as I want now. Super happy! Thanks again and have a good one!