How to Create Responsive Portfolio Slideshow in WordPress

There are many ways to integrate responsive and clean javascript slideshow to your WordPress website. You can use custom jQuery plugins, but this isn’t the case if you don’t know how to code. So this tutorial is for WordPress beginners and by following this tutorial, you’ll be able to integrate responsive portfolio slideshow in WordPress.

Demo

We have found a WordPress plugin, Portfolio Slideshow, which will help you to create gorgeous slideshows into your WordPress website. So download the portfolio slideshow plugin from here and install it.

After the installation, go to Settings -> Portfolio Slideshow. There you’ll find four sections, so following is the detail for the settings.

Slideshow Display

In this section, there are settings for how the portfolio slideshow will be displayed.

Slideshow Size: You can change the default image sizes in the Media Settings control panel, or add a new custom image size of your own. If you change the settings for an existing (WordPress built-in) image size, you will need to regenerate your thumbnails to see the changes reflected in existing images. Search the WordPress plugin repository for the Regenerate Thumbnails plugin for information on how to do this.

Transition FX: You can override these in the shortcode with any option that the jQuery Cycle plugin supports.

Transition speed: How long should the transition last when the slideshow is advanced? Enter in milliseconds, e.g. 400 = 0.4 seconds per transition.

Show titles, captions, & descriptions: Check boxes for titles, captions and descriptions. If you will check any option, it will be shown up in the slideshow.

Support for fluid layouts: If you have a fluid layout (like TwentyEleven) and want your slideshows to resize dynamically, leave this checked. If you have a fixed-width layout and notice the content area shifting before the slideshow loads, you can uncheck this to prevent that.

Slideshow Behavior

Slideshow timing: How long should each slide be displayed during an automatic slideshow? Enter in milliseconds, e.g. 3000 = 3 seconds per slide.

Enable autoplay: Starts slideshows automatically when the page is loaded.

Exclude featured images from slideshow: If you use the featured image function to create gallery thumbnails but don’t want those images to appear in the slideshow, use this option.

Show loading animation: If you’ve got a slow connection or lots of images, sometimes the slideshow can take a little while to load. Selecting this option will include a loading gif to show that something is happening.

Loop the slideshow: Should the slideshow play through to the beginning after it gets to the end, or simply stop?

Clicking on a slideshow image: URLs for the Opens a custom URL option are set in the image uploader. The lightbox option links to the full-size version of the image, so make sure your full-size images aren’t too big.

Update URL with slide IDs: You can enable this feature to update the URL of the page with the slide ID number, e.g: http://example.com/slideshow/#3 will link directly to the third slide in the slideshow.

Slideshow Navigation

Navigation position: Where should the navigation controls appear?

Pager position: Where should the slideshow pager appear?

Slideshow Diagnostic

Load jQuery: If you’re having trouble with another plugin or theme that is loading jQuery, you can adjust this. For best results, leave this at the default setting.

Load Cycle: If another plugin is loading a conflicting Cycle library, you can try disabling ours.

Enable debug mode: Don’t load minified scripts and possibly output debug info to screen to help troubleshoot issues with the plugin.

How to integrate portfolio slideshow plugin in template file

This portfolio slideshow plugin for wordpress works with shortcode. So open any post or page on your admin side and just paste the shortcode.

Use the shortcode like below:

[portfolio_slideshow id=2]

Here “2” is the page id. For more details for shortcodes, click here.

Important Note: You’ll have to upload the images first in that post or page where you’re displaying your portfolio slideshow. Just upload the images and do nothing. You won’t have to insert images into the editor. Use “Add Media” option of the editor for uploading the images.

Screenshot

Portfolio slideshow demo

Duan Lingxin

Duan Lingxin

Content crafter and chief editor at Scratching Info. Also regular contributor on other major online tech platforms. Security Specialist by day and a writer by night, he does his best to instill his knowledge about tech while delivering inspiring and life changing resources through his writing,

More Posts - Website

Leave a Comment