WP-Property: Slideshow

The Slideshow Add-on is used to aesthetically showcase a series of images. The slideshow comes with two primary features - a global slideshow, and a property specific slideshow. Both slideshows may be inserted virtually anywhere using shortcodes, but are generally intended to be displayed on the home page and on property pages, respectively.

We made it extremely simple - the slideshow page searches through the Media Library looking for images that are big enough for the slideshow - dimensions to which you would specify in the main WP-Property control panel.

The slideshow has a number of shortcodes available. Attributes are extra settings you can put into the shortcodes. First and foremost, it's important to understand that the Add-on comes with two different slideshow types ( global and property images ), although they share a lot of the same characteristics.

Property Gallery

The following shortcode can be added for showing images gallery on single property page:

[property_gallery]

Carousel gallery can be set by marking "Display as carousel gallery." in Property Gallery widget, or by using shortcode:

[property_gallery carousel=true]

More about property gallery image size settings

Cheat Sheet for [property_gallery] Shortcode

ShortcodeTypeDefaultDescription
widthnumberautoSets image width.
heightnumberautoSets image height.
autoplaytrue/falsefalseSwitches autoplay.
transitionstringfadeSwitches transition.
enforce_
minimum_
image_width
true/falsetrueEnforces minimum image width.
debugtrue/falsefalseSets debug.
thumb_sizestringProperty Settings configuration (thumbnail)Sets thumbnail size.
image_sizestringProperty Settings configuration (medium)Sets image size.
hide_if_
no_images
true/falsefalseSwitches gallery off if there is no images.
large_sizestringProperty Settings configuration (large)Sets large image size.
show_infotrue/falsetrueSwitches info displaying.
carouseltrue/falsetrueSwitches carousel displaying.
image_croptrue/falsetrueSwitches image crop.
image_pantrue/falsetrueSwitches image pan.
themestringclassic/galleria.classic.min.jsSets theme.
elementstring 'wpp_gallery_' . rand(1000,9999)Sets element.

Global Slideshow

The global slideshow is used to showcase a series of images from across your entire site. Those images can display property, or page, titles, excerpt and taglines, and take your users directly to the property pages they represent.

The most basic way to insert the global slideshow is to use either the shortcode:

[global_slideshow]

In order to appear in the global slideshow, you must first select the images by visiting the Properties -> Slideshow page, and then dragging and dropping them into the selection pane on the right. Keep in mind, the images will be displayed in the order that you establish here.

Property Slideshow

Typically to be used on a property page, as it displays all the images that have been dragged over into the property-specific slideshow selection pane. However, the shortcode could be used virtually anywhere as long as you pass the id attribute into it specifying a particular property.

[property_slideshow]

When the Slideshow is displayed, it is wrapped in a <div> with a random class (which is necessary, and allows multiple slideshows to be used on one page), a 'slider' class, and optionally a custom class which you can insert via a shortcode. For example, if you wanted to wrap the particular slideshow in a class called my_custom_class, you would use the following shortcode:

[property_slideshow class='my_custom_class']

And the following HTML would be output:

<div class="random_id slider my_custom_class">slideshow images</div>

This is a good way of assigning different styles to different slideshows.

Setting the Image Size. You can pass an image size of your choice to override the slideshow size set on the Slideshow settings page. Keep in mind, you cannot pass completely arbitrary sizes, it has to be a size that exists on the Display tab. Example:

[property_slideshow image_size='thumbnail']

A good practical usage of this is when you want to insert a slideshow into the content area. Since content area widths vary from one template to the next, it many cases you will want to create a custom image size that fits your content area. So, if your content area is 550px wide, you may want to create an Image size (on the Properties Settings Page) that is 525px by 300px. If you name that image size In Content Image Size, the slug will be in_content_image_size, that is the slug you would pass into the shortcode.

After you associate a few image with a property, by uploading them in the same manner you would upload images to a post or a page, you will be able to drag and drop the images ( on Edit Property page ) you would like to appear in the property slideshow, just as you would with the global slideshow.

More Examples:

So, to give you some practical examples, let's say we want to display a property slideshow that fades from one image to the next, very quickly, but pauses on each image for a while:

[property_slideshow effect=fade animation_speed=100 pauseTime=5000]

Note: keep in mind, all the times are in milliseconds. So '1000', means 1 second and '500' means half a second.

If you are a programmer, or are feeling very brave, you can also use the 'wpp_slideshow_nivoslider' filter which is applied to all the attributes passed into the nivoSlider() JavScript function.

Force the slideshow to display images from a specific property and override the image size to thumbnail. In this example we pull images from property with the ID of 212.

[property_slideshow id=212 image_size=thumbnail]

Set transition effect to fade and speed up the animation:

[property_slideshow effect=fade animation_speed=100]

Insert the slideshow into a template using PHP:

<?php echo do_shortcode("[property_slideshow]"); ?>

Styling the Slideshow:

Slideshow effects, times and slices can all be configured on the Slideshow settings page. However, at times you may want to customize a particular slideshow, in which case you can pass a variety of different arguments into the shortcode. Our slideshow uses Nivo Slider JavaScript library, and it may be beneficial for you to check out the Nivo Slider Usage page.

Cheat Sheet for [property_slideshow] and [global_slideshow] Shortcodes.

ShortcodeTypeDefaultDescription
effect string(sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRamdom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse)fadeTo get a full list of available effects, check out the Nivo Slider Usage page.
slices number 5Sets slices number.
animation_speed number in milliseconds500Sets animation speed.
pause_time number in milliseconds5000Sets pause time.
show_side_
navigation
true/falsetrueSwitches side navigation.
show_side_
navigation_on_
hover_only
true/falsefalseSets side navigation to display only on hover.
show_pagination_
buttons
true/falsetrueSwitches pagination buttons.
image_sizestringAs it is set on Properties/Settings/Slideshow tabSets image size. You can use size names from Properties/Settings/Display tab.
caption_opacity number, 0 - 11Sets caption opacity.