Portfolio Slideshow Pro Documentation

Basic usage

The following video will walk you through the basic operation of the plugin.

Step by Step

The following series of videos offers an in-depth guide to using Portfolio Slideshow Pro.

PSP Docs

Shortcode Attributes

If you would like to customize your slideshows on a per-slideshow basis, you can add the following attributes to the shortcode, which will temporarily override the defaults.

To select a different page parent ID for the images:

[portfolio_slideshow id=xxx]

To add a custom class to the slideshow wrapper:

[portfolio_slideshow class=alignright]

To change the image size you would use the size attribute in the shortcode like this:

[portfolio_slideshow size=thumbnail], [portfolio_slideshow size=medium], [portfolio_slideshow size=large], [portfolio_slideshow size=full], [portfolio_slideshow size=custom]

This setting can use any custom image size that you’ve registered in WordPress.

You can specify a custom image size directly in the shortcode with the height and width attributes:

[portfolio_slideshow width=600], [portfolio_slideshow height=450], [portfolio_slideshow width=600 height=450]

The height and width attributes override the size attribute and by default will not upscale or crop the images unless used with the crop attribute.

You can crop the main images to a specific size:

[portfolio_slideshow crop=true], [portfolio_slideshow crop=false]

This setting must be combined with a custom image size (either in the plugin settings or in the shortcode). Both height and width must be specified. This setting will force images to fit, may remove parts of the image, and may result in upscaled images, so try to upload images that are as close to the intended cropped size as possible.

You can add a custom slide container height:

[portfolio_slideshow slideheight=400]

Useful if you don’t want the page height to adjust with the slideshow.

Image Transition FX:

[portfolio_slideshow trans=scrollHorz]

You can use this shortcode attribute to supply any transition effect supported by jQuery Cycle, even if they’re not in the plugin! List of supported transitions here. Not all transitions will work with all themes, if in doubt, stick with fade or none.

Transition Speed:

[portfolio_slideshow speed=400]

Add a delay to the beginning of the slideshow:

[portfolio_slideshow delay=1000]

Show titles, captions, or descriptions:

[portfolio_slideshow showtitles=true], [portfolio_slideshow showcaps=true], [portfolio_slideshow showdesc=true] (use false to disable)

Center the slideshow:

[portfolio_slideshow centered=true], [portfolio_slideshow centered=false]

Time per slide when slideshow is playing (timeout):

[portfolio_slideshow timeout=4000]

Autoplay:

[portfolio_slideshow autoplay=true]

Duration:

You can set a time for the entire slideshow, in seconds, which will automatically calculate the per-slide timeout for you. This pairs nicely with the audio player support.

[portfolio_slideshow duration=300]

Audio:

You can add audio to the slideshow by specifying any MP3 URL. This feature pairs nicely with the “Duration” attribute, you can create a slideshow that lasts exactly as long as the audio file. Be careful with autoplay! If you have multiple posts on a page (the blog homepage, for example), you\’ll end up with overlapping audio. Autoplay is recommended on single pages only. You must have our free Haiku audio player plugin installed and activated for this feature to work.

[portfolio_slideshow audio=http://madebyraygun.com/uploads/audiofile.mp3]

Randomize slideshow:

[portfolio_slideshow random=true]

Exclude featured image:

[portfolio_slideshow exclude_featured=true]

Loop the slideshowg:

[portfolio_slideshow loop=true]

disable slideshow looping: [portfolio_slideshow loop=false]

Clicking on a slideshow image::

Clicking on a slideshow image can advance the slideshow, open a custom URL (set in the media uploader), open in a full-screen gallery mode, or open the full-size version of the image in a lightbox:

[portfolio_slideshow click=advance] or [portfolio_slideshow click=openurl] or [portfolio_slideshow click=fullscreen] or [portfolio_slideshow click=lightbox] or [portfolio_slideshow click=none] to deactivate all click behavior.

Click target::

If you’ve set the click behavior to open a URL, you can specify whether it should open in the current window or a new window:

[portfolio_slideshow target=current] or [portfolio_slideshow target=new] or [portfolio_slideshow target=parent] The parent option is for slideshows embedded in iframes and popups.

Navigation links can be placed at the top:

[portfolio_slideshow navpos=top]

or at the bottom: [portfolio_slideshow navpos=bottom]

Use [portfolio_slideshow navpos=disabled] to disable navigation altogether. Slideshow will still advance when clicking on slides, using the pager, or with autoplay.

Navigation link style can be selected:

[portfolio_slideshow navstyle=text] or [portfolio_slideshow navstyle=graphical]

The navigation info can be customized:

Hide the play button:

[portfolio_slideshow showplay=false]

Hide the slidecounter:

[portfolio_slideshow showinfo=false]

Pager style can be selected:

• [portfolio_slideshow pagerstyle=thumbs]
• [portfolio_slideshow pagerstyle=carousel]
• [portfolio_slideshow pagerstyle=bullets]
• [portfolio_slideshow pagerstyle=numbers]

In the carousel, you can change the number of thumbnails per row:

[portfolio_slideshow carouselsize=8]

When the thumbnail pager is selected, you can customize the thumbnail size, thumbnail margin, and whether to enable proportional (non-cropped) thumbnails:

• [portfolio_slideshow thumbnailsize=80]
• [portfolio_slideshow thumbnailmargin=10]
• [portfolio_slideshow proportionalthumbs=true]

You can also control the width of the thumbnail pager if you want to limit the number of thumbnails per row:

[portfolio_slideshow pagerwidth=500]

Pager position can be selected:

[portfolio_slideshow pagerpos=top] or [portfolio_slideshow pagerpos=bottom]

or disabled: [portfolio_slideshow pagerpos=disabled]

Toggle thumbnails can be enabled or disabled:

[portfolio_slideshow togglethumbs=true] or [portfolio_slideshow togglethumbs=false]

If toggle thumbnails are enabled, you can define the default togglestate to be open or closed:

[portfolio_slideshow togglestate=open] or [portfolio_slideshow togglestate=closed]

You can enable the fancygrid, which toggles between thumbnail view and slideshow view:

[portfolio_slideshow fancygrid=true]

Setting togglestate=open while in FancyGrid view shows thumbnails first, setting togglestate=closed will show the main image first with the option to toggle the thumbnails.

Fullscreen Mode for slideshows can be added via the shortcode or the options panel. This makes a slide open into a fullscreen, mobile-friendly slideshow when a slide is clicked, and adds a button to the nav that also activates the fullscreen slideshow.

Simply set the “Clicking on a slideshow image” option to “Opens a fullscreen slideshow” in the options panel, or add it in the shortcode for specific slideshows:

[portfolio_slideshow click=fullscreen]

Include or exclude slides:

[portfolio_slideshow include="1,2,3,4"]

[portfolio_slideshow exclude="1,2,3,4"]

You need to specify the attachment ID, which you can find in yourMedia Library by hovering over the thumbnail. You can only include attachments which are attached to the current post. Do not use these attributes simultaneously, they are mutually exclusive.

There is also an “Exclude from slideshow” checkbox in the image uploader. Instead of including or excluding slides from your slideshow, you may want to consider adding a standalone slideshow with just the images you need and inserting that instead.

Multiple slideshows per post/page:

You can insert as many slideshows as you want in a single post or page by using the include/exclude attributes, or by creating multiple standalone slideshows.

Popup Shortcode
It’s possible to create a link to a popup window that includes a slideshow with the shortcode [popup-slideshow id=xx text="Link text goes here"]. This shortcode is generated when you upload images using the standalone slideshow builder in the WordPress dashboard sidebar. Slideshow ID and link text are the only required attributes, but the shorcode supports several configuration options.

Window height: customize the height of the popup window:

[popup-slideshow windowheight=600]

Window width: customize the width of the popup window:

[popup-slideshow windowwidth=800]

Height: customize the height of the slideshow inside the popup window:

[popup-slideshow height=600]

Width: customize the width of the slideshow inside the popup window:

[popup-slideshow width=800]

Thumbnail: use a thumbnail image instead of text to trigger the popup window:

[popup-slideshow thumbnail=true]

Thumbnail size: customize the size of the thumbnail image used to trigger the popup window:

[popup-slideshow thumbnail=true thumbsize=150]

Slideheight: create a minimum fixed height for the slides inside the slideshow area (prevents items below the slideshow from adjusting to the height of the slideshow)

[popup-slideshow slideheight=400]

Center the slideshow

[popup-slideshow centered=true]

Enable the carousel pager

[popup-slideshow carousel=true] or [popup-slideshow carousel=false]

Note that the carousel pager is the only pager available in popup mode.

Carousel size: the number of thumbs to show in the carousel.

[popup-slideshow carouselsize=6]

Captions, descriptions, and titles

[popup-slideshow showcaps=true showdesc=true showtitles=true]

Autoplay

[popup-slideshow autoplay=true]

Navigation style

[popup-slideshow navstyle=graphical] or [popup-slideshow navstyle=text]

Navigation position

[popup-slideshow navpos=top] or [popup-slideshow navpos=bottom] or [popup-slideshow navpos=disabled]

Working with Video

Portfolio Slideshow Pro allows you to include inline videos from YouTube and Vimeo. Just add a link to your YouTube or Vimeo video in the “Portfolio Slideshow slide link URL” field when you upload your images. It probably makes sense to use a screenshot or thumbnail from your video as the image you’re uploading, since this will be shown in the slideshow carousel.

It is possible to customize the size of the video by appending width and height variables to the video URL. The variable format is ww for window width and wh for window height, like this:

http://www.youtube.com/watch?v=mddw-cn-mOU&ww=800&wh=600