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:

Shortcode attributeAccepted values
content_type custom_content, posts, gallery or flickr
Posts slides
posts_post_types post, page or any custom post type
posts_taxonomies must be composed of the taxonomy name and the term, separated by a vertical bar: category|uncategorized
posts_relation OR or AND
posts_operator IN or NOT IN
posts_orderby date , comments , title or random
posts_order ASC or DESC
posts_maximum any number
Flickr slides
flickr_api_key the API key provided by Flickr
flickr_load_by set_id or username_id
flickr_id the ID of the data
flickr_maximum any number

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk