Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Changing isotope items size (aspect ratio)

Hi,

I'm working on a new website (http://fkeyner.nl/new/) and i'm struggling to change the dimensions on the portfolio items. I would like them to show in 16:9 aspect ratio and have 3 in a row, like this: http://fkeyner.nl/new/img/option_1.jpg

In short, the container width (which contains the items) will be the same but I want to change the dimensions of the items.

Any help is appreciated!

Thanks in advance, Frank

User Gravatar

Frank-

Posted Dec 30 2013 3:38 UTC

$50


  • Assigned To NBoychev
  • Solved
  • javascript
    jquery
    isotope
  • 4674 Views

6 Replies


Hello Frank,

There is a tricky way to do this with CSS only:

.element { height: auto !important; }
.element:after { content: ''; display: block; padding-top: 56.25%; }

Padding top gets the width of the parent, so the 'after' pseudo element will resize it's parent to height 56.25% of it's width (9/16 = 0.5625).

Then I can see that all children elements are absolute positioned, so you don't need to modify anything else. If you need to add additional elements, add them as absolute positioned.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 30 2013 3:55 UTC

Hi Nikola,

Thanks for the quick reply and for the great answer. As you can see, http://fkeyner.nl/new/, it worked. I've added the code to isotope.css. Only one thing remains and that is the size. I would like to display 3 items instead of 4 in a row, like http://fkeyner.nl/new/img/option_1.jpg. I'm clearly missing something....

Thanks in advance, Frank

User Gravatar

Frank-

Posted Dec 30 2013 4:33 UTC

Hi Frank,

I forgot to tell you that you can now control the size of the blocks very easy:

  • 3 items per row:

    .element { height: auto !important; width: 33.33%; }
    
  • 2 items per row:

    .element { height: auto !important; width: 25%; }
    

The 16:9 ratio will persist.

Also it may be interesting and useful for you to check this thread:

http://www.codersclan.net/ticket/187

There I've described how to add gutter between columns, and how to resize the elements properly.

Feel free to ask me if you have issues.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 30 2013 4:41 UTC

Hi,

I'm sorry, I'm not a web developer so my knowledge is basic :).

As you can see now (http://fkeyner.nl/new/), I guess there is a little problem with the margin now. I've read the thread you posted but I can't get it working.

$(window).bind("resize", function() {
    scale_elements();
    var cw=$('#container-isotope').width();
    var cw3=parseInt(cw/4, 10);
    if($(window).width() <= 930){
        cw3=parseInt(cw/3, 10);
    }
    if($(window).width() <= 800){
        cw3=parseInt(cw/2, 10);
    }
    if($(window).width() <= 450){
        cw3=parseInt(cw, 10);
    }
    $('#container-isotope').isotope({
        masonry: {
            columnWidth: cw3
        }
    });

Maybe there's something wrong with the calculations in the .js?

Thanks again! Regards,

Frank

User Gravatar

Frank-

Posted Dec 30 2013 5:30 UTC

Hi Frank,

You don't need JS for the responsive layout.

First - remove the current isotope js code, and insert this:

$('#container-isotope').isotope({
    masonry: {
        columnWidth: 1
    }
});

right after:

$(document).ready(function(){

Then in the CSS set the width of the item for the larger screens:

.element { width: 25%; }

And then at the bottom of the CSS add media queries:

@media (max-width: 930px) {
    .element { width: 33.3%; }
}

@media (max-width: 800px) {
    .element { width: 50%; }
}

@media (max-width: 450px) {
    .element { width: 100%; }
}

Note that the width on 3 columns layout is 33.3% instead of 33.33%. Please test that and if you are not satisfied we may need add additional js for container width calculation.

Also for proper resizing, you will need to remove the width transition of the container:

Find this in isotope.css:

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

And replace it with this:

.isotope {
  -webkit-transition-property: height;
     -moz-transition-property: height;
      -ms-transition-property: height;
       -o-transition-property: height;
          transition-property: height;
}

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 30 2013 5:44 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi Nikola,

I just confirmed the payment. Thanks for the quick reply and really great support!

Regards, Frank

User Gravatar

Frank-

Posted Dec 31 2013 0:15 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions