Jump to content

Recommended Posts

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:


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...

  • Like 1

Share this post

Link to post
Share on other sites

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.




  • Like 3

Share this post

Link to post
Share on other sites

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)
  • Like 1

Share this post

Link to post
Share on other sites
<?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? :mellow:

Thanks guys.  ^_^

Share this post

Link to post
Share on other sites

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!

Share this post

Link to post
Share on other sites

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>
				    <?php $i++; ?>
				    <?php if ($i % 2 === 0): // if row number divided by two equals zero, close the ul and open a new one ?>
				<ul class='thumbnails'>
					<?php endif ?>
			<?php endforeach ?>
		<!-- 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.  

Share this post

Link to post
Share on other sites

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>
    <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>
    <p>Project added on: {$child->date|date_format:"%D"}</p>   {* project date *}

{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>
<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>
<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)

  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By stanoliver
      Good morning everyone!
      I have a growing number of posts about cars, bikes, airplanes, etc. 
      The following code (below) just works fine and returns only the posts of the category=cars as I desired together with pagination.
      In my url I have for example /categories/cars/car1 or /categories/bikes/bike1
      I do want to filter my posts not only with ... category=cars ... but also with category=bikes or category=airplanes and at best:
      If my url is /categories/bikes/ then ... category=cars ... should be overwritten or replaced by ... category=bikes ... 
      If my url is /categories/airplanes/ ... then the filter should be ... category=airplanes ... (I know a work around by creating almost identical templates where I could just change the "category=cars" part of my code but that's comes of a prize by repeating a lot of identical code and is not a good habit). In the documentation I read something about the "has_parent" selector but I could not get to work it related to the urls mentioned above.
      <?php foreach ( $results = $pages->find('id>1, template=templateblogpost, category=cars, limit=5, sort=-postdate') as $post 😞?> <!-- Blog entry --> <div class="g8-card-4 g8-margin g8-white"> <!--<img src="/g8images/bridge.jpg" alt="Norway" style="width:100%">--> <div class="g8-container"> <h3><b><?= $post->title; ?></b></h3> <h5>Datum: <span class="g8-opacity"><?= $post->postdate; ?></span></h5> </div>   <div class="g8-container"> <p><?= $post->posteditor; ?></p> <div class="g8-row"> <div class="g8-col m8 s12"> <p> <a href="<?= $post->url; ?>"><button class="g8-button g8-padding-large g8-white g8-border"><b>Details lesen &raquo;</b></button></a> </p> </div> <div class="g8-col m4 g8-hide-small"> <!--<p><span class="g8-padding-large g8-right"><b>Comments &nbsp;</b> <span class="g8-badge">2</span></span></p>--> </div> </div> </div> </div> <!-- END BLOG ENTRIES --> <?php endforeach; ?>   <? echo $results->renderPager(array( 'nextItemLabel' => "rückwärts", 'previousItemLabel' => "vorwärts")); ?>
    • By Sanyaissues
      After enable the Tags File Compiler module, echoing variables with brackets syntax doesn't work. I try something simple like {page.title} and is displayed like the tag isn't parsed:
      {page.title} This problem happens with PW 3.0.108, i have another installation with 3.0.82 and it works. Any Ideas? thanks.
    • By sww
      Hey there,
      is there really no way to turn the OR logic into an AND logic when selecting pages by (e.g.) tags?
      so instead of
       $pages->find("template=exhibitions, tags=foo|bar") something like
       $pages->find("template=exhibitions, tags=foo&&bar") so the pages needs to have all requested tags, not just any of them.
    • By FrancisChung
      Does anyone here a personal portfolio site or a personal website that I can draw some inspiration from?
      I need to knock one up with minimal effort.
      I was wondering if there's any commercially available themes or solutions I can leverage?
      I looked at something called Gitshowcase but it didn't quite output what I needed, as it seems to have a very limited biography section.
    • By adrian_gp
      Hello everyone,
      I'm new in this forum and my english is not perfect so sorry for the mistakes.
      I have an Blog Project and i will use categories. 
      Here is the structure:
      Blog -> displays all the Blogposts (template=BlogPage) Post-Name -> display the specific Post (template=BlogPost) Categories -> not visible in the menu (template=CategoriesPage) Categorie-Name -> not visible in the menu (template=CategoriePage) For your information:
      (BlogPost) every blogpost has its own page (BlogPost) in Admin i can select the categorie per Field -> SelectMultiple Pages (Checkbox) (fieldname=categories) (Blog) displays all the BlogPosts and all the categories under the ParentTemplate CategoriesPage, which also have their own side Now the Problem:
      On Blog -> I would like to click on a category and only see the post that has this category checked in the BlogPost.
      CategoriePage -> what do I have to insert there to show only the specific posts which use the checked categorie?

      Let me know if you need more information

      Thanks for your support
  • Create New...