AARFIE SUPPORT

If your Big Cartel theme is a premium version, it will include a home page slide show in your primary custom options (refer support article How do I use the Custom Options for my Big Cartel theme?) and appear in a similar format as the following:

{{ HOME PAGE SLIDE SHOW }}
{% assign display_slide_show = 'no' %} {{ Enter 'yes' or 'no' }}
{% capture slide_show_images %}
Replace this text with the URL of your slideshow images.
{% endcapture %} {{ *See NOTE 11 }}
{% assign display_products_after_slide_show = 'yes' %} {{ Enter 'yes' or 'no' *See NOTE 12 }}
{% assign slide_show_effect = 'fade' %} {{ *See NOTE 13 }}
{% assign slide_show_slice_effect_number_of_slices = '15' %} {{ *See NOTE 13 }}
{% assign slide_show_time_of_transition = '800' %} {{ *See NOTE 13 }}
{% assign slide_show_time_between_transitions = '7000' %} {{ *See NOTE 13 }}
{% assign slide_show_previous_next_navigation = 'no' %} {{ *See NOTE 13 }}
{% assign slide_show_thumbnail_navigation = 'no' %} {{ *See NOTE 13 }}
{% assign slide_show_pause_on_hover = 'no' %} {{ *See NOTE 13 }}
{% assign slide_show_manual_control_only = 'no' %} {{ *See NOTE 13 }}
{% assign move_slide_show_to_a_different_page = '' %} {{ *See NOTE 14 }}

Use the following instructions to activate and format your home page slide show.

Image Editing Tool

You will need to edit your slide show images before uploading them to your web space. To do this you will need an image editing tool such as Preview or iPhoto for Apple, Paint for Windows, a professional level editing tool such as PhotoShop or an online image editor such as picnik.

Important Preparation

Before uploading images to your web space it is important to first ensure that they are formatted correctly for your slide show by reviewing the following items and using your image editing tool to correct the images as required.

1. Ensure ALL OF YOUR IMAGES ARE IDENTICALLY SIZED. i.e. the width of every image is the same fixed value X and the height of every image is the same fixed value Y.
2. We strongly recommend you format all of your images to the recommended slide show image width. You can find the recommended slide show image width for your theme in your custom option notes as well as your theme’s readme file.
3. Ensure your image type is appropriate for upload. Your image must be in the file format .png, .jpg, .jpeg or .gif.

Upload Your Images

Before inserting your image URL’s into your slide show settings, you will need to upload them to a publicly accessible location on the internet. If you do not already have such a location (e.g. your Aarfie site’s Media Library), refer to support article How do I upload images or files for my web page?

You should now have public URL’s for your image files, e.g. http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide1.jpg, that display your images if entered into your web browser’s address field.

IMPORTANT: When you view your URL’s they should show the raw image in your browser. Link’s to image pages, e.g. a Flickr image page, will not work. A good indicator of an appropriate direct image link is that it ends with a valid image file extension, e.g. “.jpg”, “.png” and “.jpeg”.

Enter Your Image URL’s

When you have the public URL’s for your slide show images, paste them into your primary custom option (refer support article How do I use the Custom Options for my Big Cartel theme?) slide_show_images. Find the following primary custom option code:

{% capture slide_show_images %}
Replace this text with the URL of your slideshow images.
{% endcapture %} {{ *See NOTE 11 }}

Then paste your URL’s in place of the text “Replace this text with the URL of your slideshow images.” ensuring:

1. Each URL is entered on a new line.
2. Each URL starts with “http”.

For example:

{% capture slide_show_images %}
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide1.jpg
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide2.jpg
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide3.jpg
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide4.jpg
{% endcapture %} {{ *See NOTE 11 }}

Add Image Captions

If you wish to add captions to any of your images, simply enter them on a new line AFTER the associated image. Captions can be plain text or html. For example, adding a caption to the 3rd slide image:

{% capture slide_show_images %}
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide1.jpg
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide2.jpg
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide3.jpg
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://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide4.jpg
{% endcapture %} {{ *See NOTE 11 }}

Add Image Links

If you wish to add a link to a slide image; immediately after the associated image URL enter “##” followed by the link URL. Don’t forget the “http” part of your link URL. For example, adding a link to the shop’s T-Shirts category to the 2nd slide image:

{% capture slide_show_images %}
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide1.jpg
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide2.jpg##http://my-store.bigcartel.com/category/t-shirts
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide3.jpg
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide4.jpg
{% endcapture %} {{ *See NOTE 11 }}

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

{% capture slide_show_images %}
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide1.jpg
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide2.jpg##http://my-store.bigcartel.com/category/t-shirts
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide3.jpg
http://c0179150.cdn1.cloudfiles.rackspacecloud.com/slide4.jpg##http://aarfie.com/##nw
{% endcapture %} {{ *See NOTE 11 }}

Set Your Slide Show Options

Below your slide show image URL custom option area, you will find the options for your slide show as follows:

{% assign display_products_after_slide_show = 'yes' %} {{ Enter 'yes' or 'no' *See NOTE 12 }}
{% assign slide_show_effect = 'fade' %} {{ *See NOTE 13 }}
{% assign slide_show_slice_effect_number_of_slices = '15' %} {{ *See NOTE 13 }}
{% assign slide_show_time_of_transition = '800' %} {{ *See NOTE 13 }}
{% assign slide_show_time_between_transitions = '7000' %} {{ *See NOTE 13 }}
{% assign slide_show_previous_next_navigation = 'no' %} {{ *See NOTE 13 }}
{% assign slide_show_thumbnail_navigation = 'no' %} {{ *See NOTE 13 }}
{% assign slide_show_pause_on_hover = 'no' %} {{ *See NOTE 13 }}
{% assign slide_show_manual_control_only = 'no' %} {{ *See NOTE 13 }}
{% assign move_slide_show_to_a_different_page = '' %} {{ *See NOTE 14 }}

Use the following details to set these options to suit your needs.

{% assign display_products_after_slide_show = 'yes' %} {{ Enter 'yes' or 'no' *See NOTE 12 }}

Setting this value to ‘no’ will hide all the products on your home page, i.e. only your slide show will be displayed in the body of your home page.

{% assign slide_show_effect = 'fade' %} {{ *See NOTE 13 }}

This value defines the transition effect applied between your slides. Valid values are ‘sliceDown’, ‘sliceDownLeft’, ‘sliceUp’, ‘sliceUpLeft’, ‘sliceUpDown’, ‘sliceUpDownLeft’, ‘fold’, ‘fade’, ‘random’, ‘slideInRight’ and ‘slideInLeft’.

{% assign slide_show_slice_effect_number_of_slices = '15' %} {{ *See NOTE 13 }}

This option is only relevant if you have chosen a transition effect (i.e. custom option slide_show_effect) that includes slicing, e.g. ‘sliceUp’. This value defines how many slices your slide will be divided into.

{% assign slide_show_time_of_transition = '800' %} {{ *See NOTE 13 }}

This value defines the time taken, in milliseconds, by the transition effect between slides. It must be a whole number. You may set the value to ’0′ if you do not want any animation between slides. This might be useful when the slide show is in manual mode – see options below.

{% assign slide_show_time_between_transitions = '7000' %} {{ *See NOTE 13 }}

This value defines the time taken, in milliseconds, displaying each slide between transitions. It must be a whole number. This value is ignored when the slide show is in manual mode – see options below.

{% assign slide_show_previous_next_navigation = 'no' %} {{ *See NOTE 13 }}

This value defines the style of interface used to navigate to the next or previous slide. Valid values are ‘no’ = no previous or next navigation is provided, ‘text’ = text links. i.e. “next” and “prev”, are displayed to the left and right of the slide, ‘hover’ = same as ‘text’ but links are hidden until the mouse cursor hovers over the slide show, ‘arrows’ = left and right arrows are used instead of text, ‘arrows-out’ = same as ‘arrows’ but the arrows are located outside of the slide show border and ‘half-image’ = user can click the left or right of the image to navigate.

This option and/or the following option must be set to a valid value other than ‘no’ for manual mode to work – see options below.

{% assign slide_show_thumbnail_navigation = 'no' %} {{ *See NOTE 13 }}

This value defines the style of interface used for navigation between all slides. Valid values are ‘no’ = no navigation is provided, ‘numbers’ = numbered links, ‘buttons’ = button links and ‘thumbs’ = thumbnails of associated slide image.

This option and/or the preceding option must be set to a valid value other than ‘no’ for manual mode to work – see options below.

{% assign slide_show_pause_on_hover = 'no' %} {{ *See NOTE 13 }}

This value defines whether the slide show pauses if the mouse cursor hovers over the slide show. Valid values are ‘yes’ or ‘no’.

{% assign slide_show_manual_control_only = 'no' %} {{ *See NOTE 13 }}

This value defines whether the slide show is in manual mode. Valid values are ‘no’ = slide show is automated or ‘yes’ = slide show is in manual mode and slides will not transition without the user’s navigation.

Note that the slide_show_previous_next_navigation and/or slide_show_thumbnail_navigation option must be set to a valid value other than ‘no’ for manual mode to work.

{% assign move_slide_show_to_a_different_page = '' %} {{ *See NOTE 14 }}

This value defines which page the slide show will appear on. Valid values are ” = slide show will appear on the home page or ‘/page-url’ = slide show will appear on your shop page with the relative URL ‘/page-url’.

The relative URL’s for your shop pages are listed in your Big Cartel Design > Pages admin area, along side your Page titles. Note that relative URL’s always begin with a forward slash, for example: ‘/contact’, ‘/our-lookbook’, etc.

Category and product pages are not assigned page URL’s in the same manner. You can have your slide show display on all product pages by setting the value to simply ‘/product’ or on all category / view-all pages by setting the value to simply ‘/products’.

Activate Your Slide Show

Finally, to activate your slide show set the first option in the slide show custom options, display_slide_show, to ‘yes’.

{% assign display_slide_show = 'no' %} {{ Enter 'yes' or 'no' }}

Click the Save button when you have finished editing your custom options. You can now view your slide show and adjust your options as required.

An example of Custom Options for the Home Page Slide Show - manual slide show with arrow navigation and slideLeft transition