Last updated October 25, 2010. Created by jdelaune on January 21, 2009.
Edited by michaelcchastain. Log in to edit this page.
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