Example of a portfolio listing using bootstap 2.2x and ProcessWire

processwire-bs-portfolio.php

/**
 * (c) Author - Jeff Selser 
 * 
 * Example of a portfolio listing using bootstap 2.2x and Processwire
 * as the CMF/CMS. Add this chunk of code
 * to a Processwire template where you want to render children using 
 * boostrap's thumbnails (with content).
 * 
 * I set the li to span 6 since they are in a span8 parent row (nested)
 * and I wanted 2 thumbs per row. 
 * 
 * Assumptions: You have a page with children (that are visible). 
 * 
 * You created a template with a portfolio_image field that is an image field 
 * (http://processwire.com/api/fieldtypes/images/), with cropimage added
 * (See http://modules.processwire.com/modules/fieldtype-crop-image/). 
 * 
 * You named the cropped image thumbnail. We set ours to 375,250. 
 *  
 * You created a page with a template that has that field assigned AND
 * you uploaded an image to it that is also published ;>) 
 * 
 */
   		
 		<?php $selector= $page->children; // set the var here to be whatever selector you want ?>
		<?php if (count($selector > 0)): // no point in showing html with no children right? ?>
		<section id='portfolio'>
				<?php $i = 0; ?>
				<ul class='thumbnails'>
					<?php foreach ($selector as $p):?>
					<?php $image = $p->portfolio_image;?>
					<?php $thumbnail = $image->getThumb('thumbnail'); ?>
					<li class='span6'> <!--Set the class to control the width of the element in boostrap -->
						<div class='thumbnail'> <!-- we are showing image and content. Regular thumbs would just be an a>img.thumbnail -->
							<a href='<?php echo $p->url; ?>'><img src='<?php echo $thumbnail; ?>' <?php echo ($thumbnail->description) ? "alt='{$thumbnail->description}'": "" ;?> /></a>
							<div class='caption'>
								<h3><?php echo $p->title; ?></h3>
								<p><?php echo $p->summary ?></p>
								<p><a href='<?php echo $p->url; ?>' class='btn btn-primary'>View Website Profile</a></p>
							</div>
						</div>
				    </li>
				    <?php $i++; ?>
				    <?php if ($i % 2 === 0): // if row number divided by two equals zero, close the ul and open a new one ?>
				</ul>
				<ul class='thumbnails'>
					<?php endif ?>
			<?php endforeach ?>
			</ul>
		</section>	
		<!-- end #portfolio -->
		<?php endif ?>