How do I create an image gallery? (Pre October 24th 2012)

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.

1. To create a new Slideshow click on the 'Slideshows' text link in the left hand side column of your Dashboard
2. Click 'Add New' slideshow
3. Enter the name for easy identifying when you want to find it later
4. Click Upload and Manage images
5. The Media upload panel will pop up
6. Upload your images here, they will appear under the Gallery Tab. You can drag and drop the order of the images here.
7. To create links from the individual images in the Slideshow use the Upload and Manage images button and insert the URL under the RED Portfolio Slideshow
   slide link URL box
8. When the images have completed uploading and you have added any links you want, just click Save Changes. There is no need to choose Insert into post, because for now you are just creating a Slideshow which you can then add to multiple pages or posts.
9. Then click Save Draft. This will display your uploaded images as below.
10. You can drag and drop the order of the images here as well.
11. To insert the Slideshow highlight and copy the SHORTCODE displayed below the image thumbnails.eg [portfolio-slideshow id=655]
12. Paste this SHORTCODE directly on the the page or post you want your slide show to appear. Publish the page.
13. View the front of your website and check everything is looking as you want it.
14. If you want to edit or tweak any of the features of the Slideshow you can add SHORTCODE attributes which are listed below and can give you quite granular control over each Slideshow. Eg Autoplay, randomise, speed, audio etc.

OR

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

• General Gallery Usage
• Shortcode Attributes
• Popup Shortcode
• Working with Video Links

General Gallery Usage

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.

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:

[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 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:

[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 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:

[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 slideshow:

[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 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.

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 Links

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.

Return to top of page