[Resolved] Need help with a custom loop output in a View

[Author]

Posts

[Rune Brynestad]

I have this page:
hidden link

The page contains a View with a 6 column output.

I wonder if it's possible to have 6 columns in the first row, 5 columns in the second row, 6 columns in the third row, 5 columns in the forth row and so on.

It should look like the attached image.

I'm using the latest Toolset Views beta (Toolset blocks)

Thanks in advice.

Best regards
Rune

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Rune,

Thank you for waiting.

To achieve the layout that you're planning, you'll need some custom script and CSS code.

For example, you can include the following script in your view's "JS editor" tab, which will add special div containers after every 6th and 5th elements in rows, respectively.

jQuery( document ).ready(function() {
  var x = 0;
  var y = 0;

  for(var i = 0; i < jQuery( ".js-wpv-view-layout .js-wpv-loop-wrapper .wp-block-columns .wp-block-column" ).length; i++) {

    if ( (x == 6) && (y == 0) ) {
      jQuery( ".js-wpv-view-layout .js-wpv-loop-wrapper .wp-block-columns .wp-block-column" ).eq(i).before( '<div class="new-row new-row-margin">&nbsp;</div>' );
      var x = 0;
      var y = 1;
    }

    if ( (x == 5) && (y == 1) ) {
      jQuery( ".js-wpv-view-layout .js-wpv-loop-wrapper .wp-block-columns .wp-block-column" ).eq(i).before( '<div class="new-row">&nbsp;</div>' );
      var x = 0;
      var y = 0;
    }

    x++;

  }
  
});

And in the view's "CSS editor" tab you can include:

.js-wpv-loop-wrapper .wp-block-columns {
display: block !important;
}

.js-wpv-loop-wrapper .wp-block-columns .wp-block-column {
float: left;
display: block;
margin: 0% 1% 0% 0%;
width: 15%;
}

.js-wpv-loop-wrapper .wp-block-columns .new-row {
clear: left;
float: left;
}

.js-wpv-loop-wrapper .wp-block-columns .new-row.new-row-margin {
margin: 0% 0% 0% 7%;
}

Note: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[Rune Brynestad]

This works perfect. Thanks for helping me.

Best regards
Rune