Story Slider (Advanced Shortcode)

This is one of the Advanced Shortcodes available in Innovation+Science 2 theme. Take a look at some examples how you can setup this shortcode. Like all shortcodes in this theme you can setup them with special Lightbulb editor tool – this allows you to define all parameters and content for selected shortcode. To read more about other shortcodes and Lightbulb feature check links below:

Story Slider (dcs_story)

A special custom posts slider that allows you to create a story of slides with link to any page. For this shortcode you must create some custom posts in separate Story Slides section. For each post add an image and you can also add some text in editor, so it will be displayed for each slide. Options from Custom Post Settings for Story Slide post allow you to define link settings and upload an image. In Lightbulb tool you will find options to setup Story Slider – you can select here story slides posts by ID numbers, add header title, change the size and the margins, floating settings, or decide if the slides description will be displayed.

You can also use option named as Fit images to slider window (selected by default) – this decides about how the images are displayed in the slider. If this option is selected slides images will be re sized proportionally to fit into the slider window (image won’t be cropped), and if it is not selected the images will be re sized proportionally (if needed) to cover the whole slider window (no empty spaces will be visible).

• Example 1: Story Slider with default settings
option Fit images to slider window is enabled – images are not cropped – this is useful especially when you have images in different proportions and you don’t won’t to cut some parts

[dcs_story  name="Header name"  w="620"  h="300"  list="194,196,198"  margin="0px auto 15px auto"  /]

• Example 2: Story Slider with no fit option
option Fit images to slider window is turned off – images are cropped to fill the whole slider window

[dcs_story  name="Header name"  w="620"  h="300"  list="194,196,198"  margin="0px auto 15px auto"  fit="false"  /]

• Example 3: Story Slider with no fit option and some changes in settings
option Fit images to slider window is turned off, different size is set, float to left, descriptions turned off, different story slides posts order, and no header text

Rutrum augue at dolor neque, quam vel sed ligula, magna egestas cras congue nullam, malesuada ut blandit consectetuer nunc fringilla sem. Libero laoreet donec arcu eros erat sed, adipiscing felis vel aliquam in, tincidunt mollis porro, pede metus eu aenean, duis cum ut non proin pede etiam. Pellentesque velit pellentesque consectetuer id nec. Eget bibendum in, sed duis sit fusce, libero rutrum, mus in vel. Class est ornare, felis mi lobortis magna posuere, orci consectetuer dictum eget facilisis lorem rem.

Tellus massa adipiscing morbi suscipit, non condimentum molestie. Sem eu ac, vulputate non suscipit nisl ligula volutpat, aliquet placerat vel at non, et fermentum eget. Aliquam sit sit condimentum orci dictum, pede aliquam ultricies suscipit nec eget. Nec aliquam leo velit nam id mattis. Tempor commodo ac et, tellus per integer at suspendisse. Diam feugiat vivamus montes iaculis, quam duis sodales iaculis morbi. Augue tempus nec quis metus quis, rhoncus eros vivamus lacus et leo et, quam aliquet, fermentum ante vehicula suspendisse lorem, non integer donec eu ut. Vulputate massa risus. Curabitur lectus ligula tortor nam in, cursus hac sed rhoncus eget blandit scelerisque, rerum amet, pellentesque nullam, et placerat ac diam. Pellentesque gravida arcu tortor, lectus accumsan, at elit maecenas.

Ultrices aenean, nullam consequat vel ligula per. Quis sit tincidunt ac, ligula ornare at fusce tellus sapien et. Proin et aenean hymenaeos praesent, litora eget turpis pellentesque a ut, eros arcu velit tempor eget, donec lacinia consectetuer fames, urna eget gravida et eros. At orci blandit vehicula feugiat, nisl sed vivamus purus etiam non, amet dolor. Porttitor dignissim pellentesque cursus, dapibus lacus pede nulla. Accumsan amet cras velit sed modi nullam, sed scelerisque vel mattis lectus.

Sem elementum parturient erat lectus auctor, gravida et, nostrud libero lorem donec, suspendisse sit tincidunt. Proin dolor mattis, convallis nec non sed, phasellus nulla pretium bibendum eget luctus turpis. Litora rutrum mi at suscipit, adipiscing nibh urna, imperdiet pede amet. Ipsum elit ut blandit, condimentum nunc semper duis duis, sem vitae, placerat et blandit.

[dcs_story  w="380"  h="410"  list="198,194,196"  margin="0px 15px 15px 0px"  float="left"  fit="false"  showdesc="false"
showtitle="false"  /]

• Example 4: Story Slider with no fit option and some changes in settings
option Fit images to slider window is turned off, different size is set, float to left, descriptions turned on, slide titles turned off, different story slides posts order, Group option selected

Rutrum augue at dolor neque, quam vel sed ligula, magna egestas cras congue nullam, malesuada ut blandit consectetuer nunc fringilla sem. Libero laoreet donec arcu eros erat sed, adipiscing felis vel aliquam in, tincidunt mollis porro, pede metus eu aenean, duis cum ut non proin pede etiam. Pellentesque velit pellentesque consectetuer id nec. Eget bibendum in, sed duis sit fusce, libero rutrum, mus in vel. Class est ornare, felis mi lobortis magna posuere, orci consectetuer dictum eget facilisis lorem rem.

Tellus massa adipiscing morbi suscipit, non condimentum molestie. Sem eu ac, vulputate non suscipit nisl ligula volutpat, aliquet placerat vel at non, et fermentum eget. Aliquam sit sit condimentum orci dictum, pede aliquam ultricies suscipit nec eget. Nec aliquam leo velit nam id mattis. Tempor commodo ac et, tellus per integer at suspendisse. Diam feugiat vivamus montes iaculis, quam duis sodales iaculis morbi. Augue tempus nec quis metus quis, rhoncus eros vivamus lacus et leo et, quam aliquet, fermentum ante vehicula suspendisse lorem, non integer donec eu ut. Vulputate massa risus. Curabitur lectus ligula tortor nam in, cursus hac sed rhoncus eget blandit scelerisque, rerum amet, pellentesque nullam, et placerat ac diam.

Ultrices aenean, nullam consequat vel ligula per. Quis sit tincidunt ac, ligula ornare at fusce tellus sapien et. Proin et aenean hymenaeos praesent, litora eget turpis pellentesque a ut, eros arcu velit tempor eget, donec lacinia consectetuer fames, urna eget gravida et eros. At orci blandit vehicula feugiat, nisl sed vivamus purus etiam non, amet dolor. Porttitor dignissim pellentesque cursus, dapibus lacus pede nulla. Accumsan amet cras velit sed modi nullam, sed scelerisque vel mattis lectus.

Sem elementum parturient erat lectus auctor, gravida et, nostrud libero lorem donec, suspendisse sit tincidunt. Proin dolor mattis, convallis nec non sed, phasellus nulla pretium bibendum eget luctus turpis. Litora rutrum mi at suscipit, adipiscing nibh urna, imperdiet pede amet. Ipsum elit ut blandit, condimentum nunc semper duis duis, sem vitae, placerat et blandit.

[dcs_story  name="Story Slider with grouped images in lightbox and no slide titles"  w="600"  h="200"  list="198,196,194"
margin="0px 15px 15px 0px"  float="left"  fit="false"  group="true"  showtitle="false"  /]

• Example 5: Two Story Sliders with no fit option in columns

[dcs_story  name="Story Slider in column"  w="294"  h="300"  list="198,196,194"  margin="0px 0px 15px 0px"  float="left"  fit="false"
group="true"  showtitle="false"  /]

[dcs_story  w="294"  h="200"  list="196,198,194"  margin="0px 0px 15px 0px"  float="left"  fit="false"  group="true"
showtitle="true" showdesc="false" /]