Showcase User Guide

The Layers Showcase  plugin is a Layers extension created by the Layers team for adding portfolio and gallery support to your Layers site.

Showcase will add a new post type to your WordPress admin menu called “Projects,” a new Layers Projects widget, and a Projects page template.

Support

To report issues with Showcase, you are welcomed to send us a question via the Layers Messenger under your Layers Dashboard.

Install

  1. You must have the latest version of Layers installed. See How to Update Layers if you’re unsure.
  2. From the WordPress admin, go to PLUGINSADD NEW
  3. Click on UPLOAD PLUGIN 
  4. Click on CHOOSE FILE in the center white box and navigate to the to file, select it and click  OPEN
  5. Click INSTALL NOW
  6. When complete, click Activate Plugin
  7. You will be directed to a getting started wizard that provides an overview of the steps in this guide, which you can return to any time under  LayersShowcase Help.

Configure WordPress

Showcase needs a few things in WordPress to be optimal. These settings are part of a standard Layers setup, but are worth double-checking before you get started:

  1. Go to SettingsPermalinks
  2. Ensure Date or Post Name (recommended) is selected and click Save.
    • Save even if this was selected to load the new post type and category.
  3. Go to Settings Media
  4. Ensure the Medium image max width is 600 and click Save.
    • If you want to use the Masonry layout (where images of different dimensions lock together nicely), make sure the max height is 9999
  5. If you plan to use images you have already uploaded, you will need to regenerate your thumbnails

Recommended Image Sizes

  • For best results, upload images at least 1000px wide, saved at 100% quality. WordPress will take care of jpg compression and resizing for the templates itself.
  • SVGs are not natively supported in WordPress as image objects. We recommend creating a gif to showcase animations, and link to a demo where needed from the Project post.
  • Animated GIF files and cinemagraphs (JPG) will not work anymore if they are cropped. These file types will not be affected in archives or your single posts if List or Grid is used. For widgets, make sure the Image Ratio is None.

This guilde will walk you through the following:

Project Pages

You may create a static Showcase page which displays all your project posts by going to PagesAdd New and selecting the Project page template.

This template can be customized just like your Project Category archives in the Showcase Customizer settings, explained in detail later in the guide.

This page is created automatically if you use the demo content.

Widgets

Showcase includes a Projects widget for displaying project posts in any Layers page. It can be used alone to create a custom Projects page vs the static page template, or in combination with other Layers widgets. The Project Widget is explained in more detail later in this guide.

Project Posts

Before you can customize anything, you need content. For best results, we recommend creating your own posts vs. loading demo content, to ensure your content does not end up with tags or other data that don’t belong on your portfolio. Click the Project Posts link in the table of contents to the left or follow the link at the bottom of this post to jump to that section.

Using Demo Content

A demo content file is linked from the help wizard under LAYERSSHOWCASE HELP

To install it:

  1. Go to ToolsImport and select WordPress
  2. Browse to the xml file and select it
  3. Click Upload File and Import
  4. Change the author to you and proceed
  5. When finished, go to Projects

We recommend you read through how to create a Project from scratch so you understand all the options, up next →

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

Featured Image

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.

Project Gallery

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.

Customizing Projects

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.

Linking Projects

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 →

The Project post type added with Showcase can be displayed in three different ways, using traditional  category archives, a page template, or with the Project widget in a page you build with Layers.

Project Page Template

This page displays all your project posts using the archive layout and is created automatically, but can be deleted or left unlinked if you prefer.

If you need to create a new page using this template at some point, go to PAGESADD NEW and select the Project page template. You only need one page linked to this template.

This template is identical to the Project Cateory archives and does not have a widget area. It will display all projects from all categories with pagination, so is optional if you prefer to build a custom Layout using widgets, described in a minute.

The Project page and category views can be customized just like your single Project Posts in the Customizer.

Customizing Archives

The Showcase options for your Projects archive give you control over the colors, text alignment and detail visibility of Projects as they appear in category archives or Project page template.

Post Elements & Lightbox

These options allow you to customize the layout and display of elements in your Projects pages in a similar way to the Project widget.

  1. View one of your Project categories, or the page using the Project page template.
  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 Archive PAGE
  5. Choose a Layout. 
  6. Choose a List Style.
    • Grid will align all posts in a uniform grid with same-height columns conforming to the tallest image in the row and is best used with an image ratio or uniform height images.
    • Masonry will align all posts in a brick-and-mortar style where images of varying heights can lock together dynamically. Best used when your content is mixed.
  7. Choose a number of columns.
    • If 1 column is chosen, your images need to be hi-res, at least 2000px wide if the Full Width layout is used, and 1000px wide for boxed for best results.
  8. Choose the number of posts to show per page. To show all, enter a number higher than the total number of Projects.
  9. Under Title & Excerpt Position, choose Regular  or Overlay. Like the widget, Overlay will show images only, where the text/details aren’t visible until the mouse is hovered over.
  10. Choose an Image Ratio if you are using Grid and would like to force your images into a uniform dimension.
    • Your images need to be larger than 600px wide and your media settings configured for these to work well.
    • Refer back to Showcase Setup for image information if needed.
  11. Choose a text alignment (text aligns left by default)
    • This affects the text in each Project post. To change the alignment of theme elements such as the title, header etc, refer to the Header options panel.
  12. Under Display, uncheck a box to hide any post elements you don’t want displayed:
    • Gutter (space between columns),
    • Media (images or video),
    • Category link,
    • Titles
    • Excerpts (hide these if you haven’t set custom excerpts)
    • Call To Action (buttons)
  13. Uncheck Pagination to hide the more posts links. We recommend ensuring the posts per page is higher than your total post count rather than hiding pagination to ensure new projects you add can be seen
  14. Check Popup Thumbnails To Lightbox to enable the lightbox for images. See notes below on how this works.
    • Showcase uses a built-in lightbox (PrettyPhoto) which will open images on your project archive in a nice overlay when this setting is on
    • Posts with a project gallery will open a slideshow in a nice overlay when this setting is on.
    • At this time there is no support for video lightboxes in archives – if your site contains video content we recommend only enabling lightbox for Project posts.
  15. Under Details, you can customize the meta title, or backspace it out to have no heading above the details meta.
  16. 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.
  17. Uncheck Tags to hide the tag links. If your project has no tags, this option is ignored.

Colors

  1. Colors for elements in the Archives and Project page template are found under the Styling section of the Archive Page options.
  2. Choose your desired colors for the post background, title, excerpt, details and button.
    • You will be able to control the visibility of these elements in the next section.
  3. Choose a color for the category filter. This will turn the filter links into buttons, which use Layers auto-invert technology to automatically adjust the text color.

 

The background style is related to each Project post in the list, not the page itself. For control of theme styling and background colors, check out Layers Pro

Custom Showcase Pages

The Project page template and archive views do not have widget areas for further customization of content, but you can create custom landing pages for categories or your showcase by using a Layers page with the Project widget either by itself or in combination with other Layers widgets. The Project widget is explained in more detail in the next section.

Linking Project Pages

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

 

You can create a custom showcase by starting with a preset Showcase layout under LayersAdd New Page, or create one from scratch. The following steps walk you through creating a new page to give you the best overview of how to setup the widget.

Create the Page

  1. Go to PagesAdd New
  2. Give your page a Title
  3. Choose the Layers Template from the Page Template drop-down in the editor sidebar.
    • page-templates
  4. Click Publish
  5. Click  Edit Layout.

Customize the Layout

  1. Expand the Edit Layout panel
  2. Click the Body panel for your page to expand it
  3. Click +Add a Widget and choose the Projects widget

When you add a new Projects widget, or if you have created a page using one of the Preset layouts, the widget will display with some default settings.

Click the widget to expand the options panel. You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

showcase-widget

1 – Layout

This section sets the widget content’s width. The widget itself will always be full width to the page to allow for custom backgrounds.

  • Boxed will limit the width of the widget content (the columns or posts), title and description to around 1040px and center it.
  • Full Width will expand the widget content to the width of the page. This also makes each column wider.

For best results when using Full Width, your featured images need to be at least 1000px wide for 2 columns or higher, or 2000px wide for 1 column/list styles. Refer back to Showcase Setup for image settings and information if needed.

2 – Display

This section controls the visibility of all the elements your posts include by default.

TITLE & EXCERPT POSITION

  • Regular places the post title and excerpt below the image
  • Overlay places the post title and project details on top of the image when the mouse hovers over it. This option is best used with custom excerpts, or excerpts disabled:

Show Project Filter

On by default. When checked, this option displays your Project category links at the top of the post list in alphabetical order. These enable your visitors to filter posts shown in the widget by category without leaving the page.

To test the filter, view the page in a new tab after Saving your changes. Do not click filter links in the Customizer preview.

Show Featured Images

On by default. Uncheck this option to hide the featured images or video attached to your posts. This media will still display on the post itself.

Show Project Titles

On by default. Uncheck this option to hide the post title.

Show Post Excerpts

This option is only available when using the Regular style to keep long excerpts from breaking Overlays.

On by default. Uncheck this option to hide the excerpt.

Excerpt Length

If Show Post Excerpts is checked, enter your desired character count here (200 by default). For best results add custom excerpts to your Projects to avoid your content being cut off with an elipses.

Show “View Project” Buttons

On by default. Uncheck this option to hide the View Project button.

“View Project” Text

If Show “View Project” Buttons is checked, you may customize the button text here

Project Detail Label

If using the Regular display, you can customize the Project Details label here, or backspace it out to have no heading above the details meta.

  • Uncheck a box to hide the IconsClientWebsiteRole or Date labels.
  • Uncheck Tags to hide the tag links. If your project has no tags, this option is ignored.

Show Pagination

On by default. When checked,  this option displays pagination below the posts when there are more posts than your posts per page setting. This is best used when the filter is disabled and you are using the widget to display a single category. To ensure all posts are displayed all the time with the filter enabled, simply ensure the Number of Items to Show option is set oa  number higher than your total projects.

Popup Projects to Lightbox

Showcase uses a built-in lightbox (PrettyPhoto) which will open your project Featured Image and Project Gallery images in a nice overlay when this option is checked.

Videos ignore this setting. We recommend not using lightbox on Showcases containing video content. To encourage visitors to view the main Project post containing videos mixed with galleries, make sure the post has a Featured Image.

 

3 – Columns

COLUMNS

Choose the number of columns for your layout, to a maximum of 6.

  • The number of columns you choose combined with the Layout will determine how large featured images in your posts need to be to fill the column space.
  • For best results, use images at least 1000px wide.

BACKGROUND COLOR

Click Select Color to bring up the color wheel to choose a color for the post columns, if desired. You may optionally enter a color manually using its HEX code.

  • Background colors will automatically convert the post content text color if you have not set a specific content color using the Showcase Styling options. Dark background colors will have white text, and light colors will have black text.

GUTTER

This option controls spacing between posts in the grid.

Uncheck the gutter option to remove the spacing.

4 – Buttons

The button option allows you to customize the color and size of the View Project buttons. Skip if you disabled buttons in the Display options.

BUTTON SIZE

Choose from Small, Medium or Large – changes the text size and padding of the button

BACKGROUND COLOR

Click Select Color to bring up the color wheel to choose a color for the post columns, if desired. You may optionally enter a color manually using its HEX code.

  • The button text will change to light or dark automatically depending on your chosen button color.
  • The button will lighten automatically on mouse-over (hover).

5 – List Style

  • Grid will arrange your columns in a uniform grid with an equal height on all column blocks. This is best if your images are all a uniform height or you use a specific image ratio.
    • When using 1 column, ensure Grid is set.
  • Masonry allows each post block to fit together at various heights (such as Pinterest) and is ideal if you want your images to use their original dimensions

6 – Image Ratio

Image Ratio options control how your featured images are scaled or cropped.

The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 960px wide.

  • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center(boxed layout) or 1000px wide (full width). The original height is maintained.
  • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center (boxed layout) or 1000px wide (full width).
  • Square: crops your image to 480×480 from center and scales responsively(boxed) or 1000px by 1000px scaled responsively (full width).
  • Original: Uses the original image, scaled responsively to fit the layout. For boxed layouts, this is a max of 630px wide, for Full Width is 1000px wide.
  • Circle: Sets a radius on your image.  Do not use with video content without featured images.

7 – Background

The background option affects the widget background and will span full width of the page.

BACKGROUND COLOR

Click SELECT COLOR to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

  • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.

BACKROUND IMAGE

Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

  • Textures, photos and images without embedded text are best.
  • Full-size images  should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
  • Tiles or repeatable images can be any size you want.

When you set a background image, the following settings will appear:

BACKGROUND REPEAT

Enabled if a Background Image is selected. Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

BACKGROUND POSITION

This option aligns your image and can help you adjust the placement of the subject of your background if needed.

Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

Stretch

Check this option if you want your image to always fill the widget background at all screen sizes.

Darken

Check this option to add an overlay to your image that darkens it. This is helpful on busy backgrounds, or images with high contrast and may help your content stand out better.

 

8 – Widget Title & Description

TITLE

Enter a Title for the widget section, if desired, or backspace the default title to remove it.

Click thetext-icon button to choose your alignment, size and color:

Text Align

The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified.

Text Size

Choose from Small, Medium or Large

Each size option is pre-configured with optimal balance, line height and font-size combinations and will vary slightly depending on your font choice in Site Settings, or custom styling added through a Style Kit or Child Theme.

Text Color

Depending on the background color of the widget, your text will be black or white by default, but can be customized here.

Click on SELECT COLOR  to expand the color wheel and click to select a color from the palette or enter an HTML hex value.

DESCRIPTION

The Description field, containing “Browse through our finest work, created by a team of incredibly talented people.” by default, will display just below the widget title and above the widget content. Clicking into the description will activate the rich text editor to aid you in formatting your content, and supports basic HTML input via the Code </>view, much like the WordPress post editor Text tab.

For best results, limit the description to 1-3 sentences to introduce the content in this section of your layout, or backspace the default text for no description.

  • You cannot put scripts into this field such as javascript snippets
  • You should not paste text/html from Word or other text editors into this field or it may carry over unpredictable code that causes formatting issues.
  • Shortcodes are OK, but the element pulled in may not jive well with the widget limitations and may require Advanced CSS styling.

CONTENT EDITOR TOOLBAR

9 – Widget Options

These menus allow you to filter the posts the widget displays.

CATEGORY TO DISPLAY

Leave this set to All to show all project posts, or select a specific category. Note that if the Project Filter is enabled, visitors will be able to filter the list to show all or other categories regardless of this setting, which only designates what is shown by default when the page is first loaded.

NUMBER OF ITEMS TO SHOW

Choose how many posts to pull in. For best results, choose a multiple of the number of columns you chose in the design bar. For example, if you chose 3 columns, you should set this to 3,6,9, or 12 etc.

  • If you have sticky posts, increase this by the number of stickies shown.
  • To show all posts, select a number higher than your total number of Projects.

SORT BY

Choose how to sort your posts, if desired. By default they are listed in chronological order with the newest post first/left to right.

Custom Order is achieved by numbering your posts in the Order field of the post editor or Quick Edit options in the Projects list admin.

See How to Manually Order Posts for detailed steps.

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a widget with this class is loaded. This is useful in cases where you want to style widgets differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example.

You may also increase or decrease widget padding and margins here.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes, Margins and Padding 

Adding Other Widgets

You may add multiple Project widgets set to a specific category, or combine with other widgets such as Sliders or Content Widgets. Follow these links to view tutorials for how to use these widgets to display Projects in unique and truly custom ways.

Save your layout any time by clicking SAVE & PUBLISH

Each Save will create a page revision (up to 5) you can restore if you made a mistake or want to revert to a previous version.

  1. Go to http://www.layerswp.com and login
  2. Click the Downloads tab of your My Account page
  3. Click Download under Showcase and save the updated zip file to your desktop.
  4. Deactivate, delete and reinstall under Plugins in your WordPress Admin. See How to Update Layers Exensions for detailed steps.

 

Last Updated: