WordPress.org

Ready to get started?Download WordPress

Forums

Responsive NextGEN Flex Slider Template
Suggestion for Image Height (5 posts)

  1. girathryn
    Member
    Posted 1 year ago #

    Hi there! I am in love with your plugin; I just wanted to make a small suggestion:

    It would be amazing if we could specify a max height for the images instead of just a max width. Then, when the max height was specified, any content would flow to fit the rest of the container.

    Here is a link to your plugin in action on my site:

    http://www.thealternativebride.com/celebrity-bridesmaid-dresses/

    As you can see, when you cycle through the images, the height of the flex slider changes, which moves the navigation around and is just kind of awkward. I would love to be able to set a fixed height, so the width of the images would change and the content text would adjust accordingly, as opposed to setting a max width for the images.

    Thanks for listening!

    http://wordpress.org/extend/plugins/nextgen-flex-slider-template/

  2. Mohsin Rasool
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. davydov-denis
    Member
    Posted 10 months ago #

    +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 16x9 (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.

  4. davydov-denis
    Member
    Posted 10 months ago #

    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.

  5. davydov-denis
    Member
    Posted 10 months ago #

    made it work on adding:

    .slides {
      padding: 0 !important;
    }
    
    .aspect-box .flexslider {
       width: 100% !important;
      height: 100% !important;
    }

    the only thing left: centering vertically.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.