Blog profile - displaying posts in multiple columns ?

[Maverick]

Hey there guys,

I got the blog profile as learning environment and trying to understand pw and php in general, going through the tutorials etc...

what I wanted to try is to split the posts content area in multiple columns. Default it's standard one column displaying posts in a vertical way.

<div id="bodycopy">

						<?php 
						if($headline) echo "<h2>$headline</h2>"; 
						echo $content;
						?>
</div>

How would you go about splitting the posts into 4 or 5 columns?

I've tried to split it just by css

#bodycopy{
width: 25%;
	float: left;
	
}

but that's only making bodycopy to be 25% which isn't the goal here

Any ideas? directions?

[kongondo]

Target the div.post instead. Each post is wrapped in a <div class='post'>.....</div>

[bernhard]

hi luckybonanza,

welcome to the forum. with processwire you have complete control over how you want to present your data, but that means you should have at least basic understanding of HTML + CSS.

what you want to achieve is called a "grid". you can use bootstrap for example: http://getbootstrap.com/examples/grid/ or pocketgrid

of course that are just 2 possibilities of many many more...

[Maverick]

kongondo, thanks for pointing it out

BerhnhardB, interesting, so let's say the blog profile uses bootstrap grids, to get posts nested inside of a grid, perhaps I would need to do something with this on line 21 in post.php

<div class='post' id='post-<?php echo $page->id; ?>'>

and change it with something like this...

<div class="row">
<div class='post col-md-3' id='post-<?php echo $page->id; ?>'>

but by doing this I'm not really splitting the posts into columns...

any possible directions on using grids as solution?

[bernhard]

hm... not really

read here: http://getbootstrap.com/css/#grid-example-basic

sorry, not enough time to go in detail. note that bootstrap is only one option that is not built into the blog profile! you would have to include it to your head section: http://getbootstrap.com/getting-started/

[Maverick]

I understand that bootstrap is one of many options for gird. The blog profile itself is made with skeleton grid. With skeleton instead of col-md-3 it would be three columns (and I realize the grids are different), but it was just an example. From what I've noticed there is more documentation for bootstrap than any other grid system so I just went with your suggestion

but I suppose I should not add 

<div class="row">

before line 21 in post.php, if I remove it it actually works with grid (either bootstrap or skeleton) without messing with the existing css like this

.post {
width: 25%;
    float: left;
    
}

[bernhard]

i think you would have to put the surrounding <div class="row"> into markup/posts.php and close it after every second item (if you have 2 columns) so that it does not get messed up when you have different sizes of your postings.

<div class="row">
   <div class="col-md6">post 1</div>
   <div class="col-md6">post 2</div>
</div>
<div class="row">
   <div class="col-md6">post 3</div>
   <div class="col-md6">post 4</div>
</div>

see here what i mean: http://jsfiddle.net/KyleMit/DVE4f/

that's why i'm using pocketgrid! the markup is like this:

<div class="block-group">
   <div class="block col3">post 1</div>
   <div class="block col3">post 2</div>
   <div class="block col3">post 3</div>
   <div class="block col3">post 4</div>
   <div class="block col3">post 5</div>
   <div class="block col3">post 6</div>
</div>

so you can "foreach" all your items into ONE surrounding block-group-div:

<div class="block-group" style="text-align: center;">
	<?php foreach ($page->locations as $loc) { ?>
		<div class="col3 block">
			<h3><?= $loc->title ?></h3>
			<p><?= nl2br($loc->adresse) ?></p>
			<p><small><a href="<?= $loc->website ?>" target="_blank"><?= $loc->website ?></a></small></p>
		</div>
	<?php } ?>
</div>

check this fiddle i made up for pocketgrid 3 and 5 (update) columns: http://jsfiddle.net/zqwahva1/1/ (resize window to see effects)

code above is a 3-column example, you can see it here: http://www.bio-fisch.at/gastronomie/