Retro theme tutorials (part III): How to create a proper portfolio page

I noticed that a couple of you have a problem with creating portfolio page without sidebar and project overview with slideshow gallery. I want to thank mdusing for showing so much interest in this theme and giving me a couple new ideas for my tutorials.

Step 1: Preparing the layout

First, let’s create a new page and enter data for page title (“My portfolio”) and page content (page description).
Now, we insert a custom field:

  • name: template
  • value: “wide”

retro_tut_3_0

This will remove sidebar from content layout and give more content space. Update your post.

Step 2: Add project to your layout

Let us add projects to prepared layout. Create new page, enter project title, description and place it under “My Portfolio” page.
Now, we insert first custom field that will say this is a project page and replace standard sidebar with portfolio navigation:

  • name: template
  • value: “project-view”

retro_tut_3_1

Our second custom field will add a thumbnail to portfolio page:

  • name: thumb
  • value: html image tag (enter your own image source)

retro_tut_3_2

Third custom field add a short description on portfolio page and in portfolio navigation on project page:

  • name: clean-desc
  • value: short project description (enter your project description)

retro_tut_3_3

And finally, fourth custom field adds image slideshow on top of project page:

  • name: gallery
  • value: html image tags (enter your own image sources)

retro_tut_3_4

Do not forget to add a css class “thumb” to gallery images.