Advanced shortcode use

Not only you can insert sliders into pages using shortcodes, but you can also override settings, add or modify slides. It's even possible to create a slider using only shortcodes, without setting it up in the admin area.

You can override the slider's settings like this:

[sliderpro id="1" width="700" aspect_ratio="2" visible_size="70%"]

As you can notice, the name of the settings are the same as those in the admin area, but they are lower case and with an underscore between words. This applies for all settings.

If you want to add breakpoint settings in the shortcode, you need to add them in a JSON-encoded string, since the breakpoints setting accepts an associated array-like value. You can create some breakpoints in the admin area and then see how the JavaScript code generated looks like.

As mentioned before, you can add new slides or change the data of existing ones:

[sliderpro id="1" width="700" aspect_ratio="2" visible_size="70%"]
    [sliderpro_slide index="1"]
        [sliderpro_slide_element name="main_image_source"] path/to/new_image.jpg [/sliderpro_slide_element]
    [/sliderpro_slide]
    [sliderpro_slide]
        [sliderpro_slide_element name="main_image_source"] path/to/image.jpg [/sliderpro_slide_element]
        [sliderpro_slide_element name="main_image_link"] http://bqworks.com/sliderpro/ [/sliderpro_slide_element]
        [sliderpro_slide_element name="layer" position="center" show_transition="right"] some layer content [/sliderpro_slide_element]
    [/sliderpro_slide]
[/sliderpro]

The first sliderpro_slide shortcode will override the first slide in the slider As you can notice that it has the index attribute specified and set to 1.

The second sliderpro_slide shortcode doesn't have an index, so this will be a new slide element added after the slides created in the slider's admin area.

This is the list of available types for sliderpro_slide_element shortcodes:

• main_image_source
• main_image_alt
• main_image_title
• main_image_retina_source
• main_image_small
• main_image_medium
• main_image_large
• main_image_retina_small
• main_image_retina_medium
• main_image_retina_large
• main_image_link
• main_image_link_title
• caption
• layer
• html
• thumbnail_source
• thumbnail_alt
• thumbnail_title
• thumbnail_retina_source
• thumbnail_link
• thumbnail_link_title
• thumbnail_content

When you create a slider from scratch using only shortcodes, you need to assign it a unique idattribute that doesn't already exist in the admin area.

[sliderpro id="99" width="960" height="400" visible_size="70%"]
    [sliderpro_slide content_type="posts" posts_post_types="post,page" posts_taxonomies="tag|design;tag|development;tag|planning"]
        [sliderpro_slide_element name="main_image_source"] [sp_image_src] [/sliderpro_slide_element]
        [sliderpro_slide_element name="main_image_alt"] [sp_image_alt] [/sliderpro_slide_element]
        [sliderpro_slide_element name="main_image_link"] [sp_link_url] [/sliderpro_slide_element]
    [/sliderpro_slide]
[/sliderpro]

The slider above contains a slide that will load data from posts. The dynamic tags, like [sp_image_src] were discussed in previous chapter. As for the attributes added to the slide shortcode, those are the equivalent of the settings from the slide's Settings modal window in the admin area.

Below is a list of all the available slide settings: