wake-up-neo.net

Verwenden PHP Schleife, um Bootstrap-Zeilen und richtige Spaltennummern zu Elementen hinzuzufügen

Ich versuche, das folgende Frontend mithilfe einer PHP - Schleife und des 12-Spaltengittersystems von Twitter Bootstrap zu erstellen:

 enter image description here

Die HTML-Ausgabe lautet:

<div class="row">
    <div class="col-lg-4">
        Content...
    </div>
    <div class="col-lg-4">
        Content...
    </div>
    <div class="col-lg-4">
        Content...
    </div>
</div>

<div class="row">
    <div class="col-lg-4">
        Content...
    </div>
    <div class="col-lg-4">
        Content...
    </div>
    <div class="col-lg-4">
        Content...
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        Content...
    </div>
    <div class="col-lg-6">
        Content...
    </div>
</div>

In PHP (WordPress) wickle ich alle drei Elemente in einem .row div ein:

<?php $i=0; // counter ?>

<?php while ( have_posts() ) : the_post(); ?> 

    <?php if ($i%3==0) { // if counter is multiple of 3 ?>
    <div class="row">
    <?php } ?>

    <div class="col-md-4">
        Content...
    </div>        

    <?php $i++; ?>

    <?php if($i%3==0) { // if counter is multiple of 3 ?>
    </div>
    <?php } ?>

<?php endwhile; ?>

<?php if($i%3!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>


Das Problem:

Ich weiß nicht, wie ich den Elementen in der letzten Zeile die entsprechende Spaltennummer hinzufügen soll, damit sie das 12-Spalten-Raster füllen. 

In meiner Abbildung oben hat zum Beispiel jedes Element in der letzten Zeile col-6 (erweitert 6 Spalten) und füllt das 12-Gittersystem. Wenn sich in der letzten Zeile 1 Element befindet, sollte col-12 vorhanden sein. 

Hinweis: Jede Zeile enthält höchstens drei Elemente, wie in der Abbildung und in PHP gezeigt. 

Ich weiß folgendes:

  • Gesamtzahl der Artikel $loop->post_count

  • Artikelnummer $i

  • Anzahl der Restposten in der letzten Zeile $loop->post_count%3 (denke ich)

  • Gesamtzahl der Spalten 12 (12 könnte durch die Anzahl der verbleibenden Elemente geteilt werden, um die Spaltennummer zu ermitteln, um sie zu erhalten)

Frage:

Wie kann ich diese Daten in PHP oben verwenden, um die Spaltennummer der Elemente in der letzten Zeile so zu ändern, dass sie das 12-Raster ausfüllen (damit sie zentriert werden)?

13
CyberJunkie

Ich glaube, ich habe die Lösung gefunden, indem ich zuerst herausfand, bei welchem ​​Element die letzte Zeile beginnt und die entsprechende Spaltennummer auf alle Elemente in dieser Zeile anwendet:

<?php
$max_columns = 3; //columns will arrange to any number (as long as it is evenly divisible by 12)
$column = 12/$max_columns; //column number
$total_items = $loop->post_count;
$remainder = $loop->post_count%$max_columns; //how many items are in the last row
$first_row_item = ($total_items - $remainder); //first item in the last row
?>

<?php $i=0; // counter ?>

<?php while ( have_posts() ) : the_post(); ?> 

    <?php if ($i%$max_columns==0) { // if counter is multiple of 3 ?>
    <div class="row">
    <?php } ?>

    <?php if ($i >= $first_row_item) { //if in last row ?>   
    <div class="col-md-<?php echo 12/$remainder; ?>">
    <?php } else { ?>
    <div class="col-md-<?php echo $column; ?>">
    <?php } ?>
        Content...
    </div>        

    <?php $i++; ?>

    <?php if($i%$max_columns==0) { // if counter is multiple of 3 ?>
    </div>
    <?php } ?>

<?php endwhile; ?>

<?php if($i%$max_columns!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>

Der Vorteil ist, dass zu $max_columns eine beliebige Zahl (gleichmäßig durch 12 teilbar) hinzugefügt werden kann, und es werden die richtigen Spalten angewendet.

2
CyberJunkie

Ihre Frage hat mir gefallen, weil ich an einer sehr ähnlichen Situation arbeite. Da andere Antworten etwas länger sind, habe ich mich entschieden, meine hier zu lassen. Für mich sind die weniger verwendeten Variablen die beste Lösung.

BootstrapContentArranger.php

<?php
function BootstrapContentArrange($i) {
    $items = $i;                // qnt of items
    $rows = ceil($items/3);     // rows to fill
    $lr = $items%3;             // last row items
    $lrc = $lr;                 // counter to last row

    while ($items > 0) {        // while still have items
        $cell = 0;
        if ($rows > 1) {        // if not last row...
            echo '<div class="row">'.PHP_EOL;
            while ($cell < 3) {     // iterate with 3x4 cols
                echo '<div class="col-md-4">Content</div>'.PHP_EOL;
                $cell++;
            }
            echo "</div>".PHP_EOL;
        $rows--;        // end a row
        } elseif ($rows == 1 && $lr > 0) {      // if last row and still has items
            echo '<div class="row">'.PHP_EOL;
            while ($lrc > 0) {      // iterate over qnt of remaining items
                $lr == 2 ?      // is it two?
                    print('<div class="col-md-6">Content</div>'.PHP_EOL) :  // makes 2x6 row
                    print('<div class="col-md-12">Content</div>'.PHP_EOL); // makes 1x12 row
                $lrc--;
            } 
            echo "</div>".PHP_EOL;
            break;
        } else {        // if round qnt of items (exact multiple of 3)
            echo '<div class="row">'.PHP_EOL;
            while ($cell < 3) {     // iterate as usual
                echo '<div class="col-md-4">Content</div>'.PHP_EOL;
                $cell++;
            }
            echo "</div>".PHP_EOL;
            break;
        }
        $items--;       // decrement items until it's over or it breaks
    }
}

Testfälle

BootstrapContentArrange(3);
BootstrapContentArrange(11);
BootstrapContentArrange(1);
  1. 3 Elemente , Ausgänge:

<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>

  1. 11 Positionen , Ausgänge:

<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
</div>

  1. Ein einzelner Artikel , gibt aus:

<div class="row">
<div class="col-md-12">Content</div>
</div>

Hinweis : Sie können den PHP_EOL entfernen.

8
Alan Machado

Jedes Mal, wenn ich dies tun muss, benutze ich array_chunk, um einen richtigen Array-Block für meine Zeilen und Spalten zu erstellen.

Zum Beispiel haben Sie:

$posts = [['id' => 1], ['id' => 2] ...]

Anstelle einer Schleife und einer Berechnung, ob eine Zeile hinzugefügt werden soll, erstellen Sie Teile Ihrer Posts:

$posts = [['id' => 1], ['id' => 2] ...]

$postChunks = array_chunk($posts, 4); // 4 is used to have 4 items in a row
foreach ($postChunks as $posts) {
    <div class="row">
        foreach ($posts as $post) {
            <div class="col-md-3">
                <?=$post['id'];?>
            </div>     
        }
    </div>
}
6
dpitkevics

Drucken Sie jeweils eine Zeile und legen Sie die HTML-Klasse für jedes Element fest, je nachdem, wie voll die Zeile ist. für 0 col-md-4, für 1 col-md-12 ... Sie benötigen einige Hilfsstrukturen. Drucken Sie schließlich die letzte Zeile aus, wenn sich etwas im Puffer befindet.

/**
 * Prints the row in a grid
 * @param array $posts
 * @param string $class
 */
function printRow($posts, $class) {
    echo '<div class="row">';

    foreach ($posts as $post) {
        echo '<div class="' . $class . '">' . $post . '</div>';
    }

    echo '</div>';
}

$i = 0;
$htmlClasses = ['col-md-4', 'col-md-12', 'col-md-6']; //helper for setting html classes
$buffer = []; //helper array to hold row elements

while (have_posts()) {
    the_post();
    $i++;

    $mod = $i % 3;

    //determine html class
    $htmlClass = $htmlClasses[$mod];

    if ($mod > 0) {
        $buffer[] = $currentPost; //this is the post content
    } else {
        printRow($buffer, $htmlClass);
        $buffer = [];
    }
}

//printing final row if there are elements
if (!empty($buffer)) {
    printRow($buffer, $htmlClass);
}
1
Weltschmerz

Warum bewertest du dein Modulo nicht?

$two = false; 
if($i%3 == 2)
{
      <div class="col-md-6">
         Content...
      </div>
      $two = true;  
}

if($i%3 == 1)
{
      if($two)
      {
          <div class="col-md-6">
              Content...
          </div>
      }
      else
      {
          <div class="col-md-12">
              Content...
          </div>              
      }          
}
1
Ralph Melhem
        <?php
            //total products or items you have
            $total_pr = count($products);

            //grid of columns you want 
            $grid = 3;
            $tol_raw = ceil($total_pr / $grid);
            $count =0;
        ?>


        <?php for($i=0;$i<$tol_raw;$i++): ?>
            <?php

            $repeat = $grid;
            if($total_pr<$grid)$repeat = $total_pr;
            $total_pr -= $repeat;

            ?>
            <div class="row">
                <?php for($pr=0;$pr<$repeat;$pr++):?>
                    <?php $product = $products[$count]; ?>
                     <!-- column selection is based onn your grid -->
                    <div class="col-md-4">
                         //do whatever you want to do here
                    </div>
                    <?php $count++; ?>
                <?php endfor; ?>
            </div>
        <?php endfor; ?>
0
Ashok Choudhary