How to show video, project gallery or animated gif in portfolio grids / listings?

Besides the static featured image you can also add additional formats to be displayed in portfolio listings/grids.

1. Scroll down to Page Options of the portfolio page and select “Portfolio Item Settings”

2. In the “Appearance in Portfolio Grid” section you can select which content type to display in portfolio grid instead of featured image

Featured Image

This is a default selection. It means, that in portfolio grids/lists the featured image of the respective portfolio item will be shown.

Following settings can be made:

Click Behavior

Specify, what should happen once the website visitor clicks on the project in portfolio grid:

Link to Portfolio Page

Click on the item will load this portfolio page.

Image Lightbox

Click on the item in portfolio grid will open the lightbox with featured image. This option is useful for making project galleries in portfolio listings.

Multiple Choice

you can specify different multiple actions like linking to portfolio page AND opening the image lightbox AND linking to external URL etc. This actions will happen by clicking on the hover icons in portfolio grid.

Custom Link

You can specify the custom link which should load after clicking on the portfolio item in portfolio grid.

Click Disabled

click on the item will be disabled

Animated GIF

Using this appearance format you can display animated GIFs in portfolio grids

You can upload your animated GIF and specify the animation start type:

Animation Start

Autoplay – the animated GIF will be autoplayed in portfolio gridPlay on Hover – the animated GIF will be played on item’s hover in grid

GIF Poster

You can upload the static image as a preview of your animated GIF

Preload GIF

By default the animated GIFs load after hovering on the project in portfolio grid. Activate this setting to speed up the displaying of animated GIF in grid

Click Behavior

Specify, what should happen once the website visitor clicks on the project in portfolio grid

Video

Using this appearance format you can display videos in portfolio grids

Video Type

Select the video type to display: YouTube, Vimeo or Self-Hosted Video

Aspect Ratio

Specify the video aspect ratio to display in portfolio grid

Video ID

Specify the video ID. You can simply copy/paste the link to the video on youtube or vimeo.

Video Start

Specify the video start type:Autoplay – the video will be autoplayed in portfolio gridPlay on Hover – the video will be played on item’s hover in gridOpent in Lightbox – the video will open in the lightbox

Play On Mobiles

Activate in case this video should play on mobile devices

Click Behavior

Specify, what should happen once the website visitor clicks on the project in portfolio grid

Gallery

You can also show the project gallery in portfolio item in portfolio grid/listing.

The project gallery can be added in portfolio item using the meta box “Project Gallery” in the right sidebar:

Autoscroll

Аctivate this option to autoscroll the project gallery in portfolio grid/listing.

Click Behavior

Specify, what should happen once the website visitor clicks on the project in portfolio grid.