Versions Compared

Old Version 10

changes.mady.by.user Chris Torigian

Saved on

compared with

New Version 11

changes.mady.by.user Hunter Schaeffer

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

FieldDescription
home sliderThis field contains two action buttons:
  • "settings"- Click here to edit the following slider settings:

    Auto Play (Checkbox field to toggle slider on and off.)
    Auto Play Speed _3000_ milliseconds (Changes the play speed)
    Cover Mode (Checkbox field toggles "cover mode" on/off)

    Overlay (adds 30% opacity to the slider.  While this is a nice looking visual effect, it may be undesirable for sliders that have a black or white background.

  • "add" - Click here to add slider page URLs 
     
    then click the "edit" button to open the editing screen where you can configure the slider page URL: 
     
home slider autoplayWhen selected, this checkbox field will cause the slider to auto play after the page is loaded.
home slider autoplay speed

Here you'll configure the speed in milliseconds, for example, a commonly set speed three thousand milliseconds would be configured like this: 3000ms

home slider items

Here you configure the item or items that you want to be included in the slider.

The default image configured on the item will be displayed, if only one image is configured on the item.
Otherwise, the image configured with a code of "Featured" will be the image displayed in the slider.
For more about the item image designated for display in the slider, see: Changing image used for item slider on the home page 

...

The goal here is a slider image that covers the entire slider area at all times no matter the size of the image uploaded. Let's put some specifics on it:

  • Fills entire slider area with the image
  • Scales image as needed
  • Retains image proportions (aspect ratio)
  • Image is centered on page
  • Does not cause scrollbars
  • As cross-browser compatible as possible

So for example if you have an image that is 500px x 1000px cover mode will take the max width of the image and crop the top and bottom. If the image is 1000px x 500px cover mode will take the max height and crop the left and right sides in order to center the image within the space provided. This will also happen dynamically as the browser or screen size changes.

...