Big Cartel Theme Support

Shortcodes – Slideshows

Shortcodes – Slideshows

If you are new to shortcode, please refer to the article An introduction to shortcodes before working with the following instructions.

Simplest Form

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

This shortcode will load the image files from the public URL’s listed between the opening and closing slideshow tags and display the images in a dynamic slide show.

To prepare, upload and retrieve public URL’s for your images, refer to How do I upload images or files for my Big Cartel page content?. You can also use your slideshow image uploader, if you have one available, per section Using the slideshow uploader below.

For a quick and simple example of adding a slide show to your home page, refer to How do I add a slide show to my Big Cartel home page?

For the best results, ensure that all of your slide show images are the same size. For more information, refer to the article Photography and image files.

If you wish to add a link to a slide image; after the associated image URL, create a new line and enter #link= followed by the link URL. In the following example, clicking any slide will take the visitor to the products page (i.e. view all products).

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
#link=/products
http://i43.tinypic.com/33215yo.jpg
#link=/products
http://i43.tinypic.com/21kf2fb.jpg
#link=/products
http://i40.tinypic.com/23vj0hg.jpg
#link=/products
[[/slideshow]]

Additionally you can have your link open in a new window by entering ##nw immediately after a link URL. For example, adding a link to the 4th slide image that will open Aarcade’s web site in a new window:

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
#link=/products
http://i43.tinypic.com/33215yo.jpg
#link=/products
http://i43.tinypic.com/21kf2fb.jpg
#link=/products
http://i40.tinypic.com/23vj0hg.jpg
#link=http://www.aarcade.net/##nw
[[/slideshow]]

If you are not sure how to define an address (URL) for your link values, refer to How do I link to a web address or a file from my page?

Captions

To add captions to any of your images, after the associated image URL, create a new line and enter #caption= followed your caption. Captions can be plain text or html. For example:

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
#link=/products
#caption=This slide has a caption and a link
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
#caption=This is a caption for the 3rd slide image.
This is a second row for the same caption.
<span style="color: red;">This third row is made red using a HTML span tag.</span>
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

Note that captions can be multiple lines, as show above.

Titles

Adding a title to a slide image sets the alt attribute for that image as well as the title attribute for the link if one is applied. To add titles to any of your images, after the associated image URL, create a new line and enter #title= followed your title. Titles must be a single line of plain text. For example:

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
#title=Recycled Wood Table
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

effect

This option defines the transition effect applied between your slides. Valid values are fade or slide.

When this option is not included, the default value is fade.

[[slideshow effect="slide"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

speed

This option defines the duration of the animation — in milliseconds — between each slide image change. Valid values are any whole number.

When this option is not included, the default value is 600 (0.6 seconds).

There are not many applications where this value will need to be set. If you simply want to increase or decrease the viewing time for each slide, use the pause option (see next section).

[[slideshow speed="100"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

pause

This option defines the duration of the pause — in milliseconds — between the end of one animation and the start of the next between each slide image change. Valid values are any whole number.

When this option is not included, the default value is 6000 (6 seconds).

[[slideshow pause="2000"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

button-nav

This option controls the display of navigation buttons for the slideshow. Valid values are:

1
Displays circular buttons
thumbnails
Displays image thumbnails

When this option is not included, the default is no navigation buttons are displayed.

[[slideshow button-nav="thumbnails"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

direction-nav

This option controls the display of navigation arrows for the slideshow. This option does not need a value, i.e. it just needs to be present to enable navigation arrows.

When this option is not included, no navigation arrows are displayed.

[[slideshow direction-nav]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

manual

This option prevents the slide show from automatically progressing through the slide images. Slide transitions will only occur when the user clicks the navigation. This option does not need a value, i.e. it just needs to be present to enable manual mode.

When this option is not included, manual mode is not enabled.

[[slideshow manual]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

no-loop

This option prevents the slide show from looping through the slide images, i.e. the slide show will stop when it reaches the final slide. This option does not need a value, i.e. it just needs to be present to disable looping.

When this option is not included, looping is enabled.

[[slideshow no-loop]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

random

This option loads the slides in a random order. This option does not need a value, i.e. it just needs to be present to enable random mode.

When this option is not included, random mode is not enabled.

[[slideshow random]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

lazy-load

This option enables the lazy load of images. In other words, image data is not loaded until confirmed necessary. This can be a useful feature for improving page loading speeds on mobile devices, especially when used in conjunction with the [[mobileonly]] and [[monitoronly]] shortcodes.

Note that lazy loaded images are invisible to search engines, so if you want your images to be discoverable — via Google image search for example — you should not use this option.

This option does not need a value, i.e. it just needs to be present to enable lazy load.

When this option is not included, lazy load is not enabled.

[[slideshow lazy-load]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

fit

This option forces the slide show to fit exactly to its parent container, i.e. slide images are scaled and cropped to fill the entire area of the parent container. Be aware that if you have not defined the height of the parent container, the slide show will not be displayed properly.

Valid values are:

top
Scales and crops from the top of images and down
center
Scales and crops from the center of images and out
bottom
Scales and crops from the bottom of images and up

When this option is not included, the fit mode is not enabled.

This option is commonly used in conjunction with the fullwidth shortcode as follows:

[[fullwidth height="600"]]

[[slideshow fit="top"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

[[/fullwidth]]

send-back

This option enables fit mode (see previous section) and also sends the slideshow to the background of the parent container. In other words, other content within the parent container will appear over the top of the slideshow with the slide images as background images.

Fit mode will be enabled with the option “center” by default, however you can add the fit option (see previous section) to define a different value if desired.

This option does not need a value, i.e. it just needs to be present to enable send-back mode. When this option is not included, send-back mode is not enabled.

<div style="width: 100%;height: 600px">

[[slideshow send-back]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

<h1>This heading will appear on top of the slide images</h1>

<p>This paragraph will also appear on top of the slide images</p>

</div>

Multiple Options

Following is an example of a slide show with multiple options applied:

This is my slide show, using Aarcade's cool shortcodes:

[[slideshow animation="slide" manual="1" button-nav="thumbnails"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
#link=/products
#caption=<span style="font-size: 20px;">Check out all of our products!</span>
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
#link=http://www.aarcade.net/##nw
[[/slideshow]]

I hope you enjoyed it!

Adding video to a slideshow

To display a video as one of your slides, you can list the iframe embed code from your video share tools — refer to How do I insert a video into my Big Cartel page? — in the same way you list an image URL. For example:

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
<iframe src="//player.vimeo.com/video/21748457?title=0&byline=0&portrait=0&color=71bf43" width="600" height="338" frameborder="0" allowfullscreen></iframe>
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

Some embed codes will automatically include extra text and links back to the original video file, so make sure that you insert only the iframe tag — i.e. <iframe ... </iframe> — and remove any content that follows.

Text slides

To display text as a slide, you can list a line starting with #text-slide= in the same way you list an image URL. Text slides can be plain text or html. For example:

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
#text-slide=<h2 id="this-is-a-text-slide"><span>This is a text slide</span></h2>
I added a second line here too!
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

Keeping all slides the same size yields the best results. However, this can be difficult to achieve when creating an all text slide or mixing text and image slides. For this reason, we recommend applying the fit option (see relevant section above) to slide shows that include text slides. For example, creating a “customers say” slide:

[[fullwidth height="500"]]

[[slideshow fit]]
#text-slide=<blockquote>
<p>A customer quote.</p>
<small>Jessie Smith of <cite title="Source Title">JS Widgets</cite></small>
</blockquote>
#text-slide=<blockquote>
<p>Another customer says this.</p>
<small>Another Customer</small>
</blockquote>
#text-slide=<blockquote>
<p>One more quote here for good measure.</p>
<small>Jenny Jones of <cite title="Source Title">Jenny's Store</cite></small>
</blockquote>
[[/slideshow]]

[[/fullwidth]]

Using the slideshow uploader

Depending upon the base theme you chose before installing your Aarcade theme, you may have a slideshow image uploader available in the Customize design > Customize section of your Big Cartel admin.

Shortcodes - Slideshows at Aarcade

To use images you have uploaded with this tool, instead of an image URL, you can enter #slideshow-images= followed by all or a whole number X (to display the first X images).

For example, the following slideshow will display all images uploaded:

[[slideshow]]
#slideshow-images=all
[[/slideshow]]

The following slideshow will display the first 3 images uploaded:

[[slideshow]]
#slideshow-images=3
[[/slideshow]]

You can also use #slideshow-image= (note, “image” singular) to load specific images from your uploaded collection. For example, the following slideshow will display the 1st, 3rd and 5th image:

[[slideshow]]
#slideshow-image=1
#slideshow-image=3
#slideshow-image=5
[[/slideshow]]

Both #slideshow-images= and #slideshow-image= can be treated the same way as image URLs in your slideshow settings. In other words, you can add links, captions, etc. — refer to the above sections of this article — and also mix image URLs with slideshow uploaded images. For example:

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
#slideshow-image=6
#caption=This slide displays the 6th image in the slideshow uploader
It has this caption
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

AarcadeShortcodes – Slideshows