Cover Art

 

Images can be loaded into the video/image window for the following reasons:
1. Track - Each individual track can load an image.
2. Playlist / Sub-folder - Each playlist or subfolder can have it's own image.
3. Default / Startup / Fallback - A default image to display when the player starts or when an image fails or is mising.

Track and Playlist Images

- For Automatic Playlists

Upload an image with an identical basename next to the MP3 file:

mySong.mp3
mySong.jpg <-- same basename, but with a "jpg" extension.

MORE INFO >

 

- For external playlists (XML, JSON, TXT, etc)

Set the "image" property to the image URL:

{ file : "/path/to/mySong.mp3", image : "/path/to/image.jpg" }

MORE INFO >

 

Setting Image via Javascript

See the "setCoverArt" API.

Default / Startup / Fallback Images

If your using Automatic Playlists, Wimpy will automatically look for a file name "coverart.jpg"within each folder. If you're using the wimpy folder to house your media files, simply upload a file named "coverart.jpg" to the wimpy installation folder. Wimpy will load this image during startup.

When using external or embedded playlists, Use the "coverArt" option as defined to define the default image as:

<div data-wimpyplayer data-coverArt="coverart.jpg" data-media="track.mp3"></div>

The coverArt option also defines the "fallback" image-- the image to use if (or when) no other cover art is available for a file or playlist.

Image Sizing

Images will automatically resize to fit within the video/image window, use the "coverArtFit" option to adjust how images are resized. The coverArtFit option can be one of thee settings:

1 = fit (default) - Image will stretch or shrink to fit precisely within the boundaries of the coverart container.

2 = contain - Image will shrink or enlarge (but not stretch) to fit within the coverart container boundaries. Image may have black bars along edges.

3 = center - Image will be "original size" and centered within the coverart container. The image will not be stretched.

 

Example

<div data-wimpyplayer data-coverArtFit=2></div>

 

 

Image Replacement Logic

- If a file or playlist has an image associated with it, that image will load.

- Images associated with playlists (or subfolders) will act as the default image for all tracks within the playlist (or subfolder). If an individual track has an image associated with it, the track's image will be displayed. If another track is played that does NOT have an image associated with it, wimpy will bubble back to the playlist (or sub-folder) image.

 

For example, consider the following setup:

The "coverArt" option is set to "image X", and a playlist is set up with the following items
- Playlist A, image = "image P"
- Playlist A / track 1, image = (no image)
- Playlist A / track 2, image = "image 2"
- Playlist A / track 3, image = (no image)
- playlist A / track 4, image = "image 4"

- Playlist B, image = (no image)
- Playlist B / track 1, image = (no image)
- Playlist B / track 2, image = "image 2"
- Playlist B / track 3, image = (no image)
- playlist B / track 4, image = "image 4"

 

The player will then behave as follows:

- Player loads => display "image X"
- Playlist A loads => "image P" is displayed.
- play track 1 => nothing changes, "image P" is displayed.
- play track 2 => "image 2" is displayed.
- play track 3 => no image => bubble back to playlist image "image P" is displayed.
- play track 4 => "image 4" is displayed.
- Back button clicked => display coverArt "Image X"
- Playlist B loads => no associated image, keep "image X" displayed
- play track 1 => nothing changes
- play track 2 => "image 2" is displayed.

When a new playlist is loaded, or sub-folder, or sub-playlist is loaded and if the sub-thing has an image associated with it, this image will be a temporary fallback for any media items contained in the sub-thing. But always falling back to the original fallback when no image is available.

- For audio files, the cover art will always show (obviously only when the cover art controller is available in the skin).

- For video files, the only time an associated image will display is when the user clicks the "stop" button (not the pause button) or when the video is complete and the player is set up to not continue advancing to the next item in the playlist. (The autoAdvance option can be set to 0 as:

<div data-wimpyplayer data-autoAdvance=0></div>

 

- When a playlist has finished the last file in the list, with the loop playlist option disabled (loop=0) the associated playlist image should appear, or the default "fallback" (the original image used when the player loads). The loop option has 3 states:
0 = don't loop anything (default)
1 = loop playlist
2 = loop track.

<div data-wimpyplayer data-loop=0></div>

 

 

See Also