Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24604

    I’ve searched through several of the other threads, but have yet to find an answer for what I’m after.

    I’m creating a site using Angular that within the Portfolio section, uses both vertical and horizontal images throughout. Since there is content below the images in the slideshow on each portfolio-single page, I would like to limit the height of the image in each slideshow, without cropping the image. Currently, the theme is setup (or so it appears to me) to have a max width of 630px by whatever height the image happens to be at that width. I’m wanting to accomplish the inverse of this: max height of 650px by whatever width the image happens to be (up to 630px).

    I’ve changed the functions.php to create a specific size called ‘portfolio-fixed’, which uses the following code:

    $avia_config = array('width'=>9999, 'height'=>650, 'crop'=>false);

    And changed the ‘loop-portfolio-single.php’ to reflect this change:

    $slider->setImageSize('portfolio-fixed');

    I’m also using the Regenerate Thumbnails plugin to recreate the images at the new size. Yet, no dice. So I’m looking for answers hoping someone will be able to see what I’m perhaps missing. And if visuals help, here are a few:

    Current shot of vertical images within a portfolio page:

    http://bit.ly/11v5xwQ

    Shot of what I’m wanting to accomplish with resized Vertical images:

    http://bit.ly/16XIouX

    Horizontal image treatment (no change from current state):

    http://bit.ly/11v5GQJ

    Link to portfolio page on development website:

    http://bit.ly/13uU6a4

    Thanks,

    Aaron

    #124006

    The best way to go about it, is to first install the Simple Image Sizes plugin ( http://wordpress.org/extend/plugins/simple-image-sizes/ ). The plugin will give you complete control over images: setting constraints for specific locations like blog, thumbnails, portfolio, gallery, shop, etc. along with the ability to set whether to crop an image or not in Settings > Media.

    Changing the dimensions of images does NOT automatically change all the images already uploaded but only affects new uploads. To change the sizes of images already uploaded, you will need to use the Regenerator – also a part of the Simple Image Sizes and found on the bottom of Settings > Media. Don’t forget that images scale down, so always upload images bigger (or the same) as the constraints you set in Settings > Media (with the plugin) or you will get blurry (stretched) or incomplete images.

    ============

    You need to create some rules for your images. That you will only have 3 types of images. A square, a landscape with a height of 650px , and a portrait with a width of 650. Then you can use css .. something like this

    #top.single-portfolio .slideshow li img{
    min-height: 650px;
    max-width: 100%;
    min-width: 650px;
    max-height: 100%;
    }

    or

    #top.single-portfolio .slideshow li img{
    min-height: 650px;
    height: 100%;
    min-width: 630px;
    width: 100%;
    }

    However, since the available area is a square 630×630 , you will wind up with cut off images. There is simply no room . So you need to pick a smaller number, 315px to be the max height of landscape and 315px to be max width of portrait. So that way your portraits can be 315 (min) x 630 (max) and your landscapes 630 (max) x 315 (min).

    Try it with your current images

    #top.single-portfolio .slideshow li img {
    min-height: 315px;
    max-height: 630px;
    min-width: 315px;
    max-width: 630px;
    }

    Thanks,

    Nick

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Fixed Height Portfolio Slideshow’ is closed to new replies.