Different size grid with specific order PHP

Solo Published at Dev

Solo

I need to make a grid similar to this:

Few keywords: specific size pattern, bigger points in higher.

All boxes are custom posts - lets call every box a post.

All different sizes posts have different meta_key called $size:

Yellow/big $size= 1;
Orange/medium $size= 2;
Blue/small $size= 3;

All posts have also meta_key value called $points which are totally different for each (can be anything from 0 to 10000). $points is currently used as orderby.

This is how I call all these posts:

$custom_posts= new WP_Query(array(
      'post_type' => 'custom-post', 
      'meta_key' => 'points', 
      'orderby' => 'meta_value_num'
)); 

if ( $custom_posts->have_posts() ) :


echo '<div id="post-items"><ul class="row list-unstyled">';

while ( $custom_posts->have_posts() ) : $custom_posts->the_post();

$size= get_post_meta( $post->ID, 'post_size', true );
$points = get_post_meta( $post->ID, 'post_points', true );



echo '<li>';


if($size == 1) {
?>
      //Big yellow box HTML
<?php
}
else if($size == 2) {
    ?>
      //Medium orange box HTML
    <?php
}
else if($size == 3) {
    ?>
      //Small blue box HTML
    <?php
}
echo '</li>';

endwhile;

echo '</ul></div>';

wp_reset_query();

else :
?>
<p class="text-muted"><?php _e( 'No Posts.', 'aa' ); ?></p>
<?php
endif;

QUESTION:

Any ideas how to query them in specific $size pattern also considering $points (higher points in higher, but do not break the order - LIKE ON MY IMAGE)?

Im working my arse off as we speak (it's 3rd day now on this problem!!) & I would appriciate every idea, comment or source!

What could be useful but I haven't found a working solution yet (I'll add more if I come across some):

Using modulus: PHP loop: Add a div around every three items syntax

UPDATE 1:

Mike

I am not a Wordpress expert by any stretch, so there may be an easier way to do this with a foreach loop, but here it is with a while as you have it in the question:

// This will be used as a counter
$i=0;
while ( $custom_posts->have_posts() ) : $custom_posts->the_post();
    // Get size based on counter
    switch($i) {
        case 0:
        case 5:
            $size = 1;
            break;
        case 1:
        case 2:
        case 3:
        case 4:
        case 6:
        case 7:
            $size = 2;
            break;
        default:
            $size = 3;
    }
    $points = get_post_meta( $post->ID, 'post_points', true );



    echo '<li>';


    if($size == 1) {
    ?>
        //Big yellow box HTML
    <?php
    }
    else if($size == 2) {
        ?>
        //Medium orange box HTML
        <?php
    }
    else if($size == 3) {
        ?>
        //Small blue box HTML
        <?php
    }
    echo '</li>';
    // Increment the counter
    $i++;
endwhile;

If I understand your question correctly, this should always display the sizes in the order that you have them (1,2,2,2,2,1,2,2,3,3,3,3,3,3, etc.). Also, if there are less than that number of entries, it will still work, and if there are more, size 3 is the default, so anything else after this will display as 3.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-23

Comments

0 comments

From Dev

Related Related

Article

Different size grid with specific order PHP

Different size grid with specific order PHP

Kendo Grid sorting a different order

Bit Field of a specific size and order

PHP sorting in a specific order

Struct has different size if the field order is different

Different font size for specific device

HTML/CSS grid layout with different size boxes?

Making Photo Grid with Different size images

Different Cell size grid for custom views

php echo only in a specific order

How to merge different tables on specific order?

Different Woocommerce product thumbnail size for specific pages

Different Woocommerce product thumbnail size for specific pages

Putting JPanels with colored borders in a specific order so they look like a grid

PHP Bootstrap ending a row for different grid sizes

How to display images on a grid which consist specific size (MxN) in FEH?

Android: how to implement grid with different columns/rows size

How to use transform for different children of a grid cell to change size synchronously?

Grid with different size squares next to, and on top of each other

Print php`s object data in specific order

PHP FPDF changing font size in specific are only

Displaying specific thumbnail size in single.php

How to display divs in a different order depending on screen size in Bootstrap 3?

Render component in different order depending on screen-size (React)

How to compare two different size arraylists and check for order of elements

How to arrange columns position and order on different screen size on Bootstrap?

How to combine three lists of different size in order Python

php selecting an order from a different mysql table

Merging files in a specific order of two different name lists

Place blocks with different heights like tiles with a specific order - WPF, XAML