Album Artwork

From SqueezeboxWiki

SqueezeCenter and the Squeezebox Controller can display artwork associated with each album. This "cover art" is typically a copy of the CD/album's cover.

Artwork is displayed in several places within the SqueezeCenter Web interface. The details of the display vary depending on the skin currently being used. The "Default", "Fishbone," and "Moser" skins have browse by cover art functions, clicking on a picture of the CD/album will select the album for playing or processing. The "Fishbone" skin also displays the cover art in the status display as the songs are played.

Contents 1 What is Artwork, how does SqueezeCenter use it? 2 How do I get cover art? 3 Graphic file requirements 4 Image sizes 5 Technical details 6 Server side resizing

What is Artwork, how does SqueezeCenter use it?

Artwork is cover art from CD albums. It is displayed both to beautify the SqueezeCenter interface. Any SqueezeCenter function which lists albums can show artwork by selecting the "Gallery View" icon in the upper right-hand corner of the left-hand pane.

How do I get cover art?

Many site that sell CDs include cover art in their catalog. With most browsers, you can right click on the image and select "Save image as..."

Several third party developers have written utilities to automatically retreive cover art based on the internal tags of your MP3, OggVorbis, FLAC, or other files. See the plugins page for more information.

Graphic file requirements

SqueezeCenter will display any graphic file that your browser can support. Nearly all browsers support GIF and JPG files, so most SlimDevices customers use one of these file formats.

Image sizes

The image files should be modest in size, as they are sized to fit on the HTML browser window. Because the images will be displayed at about 300x300 pixels, having images larger than that size will waste space and bandwidth

Up to SlimServer version 6.5 there were two file sizes in use in the current skins. One image was used when you selected tracks from an album, the image size should be about 300x300 pixels. A second image was used as a "thumbnail" in the browse-by-coverart, and was displayed in the status pane of the Fishbone skin. This image should be no larger than 100x100. SqueezeCenter 7 uses the same cover art file in all places, but resizes them appropriately.

Technical details

For each place in the skin that references a large cover art image, the SqueezeCenter software performs the following search:

• Search in the current music directory for (in order):

1. 1. cover.jpg, cover.gif,
   2. folder.jpg, folder.gif,
   3. album.jpg, album.gif,
   4. thumb.jpg, thumb.gif,
   5. albumartsmall.jpg, albumartsmall.gif

SqueezeCenter will use the first image file located in this search. For the smaller, thumbnail image, a similar search is performed, except that the list is reversed, searching for thumb first. Specifically:

• Search in the current music directory for (in order):

1. 1. thumb.jpg, thumb.gif,
   2. albumartsmall.jpg, albumartsmall.gif,
   3. cover.jpg, cover.gif,
   4. album.jpg, album.gif,
   5. folder.jpg, folder.gif

SqueezeCenter looks in the same path as the song, thus you would be looking for the same artfile in this case. However there is an option in Server Settings, Additional, Interface for setting filenames for Artwork, Artwork Thumbnail, and for setting a central location for artwork files. You can enter a specific filename if you use something not found in the list (eg, artwork.jpg). You may also create filenames based on song variables. If your first character is %, the server then parses the rest of the string as an InfoFormat, the same as title format is created.

/IMPORTANT: If you change this filename setting or if you have added or changed any artwork files to existing albums, you must use the rescan option Clear library and rescan everything to see your updates. Overnight scans won't do it. Go to Home - Server Settings and look for the rescan options./

As an example, you could create a single directory of songs and name all your artwork as artist-album.jpg. For this, enter a setting of

%ARTIST-ALBUM.jpg

for Artwork or Artwork Thumbnail in the server settings section. The extension can be specified for any slimserver supported format, .jpg is assumed if no extension is given.

Available data elements are:

• CT
  • ContentType
• TITLE
  • Track title
• GENRE
  • Song genre
• TRACKNUM
  • tracknumber as an integer
• FS
  • file size as reported by the underlying Operating System.
• ARTIST
  • Artist for pop music, sometimes conductor for classical works.
• ALBUM
  • Album name.
• COMMENT
  • Often the encoder used to create the MP3 / FLAC / AAC /... file.
• YEAR
  • Year published or released.
• SECS
  • total song length in seconds
• DURATION
  • (minutes and seconds),
• VBR_SCALE
  • VBR/CBR
• BITRATE
  • encoded BitRate
• VOLUME
  • volume name
• PATH
  • Path to the song
• FILE
  • main file name of song
• EXT
  • file extension of song (Type in Microsoft systems)
• LONGDATE
  • current date, long
• SHORTDATE
  • current date, short
• CURRTIME
  • current time.

Elements can be separated by anything (or nothing). The separators are only used if the data elements are present.

The above list is included for completeness, it is unlikely that anyone would actually want to have differing artwork files for songs of different bitrates, but the ability is in SqueezeCenter.

Artwork internal to the ID3 tags within a song takes precedence, followed by any specified filename in the server settings. If an Artwork Folder setting is used (in Server Settings, Additional, Interface) then that folder is searched first for any file matching those given for Artwork and Artwork Thumbnail. In the Thumbnail selection, the Server reverses the search list so that thumb is found before cover. This way, you can have a set of large images and a set of small ones.

Browse by artwork and status BOTH scale the same image file found for Thumb. By default, the browse by artwork constrains to 100x100, while the status contrains to 100 leaving aspect ratio intact.

Server side resizing

As of version 6.5, Skins can control the behaviour of the server side resizing performed on the image by adjusting the filename requested.

At present, there are three parameters that can be passed to the server:

• The requested size
• The resizing mode to be used
• The background colour to be used

All three parameters are optional, and should be appended to the filename, before the file extension, and separated with underscores.

Firstly, the requested size is passed as, e.g. 100x200. One of the dimensions can be omitted, e.g. 100xX, in which case the omitted dimension is chosen to maintain the aspect ratio of the image. If the size is ommited, it is taken to be the default thumbnail size if a thumb was requested, else it is the current size of the image.

The exact interpretation of the size parameter varies, depending on the resize mode specified. There are six options that can be used:

• s - Stretch
• S - Squash
• p - Pad
• c - Crop
• f - Fit stretch
• F - Fit squash

Stretch will resize the source image, distorting the aspect ratio to return an image of the requested size. Squash behaves similarly, except that it will return the original sized image if both the requested height and width are bigger than those of the original. Squash is used by default, unless a size has been passed explicitly, in which case, stretch is used.

Pad will resize the source image to be as wide (or high) as the requested width (height), maintaining its aspect ratio. Bars will be added above and below (to the left and right of) the image, akin to letterboxing and pillarboxing.

Crop also maintains the aspect ratio, but fills the requested size, and crops the left and right (top and bottom) from the original image.

Fit stretch behaves very similarly to pad, except that bars are not added, instead the returned image is cropped to be of the same aspect ratio as the original. Fit squash is identical, except that it will not return an image larger than the original.

Finally, a background colour can be passed, in standard RGB hex format. This is used for the bars added when padding, and any PNGs with an alpha channel will also be blended with this colour.

The following are some examples, sssuming a source image of 200x200.

• /cover_300x400.jpg - Returns the original image stretched to 300x400.
• /cover_300xX.jpg - Returns the original image stretched to 300x300.
• /cover_300x400_S.jpg - Returns the original image.
• /cover_400x200_p_0000FF.jpg - Returns an image 400x200 with the original occupying the center 200x200, and padded with blue.
• /cover_400x200_c.jpg - Returns an image 400x200 showing the center 200x100 of the original.
• /cover_300x400_f.jpg - Returns the original stretched to 300x300.

NOTE: At this time, the server resizing only supports JPG, PNG or GIF image formats