Portfolio site

[aren]

Hey everyone,

I'm trying to build a single-page portfolio on ProcessWire, I think I've got the header and footer right, but I'm having doubts on how to setup the portfolio area. I was hoping you guys could give me a hand since I'm very used to ExpressionEngine designer-friendly tags.

My english is not very good so I created an image to show what I'm trying to do:

http://i46.tinypic.com/23r1tl3.png

So I'm trying to figure out is:

-how to create the slider for every project I add

-how to create tags or categories for every project

The date I suppose I should use the datepicker field, right? And title and description are basic text fields...

[Joss]

Hi Aren

I haven't used EE so I can't help you "translate"

However, I will just deal with the slideshow for the moment.

I will assume that the slideshow is just an image for the moment.

You can do this with just one field - create a new field using the Images type. Call it slide_images (or anything)

You can set that field to upload as many images as you like. It also comes with a description field which you can use for a basic caption.

Add it to a template.

The images field will return an array of the images. So, in the template file do:

<?php foreach($page->slide_images as $image) { ?>
    <img src="<?php echo $image->url; ?>" />
    <p><?php echo $image->description; ?></p>
<?php } ?>

That will return all your images - all you need to do is to make that work with your favourite slider!

If you want a much more complicated system, you can use "repeater" fields, which is a way of grouping fields together and repeating them in the form, and also the Thumbnails  module, which is an alternative image field (crop-image) that allows you to create whatever thumbnails you want while uploading image.

http://modules.processwire.com/modules/fieldtype-crop-image/

http://modules.processwire.com/modules/fieldtype-repeater/

Joss

[bfncs]

Hi Aren,

Joss should have pointed out nearly everything you need to know about the image slider integration in the backend.

The rest should be pretty straightforward, just add fields for all kinds of information you want to add for your project:

• Project Title (Text)
• Project Description (Textarea, maybe with TinyMCE)
• Tags (Page with Autocomplete, have a look at this thread for more information on how to implement it)
• Project date (Date)

[aren]

<?php foreach($page->slide_images as $image) { ?>
    <img src="<?php echo $image->url; ?>" />
    <p><?php echo $image->description; ?></p>
<?php } ?>

Hey Joss,

What the curly braces in the code mean?

Thanks guys. 

[Joss]

That is just bracketing the loop up.

"For Each of the Following items in an array do something until the array runs out."

When you create an images field, unless you set it to only allow one image, it will always be an array of images. 

If you have added three images to the field you will have an array of three images and all the details about those images. In this case, we want the file name and the path to where it is kept.

So, $page->slide_images retrieves the entire array, and we want to split that up into bits and put each bit of it into a variable called $image.

Now we can get at the individual elements - $image->url will give the path and file name for the first image in the array. Then it hits the closing curly bracket which tells it to go back to the start and do the trick with the next item in the list.

It will do that three times, since that is how many images we have loaded into our field.

In music, it would be a coda :||

Personally, if that was used instead I would be much more comfortable!

Though I am not sure what the coding equivalent of "repeat until fade" would be.

There you go - I fancied writing out an overly long answer. It has been one of those days!

[aren]

Thank you, Joss! Really appreciate your time for the explanation!

[JeffS]

Here is an example of a portfolio listing with bootstrap structure for the html. I coded this as php-html but personally prefer to make something like this a reusable function.   

/**
 * (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 ?>

Note: Bootstrap thumbnails in a .fluid-row have a margin issue on the subsequent rows (versions 2.x). That is why I closed the ul and opened a new one since it would resolve the issue across all browsers.  Other fixes for this bootstrap bug are css :nth-of-type or require javascript.  

[niutech]

This is how you could do a portfolio site using Smarty Templating:

First, build a structure like this:

Projects (template: projects)
 - Project 1 (template: project)
 - Project 2
 - Project 3
Tags (hidden, no template)
 - Tag 1
 - Tag 2
 - Tag 3

Second, for each project page add fields:

- title
- description
- tags (type: page)
- date
- images

Third, create the Smarty template file projects.php in your /site/templates, similar to this:

{include './head.inc'}

<h1>{$page->title}</h1>   {* title of the Projects site *}

{foreach $page->children as $child}   {* we are looping through projects *}
    <div class="project">
    <ul class="slider">
    {foreach $child->images as $image}   {* now we are looping through project images *}
        <li><img src="{$image->url}" alt="{$image->description}" /></li>
    {/foreach}
    </ul>
    <div class="rightside">
    <h2><a href="{$child->url}">{$child->title}</a></h2>   {* project title *}
    <p>{$child->description}</p>   {* project description *}
    <p>Filled under:
    {foreach $child->tags as $tag}   {* now we are looping through project tags *}
        <a href="{$tag->url}">{$tag->title}</a>
    {/foreach}
    </p>
    <p>Project added on: {$child->date|date_format:"%D"}</p>   {* project date *}
    </div>
{/foreach}

{include './foot.inc'}

Fourth, create the Smarty template file project.php with this content:

{include './head.inc'}

<h1>{$page->title}</h1>   {* project title *}
<ul class="slider">
{foreach $page->images as $image}   {* now we are looping through project images *}
    <li><img src="{$image->url}" alt="{$image->description}" /></li>
{/foreach}
</ul>
<p>{$page->description}</p>   {* project description *}
<p>Filled under:
{foreach $page->tags as $tag}   {* now we are looping through project tags *}
    <a href="{$tag->url}">{$tag->title}</a>
{/foreach}
</p>
<p>Project added on: {$page->date|date_format:"%D"}</p>   {* project date *}

{include './foot.inc'}

The rest is some JavaScript for sliders (e.g. Nivo slider) and a bit of CSS.

(Disclaimer: I have not tested this code on a live server, writing from my mind)