Home > Home Page Slideshow Fields

Overview

You may want to add some image size instructions for the image label.

Category component identifier: slides

Product Fields

Note: The blurb1 field triggers the caption, and button to display (if the button is filled in).

New Method for Inserting Slide Shows

Set up 10/13/15

Up until now, we've added the code for various slideshows directly in the template where we wanted it to display (e.g., in homepage category_detail.html). This creates a maintenance issue when we need to update or fix the slideshows, because we have to do it on every site.

With the new method, instead of adding the code directly to a template, you will insert a subpage that uses a set of templates that contain the code and styles that are necessary for the various sliders. The advantage of this method is that we'll have sliders that are easier to implement and maintain.

Here are the pieces:

1. Templates: _sliders

Each slider has its own flavor. In the flavor is a category_detail.html template that contains the scripts and code for a specific slider. Currently we have these 3 slider flavors set up:

• carousel-basic-arrows

• carousel-basic-dots

• carousel-thumbs-vsidescroll (this has a vertical row of thumbnails to the right of the main image)

2. Stylesheets: mm-assests/mm-css/sliders

There is a stylesheet in /sliders set up for each of the flavors. The name of the stylesheet matches the name of the flavor.

If you need to adjust the styles, you can copy them to your local stylesheet. You will almost always need to set some default heights for the slider at various screen widths, so you don't get FOUC (flash of unwanted content).

3. Stylesheets: mm-assets/mm-css/sliders/captions

Stylesheets for various caption styles are located in the captions directory. Currently, we have:

• default (the see-through black box at the bottom of each slide)

• whitetext-centered-nobg (the white text has a black shadow, so it works pretty well over most images)

Each flavor points to caption style like this

<!--css:mm-css/sliders/captions/.css-->

You will set which caption you want to use as a parameter when you insert the subpage.

If you need to adjust the styles, you can copy them to your local stylesheet.

4. Reference

I've added a reference.txt file in the _sliders directory that has a brief explanation of the flavors, the caption styles, and which parameters each flavor uses.

Putting it All Together

On the template where you want the slider, insert the subpage like this

<!--insert|subpage|cpage_<<enter cat id here>>|_sliders.<<flavor name here>>||captionstyle=<<caption style here>>|-->
so you have something like
<!--insert|subpage|cpage_44|_sliders.carousel-basic-dots||captionstyle=default|-->

Some sliders may have other parameters that you can add along with the caption style. For example, the carousel-thumbs-vsidescroll allows you to pass the default number of thumbs you want to display, like this

<!--insert|subpage|cpage_44|_sliders.carousel-thumbs-vsidescroll||vslides=5&captionstyle=default|-->