I am using Isotope.js in my portfolio to show my work.

Through my loop I am defining a priori (using Bootstrap) the width of each entry, and that is the same for all my entries.

How can I assign different widths (col-*) to each post from time to time?

<div class="row grid">
            <div class="grid-sizer col-12 col-sm-6"></div><!-- .grid-sizer per Isotope -->
            <?php query_posts(array(  'post_type' => 'portfolio', 'author' => get_the_author_meta('ID'), 'showposts' => 10  ) ); ?>
            <?php while (have_posts()) : the_post(); 
            $termsArray = get_the_terms( $post->ID, $taxonomy );  //Get the terms for this particular item
            $termsString = ""; //initialize the string that will contain the terms
                foreach ( $termsArray as $term ) { // for each term 
                    $termsString .= $term->slug.' '; //create a string that has all the slugs 
            <div class="col-12 col-sm-6 <?php echo $termsString; ?> grid-item wow fadeInUp">
                <article id="post-<?php the_ID(); ?>" <?php post_class('card'); ?>>
                    <?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-fluid card-img-top')); ?>
                    <div class="overlay"></div>
                    <div class="card-body text-right">
                        <h6 class="card-title"><?php the_title(); ?></h6>
                        <p>Text description for this item</p>
                    <a class="card-link" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"></a>  
                    <?php endwhile; ?>

On the div that immediately wraps each post, you can use php to randomize the values instead of hardcoding the col-12 and col-sm-6 classes.

For example, you could change

<div class="col-12 col-sm-6 <?php echo $termsString; ?> grid-item wow fadeInUp">

to reflect the randomizer and then its result:

  $randomColClasses = 'col-' . rand(8,12); //random value between 8-12
  $randomColClasses .= ' col-sm-' . rand(4,8); //random value between 4-8

<div class="<?php echo $randomColClasses . ' ' . $termsString; ?> grid-item wow fadeInUp">
  • Hello, thanks for answering. I just tried it, and it's not a good option for Isotope.js, because it breaks the layout, so it could assign to the first column the value 8 and to the second column the value 6, exceeding the maximum of 12, and putting the second column below the first. I have seen in some sites that they manage to change the width of each column, but I can not understand how they have achieved it through. The only thing that occurs to me is to pass these classes (col-12, col-sm-6, col-md- 8 etc ..) manually every time a post is uploaded. Is this possible to do? – Antonino Lattene Jan 26 '18 at 9:54
  • If you predetermine 2 or 3 grid item widths with bootstrap column classes, you can set randomize between those 3 by getting a random number between 1-3 and then using a switch/if statement to set col-A, col-sm-A, col-B, col-sm-B, etc. Keep in mind, you'll want to pick column sizes that add up to the overall 12 columns in bootstrap fairly frequently. So maybe randomize to generate col-sm-2, col-sm-4. – Anson W Han Jan 26 '18 at 14:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.