Orchard CMS Coverflow

After we developed our jQuery UI Coverflow widget with an administration console, it was natural for us to make an Orchard CMS module that used it since Orchard CMS has all the necessary jQuery dependencies.

In order to manage the images, which many optionally be categorized, Orchard CMS Coverflow uses the existing CMS Media Library and some file naming conventions, explained here.

Requirements

  • Orchard CMS 1.8.1

Features

  • Simple setup, just point coverflow at a media library folder.
  • Cross-browser compatible with graceful degradation.
    • Chrome, Safari, Firefox 3.6+, Opera, IE7+
  • Highly customizable via an administration panel.
  • Image reflection and perspective are configurable and optional.
  • Image categories and an optional menu that is fully CSS stylable.
  • A slider with a handle that sizes according to the number of images.
  • Autoplay mode and the ability to pause during mouse over.
  • Correctly cases titles based on file names.
  • Use as a contact part or a widget.
  • Quick Start

    1. Download the latest package, install and enable it on an Orchard CMS instance.
    2. Add a coverflow part to a content type or add it as a widget.
    3. Add images to the media library, organized into folders to use as categories if desired.
    4. Choose the source folder and configure the coverflow options from the robust administration console available in the part or widget settings.
  • Setting Up Media

    To add the images use the Media section of the Orchard Admin and create a folder for the covers to reside in. Place the images for the covers inside the folder. The format of the image name dictates the order of the cover as well as the title. An underscore in the filename can be provided to create a title and subtitle.

    {Order}-{Title}_{Subtitle}.{Extension}
    ex: 07-Abbey-Road_The-Beatles.png

    In the above example the “07” gives us the order of the cover as it will appear on the carousel. The title will be formatted from “Abbey-Road_The-Beatles” and resolves to the title "Abbey Road" and the subtitle "The Beatles".

    Create a sub directory under your original folder to create categories for your covers. The name of the folders will dictate the order of the category as it will appear in the menu and its tile as well. Be sure and turn on categories in the administration console as well.

    {Order}-{Title}
    ex: 05-Class-Rock

    This category will show up 2nd in the menu and have the link text of "Classic Rock".

  • Options

    Starting index
    Number 0

    A coverflow contains a zero based array of covers. When the coverflow loads the selected index is the value in this array that is positioned in the center. For example if you had ten covers and set selected value to 4, the fifth cover in the set will be in the center with covers 0-3 to its left, and 5-9 to its right.

    Slide animation radius
    Number 20

    The number of covers that animate on each side of the selected cover each time the select cover changes. For best performance make this just slightly larger than the number of covers visible at any one time.

    Cover width
    Pixels 300

    The width of the center "selected" cover in pixels.

    Cover height
    Pixels 300

    The height of the center "selected" cover in pixels.

    Titles
    On/Off On

    Toggles titles on or off.

    Background Cover Options

    Background cover size
    Percentage -10%

    All the covers in the set that are not the center "selected" cover are referred to as "background" covers. To give the illusion that they are behind the selected cover, they should be smaller. This value is a percentage of the selected cover's size as determined by the cover width and cover height properties.

    Inner cover overlap
    Percentage 20%

    The two covers to the immediate left and right of the center "selected" cover are the "inner" background covers. This number specifies the percentage that they overlap the selected cover. A value of 100 hides them completely since they are 100% covered. A negative value can create space between the selected cover and the inner background covers.

    Outer cover overlap
    Percentage 80%

    All the covers that are not the center "selected" cover or the two covers to the immediate left and right of it are referred to as the "outer" background covers. This number specifies the percentage they are overlapped by an adjoining cover. A value of 100 hides them completely, since they are 100% covered. A negative value can create space between them and adjoining background covers.

    Autoplay Options

    Autoplay
    On/Off Off

    Toggles autoplay on or off.

    Flip interval
    Seconds 3

    The number of seconds to wait before flipping to the next cover on autoplay.

    Flips per category
    Number 3

    When both autoplay and categories are enabled, autoplay will cycle through them. This value determines how many cover flips will play before the next category is loaded. If the end of a set of covers in a category is reached before this value is met, the next category will be loaded after rewinding the set. This way you can set this value to an arbitrarily high number if you would like coverflow to flip through each cover in each category before changing catagories.

    Pause on hover
    Checkbox Checked

    Pauses autoplay when the user positions the mouse over the coverflow. This prevents the autoplay from flipping away from a cover they might be interested in.

    Category Options

    Categories
    On/Off Off

    Toggles categories on or off.

    Display navigation
    Checkbox Checked

    Specifies whether to render a list of category titles that can be used to navigate through the coverflow categories.

    Categories are stateful
    Checkbox Checked

    When switching categories, the current set of covers is removed and the new ones are added. When switching back to a category that has been previously viewed, this value selects the same cover that was selected before navigating away from the category. If this value is false, the first cover in the set of covers for a category is always selected when switching categories.

    Default category
    Textbox Unknown

    The default category to assign covers to if not specified by the data source.

    Selected category
    Drop down Not Set

    Specifies the first category to display. If not specified, the first category defined in the DOM will be the first selected category.

    Animate in
    Number of covers 4

    The number of covers that animate out when switching categories. The higher this number is, the greater the likelihood for performance issues. However leaving it too low can be distracting as covers will change instantly in a flash.

    Animate out
    Number of covers 4

    The number of covers that animate out when switching categories. The higher this number is, the greater the likelihood for performance issues. However leaving it too low can be distracting as covers will change instantly in a flash.

    Perspective Options

    Angle
    Degree 12

    The angle, in degrees, that defines the perspective skew. These degrees are measured two dimensionally from the top plane defined by the cover's top. A value of 45 degrees will create triangles of the perspective covers, while values over this cause the perspective to "fold in" on itself- not good for realism, but can create some psychedelic effects.

    Animation duration
    Milliseconds 80

    The number of milliseconds it takes to animate from a perspective skew to the frontal view. This happens whenever a cover is flipped either to or from the center "selected" area.

    Inner cover duration offset
    Percentage 120

    This value is a percentage of the duration. The two covers to the immediate left and right of the center "selected" cover are deemed the "inner" background covers. When performing the skew animation it is visually appealing to animate these slightly slower than the time it takes an "outer" background cover to animate to center perspective. Remember, the longer the duration, the slower the animation appears. So an inner value of 100 would animate the same speed as specified by the duration option. 120 will make it slower, and 80 would make it faster.

    Reflection Options

    Reflections
    On/Off On

    Toggles reflections on or off.

    Initial opacity
    Alpha 30

    Turns the cover reflections on and off. The covers' perspectives depend on the HTML5 canvas element. Browsers that don't support this, like Internet Explorer 7 and 8, will never show cover reflections regardless of this value.

    Length
    Percentage 80%

    The length of the reflection as a percentage of the cover. All reflections fade to 100% transparency, this value specifies how much of the image is displayed before that happens. A reflection value of 100 will show nearly the whole cover, while a value of 0 will hide the reflection completely.

    Slider Options

    Slider
    On/Off On

    Toggles the slider on or off.

    Width
    Percentage 80%

    The width of the slider as a percentage of the coverflow's width.

  • License

    Licensed under the New BSD License (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    https://orchardcoverflow.codeplex.com/license

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

    Copyright Planet Telex, Inc.