Jump to content

Create portfolio cols in Bootstrap


remove
 Share

Recommended Posts

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	
	}
	?>

post-2698-0-70229400-1416092371_thumb.pn

Link to comment
Share on other sites

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>";	
}
Link to comment
Share on other sites

@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>";
		}

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...