Thanks for the suggestion, girathryn. I also noticed it but if we auto crop it, we would crop it from top, bottom or from both ends (centralized) which may end up cropping the wrong area for some images. So, I suggest to crop them manually to get the best visualization. Your dressing slider is very nice example, If we squeeze the portrait pictures, their width would become very small. So picture will become quite small. And If picture is vertically centralized (or cropped from either side) I believe, face and/or bottom of the dress wont be visible.
Does this make sense?
Indeed, it is a good suggestion and will be available in next upgrade. So, some people can use it.
+1 for controlling the height. I think it is crucial in some design/content schemes.
I’m looking myself for a simple responsive plugin for NextGen.
I think the following scheme for controlling would be nice to have:
1) set width (100%, 200px, etc…)
2) set desired aspect ratio of the container (4/3, 2/3, 16/9, …) which fits best for the content of given gallery.
Why would i do this?
Say I have 10 pictures which I want to show in a container 100% width and proper height.
Let 9 be 16×9 (horizontal) and one 3/4 (vertical). What I would experience as you user is a huge jump and stretching of that vertical one to 100% width, which is not what I want, look at how content is shown on professional photojournalist sites, e.g. this one.
Say there is an image which is 4/3 (horizontal), I would have another jump in height. Not as sever as for 3/4, of course. i would prefer the container to stick to some predefined size rather than jump depending on the image. I.e. all images are centered inside container and are stretched either vertically or horizontally depending on the relation between image’s aspect ration and container size.
p.s. i was implementing something similar to my other website, i can have a look on main steps to facilitate implementation. I recall it’s tricky to get aspect ration of unloaded image, but i don’t remember what was a workaround. Let me know if you want me to look at it. Apart from this, the rest is just some CSS to center the image inside a container.
p.s. here are couple of links how to keep aspect ration using CSS only:
one, two.
Both use padding-top: xx%;
I almost made it work with:
<div class="aspect-box">
<div class="liner">
[nggallery id=1 template="sliderview"]
</div>
</div>
and CSS:
.aspect-box {
position: relative;
width: 100%;
height: 0;
padding-top: 75%; /* 4/3 */
}
.aspect-box .liner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: silver /* show me! */
}
.flexslider .feature-image img {
display: inline !important; /* To centralize the portrait photos*/
max-width: 100% !important;
width: auto !important;
margin: auto !important;
max-height: 100% !important;
height: auto !important;
}
But the slide is still out of the bounding box. Apart from that vertical image does not stretch the whole thing. Horizontal are aligned to the top so far.
made it work on adding:
.slides {
padding: 0 !important;
}
.aspect-box .flexslider {
width: 100% !important;
height: 100% !important;
}
the only thing left: centering vertically.
