Playlist layout options

Playlist layout control is in Section 2 of Station customization.

This help page is intended for web designers and developers seeking to integrate Spinitron-generated playlist HTML into another web page. We assume familiarity with HTML 4.01 and CSS 2.1. Please contact Spinitron if you need help integrating these playlists in your web pages.

You control how Spinitron displays public playlists with the Playlist layout control in the Station configuration page. It affects the HTML structure (markup) and appearance of playlists, such as cover art.

At present the options are:

If you have Buy it! vendor links turned off then the first and second are identical to each other.

HTML table layout

The table has one row per song. It always has a column for song timestamp followed by a column for information about the song. If you turn on cover art Spinitron puts it in an additional column before the timestamp. If you choose Buy it! buttons (instead of inline Buy it! links) Spinitron puts them in another column after song information.

Table layout with cover art and inline Buy it! links

Table layout example

<table cellspacing="0" class="pltab art"><tr class="od">
    <td>
      <div class="art"><img coverart></div>
      </td>
    <td>
      <a name="songid"></a>
      <p class="pltime">HH:MMap</p>
      </td>
    <td>
      <p class="plrow">
        <b><a artistlink>Artist Name</a></b>
        “Song Name”
        <span class="sn_cp">composed by Composer Name</span>
        from <i><a disklink>Disk Name</a></i>
        <SMALL>MEDIA-FORMAT RELEASE-TYPE</SMALL>
        (<span class="sn_ld"><a labellink>Label Name</a> 
          <a labelurl>www.label.url</a>YEAR</span>)
        <SMALL><b>N R L</b></SMALL>
        <span class="sn_sn">—Song Note</span>
        <a class="dynam dynit" buyitlink>Buy it!</a>
        </p>
      </td>
    </tr></table>

Table layout with cover art and Buy it! buttons

cover art and buy-it! example

The A class "dynam dynit" element from the previous example is replaced by an additional TD at the end of the TR:

  <tr><td class="dynit"><a class="dynam dynit" buyitlink></a></td>
    </tr>

The PNG image of the Buy it! buttons is assigned to the A element in the stylesheet http://spinitron.com/css/style-public.css, which you may override to change the color scheme, for example.

Blocks (with Buy it! buttons)

The block layout has a slightly different appearance and entirely different markup structure:

block layout example

<div class="f2row ev">
  <div class="art"><img coverart></div>
  <div class="dynit"><a class="dynam dynit" buyitlink></div>
  <div class="nfo">
    <a name="songid"></a>
    <p class="st">HH:MMap</p>
    <p>
      <span class="aw"><a artistlink>Artist Name</a></span>
      <span class="sn">“Song Name”</span>
      <span class="cp">composed by Composer Name</span>
      <span class="df"> from</span>
      <span class="dn"><a disklink>Disk Name</a></span>
      <span class="de">Media-format Release-type</span>
      <span class="ld">(<a labellink>Label Name</a> 
        <a labelurl>www.label.url</a>YEAR)</span>
      <span class="so">—Song Note</span>
      </p>
    </div>
  </div>
div.f2row div.nfo {
  padding 0.25em 0 0.5em;
  }
div.f2row div.nfo p.st {
  font-size: 83%;
  color: #666;
  }
div.f2row div.nfo span.aw {
  font-weight: bold;
  }
div.f2row div.nfo span.dn {
  font-style: italic;
  }
div.f2row div.nfo span.de {
  font-size: 83%;
  text-transform: uppercase;
  }
div.f2row div.nfo span.fg {
  font-size: 83%;
  text-transform: uppercase;
  font-weight: bold;
  }