Create portfolio cols in Bootstrap

[remove]

I'am trying to create a simple portfolio page. It is a harder then I thought to create cols automatically.

Every child is a portfolio item (image, title, text). 

Work

-a

-b

-c 

This is what I came up with. I've been starring at it for ours but can't get it to work

<?php
	$portfolio = $pages->get("/work/")->children;
	foreach($portfolio as $portfolio_item) { ?>
		    <div class="col-md-4">
		        <?php echo $portfolio_item->body;?>
		    </div>
	<?php	
	}
	?>

[totoff]

Hi,

given your children of /work/ have a body field, this code should work (though not tested):

<?php
$portfolio = $pages->get("/work/")->children;
foreach($portfolio as $portfolio_item) {
	 echo "<div class='col-md-4'>" . $portfolio_item->body . "</div>";	
}

[PhotoWebMax]

Are all your portfolio items the same size? If not, what happens to the column grid system when using different sizes and orientations?

[bernhard]

what is not working? did you put your divs inside a div class="row"?

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

i prefer pocketgrid (got the hint on this forum)

[remove]

@PhotoWebMax: my images are the same size. Bootstrap uses class "img-responsive", so images resize automatically.

@BernHardB: I came a little bit further. I added a link to details page but can not get it into rows. my code is now. Any suggestions?

$items = $page->children;

		foreach ($items as $item) {
		
			echo "<div class='col-md-4'>
			
			<img src='{$item->werk_afbeelding->first()->url}' />
							
			<h4>$item->werk_titel</h4>
			
			<p>$item->werk_intro</p>
			
			<a href='{$item->url}'>Lees meer</a>
		
			</div>";
		}

[bernhard]

hi toothpaste,

does this one help? https://processwire.com/talk/topic/8295-blog-profile-displaying-posts-in-multiple-columns/?p=80459

[remove]

I would like to keep benefits of Bootstrap. This is my latest attempt but doesn't work. 

<div class="container">
	<div class="row">
		<?php
			$items = $page->children;
			$i = 0;
			
			foreach ($items as $item) {
		
			echo "<div class='col-md-4'>
			<a href='{$item->url}'><img src='{$item->werk_afbeelding->first()->url}' />
			<h4>$item->werk_titel</h4>
			<p>$item->werk_intro</p></a>
			</div>";
			
			$i++;
						
			if ($i = 3) {
					echo "</div>";
					echo "<div class='row'>";
				} else {
				echo "</div>";
				}
				
			}
		?>
	</div>
</div>

The row is not closing. I added a variable i. Is this possible?

[Joss]

The bootstrap code needed is here: http://getbootstrap.com/components/#thumbnails

I assume they automatically move onto the next row? I am sure they used to in the earlier version of Bootstrap using UL

I would not rely on img-responsive, however, as this means you get squished images of potentially different shapes. You are better using processwire size() to create identical sized shapes to start with. 

Using things like response.js you can even call different sized images for different media queries so you always have the right image.

You might also need to make sure that columns are of equal height and there are several good plugins for JQuery that do that like: 

http://brm.io/jquery-match-height/

This sort of thing is an awful lot easier with some of the newer frameworks, I am discovering.

[bernhard]

which newer frameworks are you talking about?

[Joss]

Pocketgrid is one. And any that work on a block method rather than a strict row method

You will like how complicated the code is in the css

[remove]

Please, not the Pocketgrid discusion again. It is not perfect and certainly not new. If I understand PW then PHP is smart enough.

I almost got it, but the last row is still open.

<div class="container">		
		<?php
			$items = $page->children;
			
			// set the counter to 1
			$i = 1; 
			
			echo '<div class="row">';
			
			foreach ($items as $item) {
			
			echo "<div class='col-md-4'>
			<a href='{$item->url}'><img src='{$item->werk_afbeelding->first()->url}' />
			<h4>$item->werk_titel</h4>
			<p>$item->werk_intro</p></a>";
			
			// After 3 close the row div and open a new one		
			if($i % 3 == 0) {echo '</div></div><div class="row">';}
			
			else{echo '</div>';}
			
			//End count
			$i++;

			}
		?>
</div>

[Joss]

Sorry, just trying to be helpful.

Why are you having to create new rows in the first place?

You can just do a whole load of divs and they will wrap themselves with bootstrap based on what ever column width you have set. That means they will wrap at different points depending on your classes.

See here.

http://www.bootply.com/70929

[remove]

Sorry, just trying to be helpful.

Why are you having to create new rows in the first place?

You can just do a whole load of divs and they will wrap themselves with bootstrap based on what ever column width you have set. That means they will wrap at different points depending on your classes.

See here.

http://www.bootply.com/70929

See what happens when you make one of these cols a different height, they block following cols and align. 

[Joss]

Which is why I said you should use an equal heights system above.

That way, they are neat, fit properly and you are not constrained by how much text you use.

You could also look at a solution that Pocketgrid uses that might work with bootstrap

http://arnaudleray.github.io/pocketgrid/examples/fix-for-different-block-heights-nthchild.html

Edit: the advantage of using equal heights, by the way, is if you have borders or background in your blocks, then with equal heights everything lines up.

[remove]

It works!

Here is the code for anyone who's working with Bootstrap and run into same problem. If you have a 4 cols lay-out change 

col-md-4 into col-md-3

and 

$i % 3 to $i % 4 

<div class="container">		
		<?php
			$items = $page->children;
			
			// set the counter to 1
			$i = 1; 
			
			echo '<div class="row">';
			
			foreach ($items as $item) {
			
			echo "<div class='col-md-4'>
			<a href='{$item->url}'><img src='{$item->werk_afbeelding->first()->url}' />
			<h4>$item->werk_titel</h4>
			<p>$item->werk_intro</p></a></div>";
			
			// After 3 close the row div and open a new one		
			if($i % 3 == 0) {echo '</div><div class="row">';}
						
			//End count
			$i++;

			}
		?>
	</div>
</div>