Adding Projects

The process of adding projects is quite similar to adding posts:

1. Go to Portfolio > Add New

2. Enter a title and some content.

3. Choose a category or more. 

This is a must, because these categories will be used to filter projects in the grid.

4. Set a featured image. The size of the featured images needs to be at least 340x340 or 640x640 if you want to support retina displays. These are the maximum default sizes, but as you saw in the Theme Customizer, you can change this maximum size to anything else.

Note the pictures will constantly resize in order to make sure that they always fill the screen. You will have to expect smaller thumbnails than this, but never larger.

5. Write some content.

6. Setup the slider and project options (more info below).

7. Write a few words excerpt (it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your page).

8. Hit “Publish” and you’re all done.

You’ll see two sections below the content window. These sections control everything related to the projects.

Project Media

This is the actual gallery. When you choose to create the gallery you will be taken to the WordPress default Media Manager. With it you can upload a large amount of images for your project or choose images from the media library, thus being able to save a lot of time when creating your projects.

You can also add videos here, by editing the video fields which appear on each image you upload - note that the videos will only work in the modal and vertical project types.

See this article for more info if you cannot get videos working:

Make sure that you don’t exaggerate with the number of images in each project, because each image will make the project load slower.

About sizes, just use whatever you’re comfortable with. There is no default or optimal size, since all the projects are highly customizable and support anything. A final note, your images will never be resized more than their original size!

Project Options

This is probably the most complex section in the theme, because it offers you a really great customization level, being able to create a lot of projects in different forms and also change projects once you’ve created them.

1. Project type

As seen in the online demo, there are three project types available in the portfolio:

  • Modal window - a project which will appear in a window floating over the thumbnails (or over the dummy background set in earlier). This project type is the most balanced one - it allows videos and pictures altogether and it is useful when you want to display regular projects or images with moderate content. Each modal project can have it’s own size so you should not worry about having portfolios with multiple dimensions, as you’ll be able to configure them and all will look perfect on any screen size.
  • Full (Vertical) - this project is good for tall content (large images or posters or stuff that looks good one above the other). If you have a really tall image you should use this project type for it. You also have some space for text available.
  • Full (Horizontal) - this type is good for projects with a lot of content, because it offers a full page with content above the big slider. It also features a cool parallax effect and the ability to play transparent images or cool backgrounds, and so on..

2. Sharing buttons

Really simple - enable or disable the sharing buttons in the project.

3. Background settings

These settings are really complex, because with them you can do really create an awesome portfolio experience! In the vertical projects by default, or the other two if you choose to work with transparent png files, you can create a cool background for the pictures to display against something. You can have images, gradients or plain colors here. Use your imagination!

4. Modal window settings

Now we have some settings just for the modal projects. As said earlier, these projects have a variable size which you can set on a per-project basis. You first have the window width (the whole window), then the window height and the slider width. The slider width should be smaller than the window width, as it should give enough space for your content. While the height is the same for both.

Note that the theme has a complex responsive algorithm in place here, so no matter what size you give, when the screen is smaller than your size (+ 100px), the project will resize. In fact, you’ll see the slider go above the content. So a window of 940px should be good for almost any desktop or laptop. Of course, you could create modal windows 1600px wide, but users with smaller screens than this will see the responsive version, so i advise against it. Try to remain around 1100x600.

5. Full (horizontal) meta

The meta information here appear only in the horizontal projects, below the title.

6. Full (horizontal) settings

You can either choose to fill up the screen or have the images centered. If you care for your images being cropped or want to do cool stuff with transparent images you should use the centered option. Otherwise, images that fill up your screen look just as fine.

7. Custom URL

If you want a thumbnail to open up a new page instead of the actual project, give it’s settings here. If you choose this option you should leave the project empty, because it will not be indexed by search engines anyway. And anytime a user clicks it’s thumbnail, it will be redirected to the proper place.

Another step that you have to do when you create such a project is to make sure that you set it’s excerpt to “link” (no quotes, no spaces, no anything, in order to ensure that it will not be included in the projects navigation)

UP NEXT: Adding Galleries