This information applies only to sites built before 24th October 2012. If your site was built after this date, please read this article instead.
This info will assist you to add an image gallery in eWeb2.0.
Once you have added the SHORTCODE to your Page, Widget or Post, you are able to use the SHORTCODE attributes below to customise it's settings on that particular page.
Use the following attributes to define your Slideshow settings.
Advanced Slideshow / Gallery options
Use the [portfolio_slideshow] SHORTCODE to display the slideshow in your page or post. You can customise an individual global slideshow by modifying the SHORTCODE attributes.
If you would like to customise 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:
To add a custom class to the slideshow wrapper:
To change the image size you would use the size attribute in the shortcode like this:
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:
The height and width attributes override the size attribute and by default will not crop the images unless used with the crop attribute. This option will not upscale images.
You can crop the main images to a specific size:
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 and may remove parts of the image, so try to upload images that as close to the intended cropped size as possible. This option will not upscale images.
You can add a custom slide container height:
Useful if you don't want the page height to adjust with the slideshow.
Image Transition FX:
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.
Add a delay to the beginning of the slideshow:
Show titles, captions, or descriptions:
Center the slideshow:
Time per slide when slideshow is playing (timeout):
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.
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.
Exclude featured image:
Loop the slideshow:
disable slideshow looping:
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:
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:
Navigation links can be placed at the top:
or at the bottom:
Navigation link style can be selected:
The navigation info can be customized:
Hide the play button:
Hide the slidecounter:
Pager style can be selected:
In the carousel, you can change the number of thumbnails per row:
When the thumbnail pager is selected, you can customize the thumbnail size, thumbnail margin, and whether to enable proportional (non-cropped) thumbnails:
You can also control the width of the thumbnail pager if you want to limit the number of thumbnails per row:
Pager position can be selected:
Toggle thumbnails can be enabled or disabled:
If toggle thumbnails are enabled, you can define the default togglestate to be open or closed:
You can enable the fancygrid, which toggles between thumbnail view and slideshow view:
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:
Include or exclude slides:
You need to specify the attachment ID, which you can find in your Media 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.
It's possible to create a link to a popup window that includes a slideshow with the shortcode
Window height: customize the height of the popup window:
Window width: customize the width of the popup window:
Height: customize the height of the slideshow inside the popup window:
Width: customize the width of the slideshow inside the popup window:
Thumbnail: use a thumbnail image instead of text to trigger the popup window:
Thumbnail size: customize the size of the thumbnail image used to trigger the popup window:
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)
Center the slideshow
Enable the carousel pager
Note that the carousel pager is the only pager available in popup mode.
Carousel size: the number of thumbs to show in the carousel.
Captions, descriptions, and titles
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 adding height and width attributes to your slideshow.