Custom code (advanced)

Here I'm going to show you have to use the custom theme function in MP3 Player. In the end you will have created the example seen here: http://demo.coredesigns.co.uk/mp3player-example

Read this first: http://drupal.org/node/524344

Modules Needed:

• CCK
• FileField
• ImageAPI (For Album Artwork)
• ImageField (For Album Artwork)
• MP3 Player

Content Type Setup:

I created a new content type called audio (don't call it this if you are using the Audio module). With the following CCK fields:

• File (field_mp3)
• Image (field_albumart)
• Text (field_title)
• Text (field_artist)

Custom Template File:

Next I created a custom template file called node-audio.tpl.php

<?php
// $Id: node.tpl.php,v 1.5 2007/10/11 09:51:29 goba Exp $
?>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">

<?php print $picture ?>

<?php if ($page == 0): ?>
  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>

  <?php if ($submitted): ?>
    <span class="submitted"><?php print $submitted; ?></span>
  <?php endif; ?>

  <div class="content clear-block">
    <?php //print $content ?>
    <div class="feature">
    <?php print $node->field_albumart['0']['view']; ?>
    <p class="title"><?php print $node->field_title['0']['view']; ?></p>
    <p class="artist"><?php print $node->field_artist['0']['view']; ?></p>
    <?php print theme('mp3player', 'Default', "/" . $node->field_mp3['0']['filepath'], $node->field_title['0']['value'], $node->field_artist['0']['view'], NULL); ?>
    </div>
  </div>

  <div class="clear-block">
    <div class="meta">
    <?php if ($taxonomy): ?>
      <div class="terms"><?php print $terms ?></div>
    <?php endif;?>
    </div>

    <?php if ($links): ?>
      <div class="links"><?php print $links; ?></div>
    <?php endif; ?>
  </div>

</div>

Custom CSS:

Then I added some custom CSS to style.css

.feature {
  width: 402px;
  height: 102px;
  padding: 10px;
  border: 1px solid #b8d3e5;
  background: #edf5fa;
  color: #494949;
}

.feature img {
  float: left;
  border: 1px solid #000;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.feature p {
  padding: 0;
  margin: 0;
}

.feature .title {
  margin-top: 14px;
  font-size: 1.1em;
  font-weight: bold;
}

.feature .artist {
  font-size: 0.9em;
  margin-bottom: 5px;
}

Finally

Finally I tweaked the MP3 Player colours through the admin interface. Once again here is the finished product: http://demo.coredesigns.co.uk/mp3player-example