Showcase: Projects

Product Guides  Since: 1.0 Last Updated: Time to Read: 7 minutes

Your theme comes with a Project post type for showcasing showreels, design, art, photos or any body of work containing single videos, images or a gallery of images.

Project posts can be grouped into categories that help viewers filter results in Project archives or widgets. Each Project post is intended to showcase a single project or body of work . For example, a graphic designer may have one post for an advertising project which displays a featured image of the finished product, and several additional images of the work as used on posters, magazine ads, or photos showing the process of making the art. For photographers, your project posts may only have one image per post, which is then assigned to a common category such as Landscapes, Fashion, etc.

Project Categories

  1. Go to Projects → Categories
  2. Enter the category name and click Add Category
  3. Repeat to add more categories. Showcase is designed to handle one level of categories and will not display or breadcrumb subcategories. Use tags to link projects together that have more refined similarities, explained more later.

Project Posts

  1. Go to  Project → Add New
  2. Add a Title for your project.
  3. Optionally add some content to the post editor.
    •  For best results, keep this brief unless using the Content Bottom layout.
    • Do not insert images into the editor
  4. Fill out your Details under the Project Options area below the editor. These fields are optional and can be left blank.
    • Client: Type any text you wish.
    • Project Date: Type any text you wish.
    • Project URL: Must be a URL with https:// or http:// prefix. This is converted to a “Visit Site” link labelled “Website” in your post.
    • Project Role: Were you the developer, designer, creative director or something else? Type any text you wish.
    • All labels on the post can be changed with a translation plugin to server whatever purpose you like, or hidden.
  5. Click the Layout tab in the PROJECT OPTIONS area below the editor
    • Layout determines the placement of the content and the gallery/image of this single post
    • Gallery type determines the type of gallery to use:
      • List will display images full-width to the column one after another
      • Grid will create a masonry grid of thumbnails and allow you to choose how many columns you want
      • Slideshow will turn them into a full-width slider with thumbnail navigation below it. We recommend choosing 3 or more columns for the thumbnails.
  6. Optional: Click the Video tab in the Project Options if you would like to add a video.
    • The Video Url should be the share URL for your video on any service that supports oembed such as YouTube or Vimeo. See How to Embed Audio & Video with Layers for detailed help.
    • The Video Thumbnail is optional and is displayed in place of the Video player when the Grid or Slideshow layout is used.
  7. Set your Project Excerpt.
    • Below the Options panel you should see an Excerpt box. If not, click Screen Options at the top-right of the screen and click to enable it. While optional, excerpts are important if your Projects contain more then a few sentences, or where you want to display different or shorted introductory text in your archives/widget.
  8.  Optional: Over on the right you will see the Tags field to add some Tags (above the featured image box on the right).
    • Tags help you connect projects together that live in different categories. For example, you may have photography categories such as Landscapes, Fashion and Editorial with a mix of color, black and white, digital and film. Tags allow you to add the type (such as “Digital”) to projects in different categories. While visitors can’t filter tags in the main portfolio header, clicking a tag link under your projecs will show them an archive of all portfolios with that tag. Neat!
  9. Optional: Just above Tags is an Order field. Enter a number to “weigh” the post if you plan to manually order
  10. Select a Category
  11. Click save

At a minimum, all projects need a Featured Image. This image represents the post in archives, widgets and shares to social media, regardless if the post has a video URL or gallery.

Click Set Featured Image on the right sidebar and upload or browse to the image to use to represent this project.

A note on video posts:

 

The Video Thumbnail only enables a video lightbox on the post when the grid or slideshow is used. Even if your post only contains a Video URL, you need a feaured image to prevent the video player from loading into your archives. In most cases, you want to encourage your visitors to click through to the post view for video content, rather than have multiple video players load on an archive page.

If you want to add multiple images to a project, you can do so easily in the Project Gallery located below the Project Options:

  1. Click Add project gallery images
  2. Click a Media Library thumbnail to select it, or click Upload Files at the top left to upload more.
    • Hold down Ctrl (PC) or Cmd (Mac) when clicking the thumbnails to select multiple images at once.
  3. When you’re ready. click Add To Gallery

Rearrange your images by dragging and dropping them.

Delete images from the gallery by hovering over them and clicking the X icon.

Add More images by repeating steps 1-3.

How do I add more videos?

Showcase is not really a video gallery plugin, so is limited in its handling of video. Filmmaking or motion graphics portfolios work best with one video per project post where the category represents the body of work or thing you are showcasing.  Single video is otherwise useful for tutorials, courses, short videos of your work in the real world (such as demonstrating a physical product, or showing off your work hung in a gallery, etc) where it is followed by images or photos.

You can add additional (small file size) videos by uploading them to the media gallery. Videos must be mp4 files to work on most browsers. We don’t really recommend doing it this way though – instead, embed your videos the WordPress way by pasting the url or shortcode (if using a self-hosted video plugin) into the post editor, then use the Content Top or Content Bottom layout in combination with the List gallery type for a more fluid presentation.

Aside from the Layout and Gallery type, you can customize your Project posts using the Showcase options in the Customizer. The following steps will walk you through the options twice, once while viewing a single project post, and again while viewing a category to customize the archive view too.

Post Elements & Lightbox

  1. View one of your Project posts.
  2. Click Customize in the Admin toolbar at the top of the page.
  3. Click on Showcase to expand the options panel
  4. Click on Single Page
  5. Under Display, uncheck a box to hide the Breadcrumbs, Title, Content or Comments.
  6. Under Details, you can customize the meta title, or backspace it out to have no heading above the details meta.
  7. Uncheck a box to hide the IconsClientWebsiteRole or Date labels.
    • To hide the values themselves, edit the project and remove the values from the Details tab for the detail you no longer want on the project.
  8. Uncheck Tags to hide the tag links. If your project has no tags, this option is ignored.
  9. Uncheck Pagination to hide the Next and Previous navigation.
  10. Check Popup Thumbnails To Lightbox to enable the lightbox for images.

Showcase uses a built-in lightbox (PrettyPhoto) which will open images on your project posts in a nice overlay when this setting is on.

Videos ignore this setting. To open Videos in a lightbox from your Project post, you must add a Video Thumbnail.

Colors

Color options for elements in your single Project posts such as the titles, description, project details, breadcrumbs and pagination are found under the Single Page options under the Styling section.

  1. From Single Page, scroll down to  Styling
  2. Choose your desired colors

Custom CSS

In the spirit of keeping things simple and easy to use, we can’t cover every aspect of customization using controls here, but you can hide, color and reposition conent to a degree using Custom CSS. See our tutorial to get started.

Projects are linked automatically from the Project widget, Project page, or Project catetgory view. You can also add individual Project posts to a menu:

  1. Go to Appearance Menus
  2. Select the menu you want to edit or create a new one
  3. On the lower-left you should see a Projects box where you can select posts to add to the menu. If not, click Screen Options at top-right and enable them.
  4. To add a project, select it (or multiple) and click Add to Menu
  5. Drag and drop the links in the order you wish
  6. Click Save Changes when finished

Continue with Project Pages to learn about archives, the Project page template, and building your own with the Project widget →