This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

Isotope Layout Mode: Masonry Versus fitRows

  • Creator
    Topic
  • #21675
    askwpgirl
    Participant

    Of course, now that we have masonry, everyone wants it but they want the fitRows layout instead of the vertical masonry layout:

    http://isotope.metafizzy.co/layout-modes/fitrows.html

    Can a js function be loaded into the child theme js to use the fitRows instead of the vertical masonry? Classes would need to be assigned for the varying widths so divs take 2 columns every X # of columns as on http://codepen.io/desandro/pen/nCskp.

    The page a student wanted to emulate was: http://coburnpartners.com/projects-2/#all. But this page is even getting fancier with the 2 deep rows.

    Just curious about your thoughts. This might be too far out to consider, but it’s amazing how many people like this layout over the vertical masonry, particularly for portfolios.

    A

Viewing 15 replies - 1 through 15 (of 15 total)
  • Author
    Replies
  • #21677
    Jason Bobich
    Keymaster

    I know this is all a little confusing of a topic… If I’m reading my own javascript right:

    When you set your post grid (or showcase) to be display “with filtering”, the result is that I set the layout mode to be “fitRows” but once you select for that grid to display as masonry, then the “masonry” layout mode is triggered.

    But, if you’re trying to do something like this: http://coburnpartners.com/projects-2/#all — This has varying heights, so wouldn’t you want masonry? If you’re using fitRows, then the effect would be clearing each row. You’ll see gaps beneath all the shorter items.

    Are you sure just varying widths and heights isn’t what you’re after?

    Classes would need to be assigned for the varying widths so divs take 2 columns every X # of columns as on

    One way would be to filter onto post_class, and have some sort of global variable that keep track of that you keep incrementing, and add to the class that way.

    https://codex.wordpress.org/Function_Reference/post_class

    Or, really do you need classes at all? Skip the PHP filtering and you could just go all CSS and use nth child selectors style the widths that way.

    .iso-item {
    	width: 50%;
    }
    .iso-item:nth-child(2n),
    .iso-item:nth-child(3n) {
    	width: 25%;
    }

    https://css-tricks.com/almanac/selectors/n/nth-child/

    I have no idea how this would actually turn out, but that would accomplish (for example) setting widths like:

    (1) 50% | (2) 25% | (3) 25%
    (4) 50% | (5) 25% | (6) 25%
    (7) 50% | (8) 25% | (9) 25%
    ...

    But now that you can play with widths like that, and you know how the theme sets fitRows vs Masonry, that should get you going onto something cool, right?

    #21679
    Jason Bobich
    Keymaster

    I think you’ll find that getting more complicated with this stuff is extremely hard to keep in a responsive website. It’s easy if you can set fixed pixel widths/heights to all the items.

    But for me personally, in creating this, I found it was rather limiting in trying to come up with user options and still maintaining the responsiveness of everything that fits within the scope of the theme.

    #21683
    askwpgirl
    Participant

    The main difference is the rows spanning columns versus columns spanning rows.

    Envira Gallery and NextGEN Gallery do the columns spanning rows thing like JS, though I think NextGEN is going to provide the option for both in a future release.

    Jetpack Mosaic has items in rows spanning columns.

    The Coburn site uses jQuery Masonry instead of Isotope.

    http://erikjohanssonphoto.com/work/imagecats/personal/ – uses jQuery Masonry.

    It’s aesthetic.

    While my student wanted to replicate in some fashion what I sent to you, I think it’s more that she wants to have some images large and some small and for the large ones to span the small ones horizontally rather than line up in columns.

    The Erik Johansson site and the Jetpack Mosaic Gallery are good examples of that column span style in a responsive layouts. Perhaps the fitRows isn’t really the right solution for this.

    Speaking of which, the default WP gallery CSS is all jacked up in the latest JS in the responsive views. I’ll post a different thread on that. The images overlap and don’t resize.

    #21684
    askwpgirl
    Participant

    This page isn’t showing three columns, should it?

    http://demoblvd.com/themes/jumpstart-2/demo-1/portfolio/showcase-masonry/

    #21685
    Jason Bobich
    Keymaster

    It shows three columns for me? I’m in Chrome.

    #21686
    Jason Bobich
    Keymaster

    And I’m still pretty sure, in terms of using isotope, masonry is what you’re describing.

    http://isotope.metafizzy.co/layout-modes/masonry.html

    … It’s just a matter of the items being different heights and widths, I think? Which you’d do with CSS as I was describing above. But you’d use fixed pixel width/heights.

    #21687
    askwpgirl
    Participant

    Yes, I’m playing with the CSS now.

    Firefox — the demo site and my local test site show the showcase masonry as two columns unless I add this to my CSS:

    .col-sm-4 {
    margin: 0;
    }

    #21688
    Jason Bobich
    Keymaster

    I see now. It’s only in Firefox. Looks like same thing with galleries, too — issue is in Firefox.

    #21689
    askwpgirl
    Participant

    Damn Firefox.

    #21690
    askwpgirl
    Participant

    So, CSS for nth works fine. I do that a lot with tables and lists. However, there is this absolute positioning being applied that sets all the divs to left: 0. I’ll have to play with it more tomorrow. It’s actually late here!

    #21699
    Jason Bobich
    Keymaster

    This firefox issue with isotope seems to be a bit of an isotope bug, but here’s my best working fix so far:

    .firefox .tb-isotope .col-sm-020 {
    	width: 19.75%;
    }
    .firefox .tb-isotope .col-sm-3 {
    	width: 24.75%;
    }
    .firefox .tb-isotope .col-sm-4 {
    	width: 33.1%;
    }
    .firefox .tb-isotope .col-sm-6 {
    	width: 49.75%;
    }

    It’s hard to replicate and diagnose because it all depends on the calculation and rounding of adding up the pixel calculations from these percentages.

    For example, take this that you linked to, if you were to take the border off the wrapping element, and thus reduce the overall width by 2px, now it works. So, it’s just all the random adding up of these percentage based widths, and them sometimes hitting just over 100%.

    So my current solution is to just give a little bit of leeway in the spacing for firefox.

    #21710
    askwpgirl
    Participant

    That’s crazy! It had been working in previous versions. How strange. I’ll add those selectors.

    #21712
    Jason Bobich
    Keymaster

    Well one thing I added in this version was the user options to add the border around the content area. So the issue was always there, but just the coincidence of the padding around the section now being 31px (adding 1px border), instead of 30px, causes the issue in that specific scenario.

    The issue is totally random — it just has to do with isotope putting pixel values to the percentages, and Firefox not allowing these to be specific enough (and rounding off sooner than Chrome would), and breaking if they ever bump over 100% for the given area, for the tiniest of fractions.

    #21713
    askwpgirl
    Participant

    Ah! It’s never ending. 🙂

    #21742
    askwpgirl
    Participant

    Thanks for the Firefox fix. I just had to use that on another site.

Viewing 15 replies - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.