The Jamroom Artist Themes can support up to hundreds of Audio files at a time, but often this causes the Artist Page to become very long, and take a long time to load. Often in these cases, it would help if the Music page on the Artist Site could be split up into “pages”. With a bit of PHP work this can be accomplished, and following the steps outlined below you can add pagination to your own Artist Themes.
Step One: Modify song_header.tpl
The first step is to modify the “song_header.tpl” file for the Artist Theme you want to add pages to. For this example, we are going to use the “song_header.tpl” file from the Moss Green Artist Theme, which by default looks like this:
<tr>
<td colspan="3" width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="thMusicH">
"{SONG_NAME}"
</td>
<td class="thMusicH" style="text-align: center; font-size: 11px">
<?php if ('{QUOTA_RATE}' == 'yes') { ?>
<a href="{SONG_RATING_FORM}&template=moss_rate_song.tpl" {POPUP_JAVALINK}>
<u>Rate This Song!</u></a> <i>(Current Rating: {SONG_RATING_AVG})</i>
<?php } ?>
</td>
<td class="thMusicH" style="text-align: right">{SONG_LENGTH}</td>
</tr>
<tr>
<td width="100%" colspan="3">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="02%" class="thMusicI"><img src="{SONG_IMAGE}&width=128"
alt="{SONG_NAME}" border="0" width="128"></td>
<td width="78%" class="thMusicP">
We are going to want to add a block of PHP code to the top of this file which will control the pagination of the music pages:
<?php
// SONG PAGINATION header section - goes in "song_header.tpl"
// how many song per page are we showing:
if (!defined('SONGS_PER_PAGE')) {
define('SONGS_PER_PAGE',3);
}
// figure out our current, next, previous and last pages in our set
if (!is_numeric($_REQUEST['page']) && !is_numeric($curr_page)) {
$curr_page = round(ceil({SONG_NUMBER} / SONGS_PER_PAGE));
}
elseif (!is_numeric($curr_page)) {
$curr_page = $_REQUEST['page'];
}
$next_page = $curr_page + 1;
$prev_page = $curr_page - 1;
$last_page = round(ceil({SONG_COUNT} / SONGS_PER_PAGE));
// we're only going to show songs that fall on or page
if ({SONG_NUMBER} <= ($curr_page * SONGS_PER_PAGE)
&& {SONG_NUMBER} > ($prev_page * SONGS_PER_PAGE)) {
?>
<tr>
<td colspan="3" width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="thMusicH">
"{SONG_NAME}"
</td>
<td class="thMusicH" style="text-align: center; font-size: 11px">
<?php if ('{QUOTA_RATE}' == 'yes') { ?>
<a href="{SONG_RATING_FORM}&template=moss_rate_song.tpl" {POPUP_JAVALINK}>
<u>Rate This Song!</u></a> <i>(Current Rating: {SONG_RATING_AVG})</i>
<?php } ?>
</td>
<td class="thMusicH" style="text-align: right">{SONG_LENGTH}</td>
</tr>
<tr>
<td width="100%" colspan="3">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="02%" class="thMusicI"><img src="{SONG_IMAGE}&width=128"
alt="{SONG_NAME}" border="0" width="128"></td>
<td width="78%" class="thMusicP">
Note the addition of the PHP block at the top - between the <?php and ?> tags. This contains some of the necessary variables and information we are going to need to handle the pages. The key part is this statement:
define('SONGS_PER_PAGE',3);
As this defines how many songs per page are going to be shown, so set it to a number you would like.
Save your changes to the song_header.tpl file and continue to Step Two.
Step Two: Modify song_footer.tpl
Now that the song_header.tpl file has been modified, you’ll want to modify the song_footer.tpl file so we can add in the necessary “next” and “previous” links that will allow the visitor to move back and forth between the song pages. By default, the Moss Green song_footer.tpl file looks like this:
</td>
<td width="20%" class="thMusicI"> {SONG_ADVISE_IMAGE}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<table width="100%" cellpadding="1" cellspacing="2" border="0">
<tr><td class="thMusicL">genre</td><td class="thMusicR">{SONG_GENRE}</td></tr>
<tr><td class="thMusicL">album</td><td class="thMusicR">{SONG_ALBUM}</td></tr>
<tr><td class="thMusicL">label</td><td class="thMusicR">{SONG_LABEL}</td></tr>
<tr><td class="thMusicL">credits</td><td class="thMusicR">{SONG_CREDITS}</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
We want to add some PHP code into here as well that will show our next and previous links as needed:
</td>
<td width="20%" class="thMusicI"> {SONG_ADVISE_IMAGE}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<table width="100%" cellpadding="1" cellspacing="2" border="0">
<tr><td class="thMusicL">genre</td><td class="thMusicR">{SONG_GENRE}</td></tr>
<tr><td class="thMusicL">album</td><td class="thMusicR">{SONG_ALBUM}</td></tr>
<tr><td class="thMusicL">label</td><td class="thMusicR">{SONG_LABEL}</td></tr>
<tr><td class="thMusicL">credits</td><td class="thMusicR">{SONG_CREDITS}</td></tr>
</table>
</td>
</tr>
<?php
// SONG PAGINATION footer section
// if we are on the last song of our page, we need to show the next and previous page links
if (({SONG_NUMBER} % SONGS_PER_PAGE) == 0 || {SONG_NUMBER} == {SONG_COUNT}) {
?>
<tr>
<td width="100%" colspan="3">
<table width="100%" cellpadding="1" cellspacing="2" border="0">
<tr>
<td class="thMusicL">
<?php
// create our links based on which page we are on
if ($curr_page == 1) {
// since we are on our first page, we are NOT going to
// show a previous page link - only next page
echo '<a href="index.php?page='. $next_page .'">Next Page</a>';
}
elseif ($curr_page == $last_page) {
// when we are on our LAST page in the set, we don't want to
// show a "next page" link.
echo '<a href="index.php?page='. $prev_page .'">Previous Page</a>';
}
else {
// everything else is somewhere in between, so show both links
echo '<a href="index.php?page='. $prev_page .'">Previous Page</a> ';
echo '<a href="index.php?page='. $next_page .'">Next Page</a>';
}
?>
</td>
<tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<?php
}
} // this is the end of the "if" statement started in the song_header.tpl file
?>
As you can see we have added in a new section of PHP code and HTML that will display a small “next page” or “previous page” link depending on if there IS a next or previous page. Make the changes then save your file.
Step Three: Regenerate the Artist Page
With those changes added in to the templates, your last step is to rebuild the artist page and test the changes. If it all works, you should see the music page is now “paginated” and you can step through the pages using the “next page” and “previous” page links at the bottom of each page.
Note that you will likely want to change the style of what the Next and Previous page links look like, and that is done in the song_footer.tpl file, in this section:
// create our links based on which page we are on
if ($curr_page == 1) {
// since we are on our first page, we are NOT going to
// show a previous page link - only next page
echo '<a href="index.php?page='. $next_page .'">Next Page</a>';
}
elseif ($curr_page == $last_page) {
// when we are on our LAST page in the set, we don't want to
// show a "next page" link.
echo '<a href="index.php?page='. $prev_page .'">Previous Page</a>';
}
else {
// everything else is somewhere in between, so show both links
echo '<a href="index.php?page='. $prev_page .'">Previous Page</a> ';
echo '<a href="index.php?page='. $next_page .'">Next Page</a>';
}
If you receive PHP Syntax Errors from your Artist page after this change, double check that you have entered everything correctly into the templates like shown above.
|
