Replacing items in a foreach (?)

[Marty Walker]

Hi,

I'm not even sure how to ask this question technically so here goes. I'm working on a home page that'll have a grid of images like this:

But every so often I need to remove two of those images and replace it with an image twice the width and in a certain place, like this:

Any pointers? Many thanks. - Marty

[Ivan Gretsky]

Please provide the code you are using now to help us understand what is your problem. As I got it you want to temporary replace 2 items from the WireArray and insert 1 other instead. But it could be a css question as well, so please be a bit more precise.

[LostKobrakai]

Generally speaking you need some variable to determine which image fills one grid and which one two. 

foreach($page->images as $image){
  if($image->getTag('dual')){
    // some markup for the dual grid view / maybe only a class
  }else{
    // default case
  }
}

If you really need to include things from another place have a look at the WireArray functions in the cheatsheet. Then the foreach/if statement would most likely be little bit different.

[pwired]

why not simply resize a cell in a css grid manually,

it's only seconds of work.

[horst]

Hi Marty,
 
assuming you want to build a grid upon an unknown collection of images and you want to have full control, you may start with this construct and change it to suite your needs:

    echo "<br /><hr /><pre style='font-family:monospace;'>"; // only a little test unit 
    $yourImagesArray = array(   1,1,1,1,1,1,
                                1,2,1,1,1,
                                1,1,1,1,1,2,
                                1,1,1,2,1,1,1,2,1,2,1,1,1,2,1,1,1,1,2,1,1,1,2,1,1,1,2,1,2,1,1,1,2,1,1,1,1,2,1,1,1,2,1,1,1,2,1,2,1,1,1,2,1);

    // build the grid
    $images = $yourImagesArray; // containing lots of images, most with no tag or a "single" tag and some with a "twice" tag! You have to make sure it contains enough images for your grid, so.
    $i = 0;
    for ($row=1; $row<=7; $row++) {
                                                                  echo "\n$row:"; // only for the test
        for ($col=1; $col<=6; $col++) {
            // get the next image from the collection
            $img = $images[$i++];          // you would use $images->eq(++$i) with real images here!
            if (6 == $col) {                // only special case is with the last $col
                while (2 == $img) {        // last $col cannot take a "twice"-image. For the example I simply drop all "twices" while searching for a single-one.
                    $img = $images[$i++];
                }
            }
            // now we have a valid $img for our grid, so create output
            if (2 == $img) {
                $col++; // adjust the $col counter!
                echo 'oo';
            } else {
                echo 'O';
            }
        }
    }
    // ready with grid

    echo "</pre><br /><hr />";  // only for the little test unit

test output is:

1:OOOOOO
2:OooOOO
3:OOOOOO
4:OOooOO
5:OooOoo
6:OOOooO
7:OOOooO

Edited November 24, 2014 by horst