0
For a long time, I struggled to style many 3rd-party components on my site. As Music Collection is the main front-end user interaction with my site content, it was important for me to try to style it to fit my RocketTheme template. Simply adding template classes inside of the view files went along way but I wanted to go further, and leverage some of the more 'fancy' modules like rokTabs.
I wanted to be able to split-up my content into tabs to allow me to create a more fluid and dynamic page, but, instead of creating an article for each tab, I wanted to pull the data from the artist, album or song review fields accordingly. For example, on my artist page, I mostly want the following features/tabs available;
[ul]
[li]Main description - Background info about the artist[/li]
[li]Gallery - in my case, I'm using a gallery/content plugin, 'CSS3Gallery' to do this.[/li]
[li]Related Videos - in my case, I'm pulling the related YouTube video from MC if it exists, then adding a JW Player module for related videos[/li]
[li]Events - in my case, each artist has their own calendar/events. I'm using JCalPro for this so, I place a module here that displays the calendar in a module[/li]
[li]Feedback form - in my case, my 'artists' mostly represent projects that users can join to get access to project-specific content/forums etc. I'm using this to place a signup form. [/li]
[/ul]
I then realised that whilst I want all of these tabs on most of my artist pages, I would need to make it dynamic and account for any number of tabs due to the changing requirements of my projects. Therefore, the small script that I've written accounts for you placing any tabs, in any order on a per album, artist or song basis.
It works like most dynamic tabs in that, using [myTab=Name of Your Tab]...Content goes here...[/myTabs] in your review field will dynamically render your MC reviews across multiple rokTabs, styled to match your rocketthem template.
Please follow along with the next few posts to see how to do it.
Best of luck,
Gez
I wanted to be able to split-up my content into tabs to allow me to create a more fluid and dynamic page, but, instead of creating an article for each tab, I wanted to pull the data from the artist, album or song review fields accordingly. For example, on my artist page, I mostly want the following features/tabs available;
[ul]
[li]Main description - Background info about the artist[/li]
[li]Gallery - in my case, I'm using a gallery/content plugin, 'CSS3Gallery' to do this.[/li]
[li]Related Videos - in my case, I'm pulling the related YouTube video from MC if it exists, then adding a JW Player module for related videos[/li]
[li]Events - in my case, each artist has their own calendar/events. I'm using JCalPro for this so, I place a module here that displays the calendar in a module[/li]
[li]Feedback form - in my case, my 'artists' mostly represent projects that users can join to get access to project-specific content/forums etc. I'm using this to place a signup form. [/li]
[/ul]
I then realised that whilst I want all of these tabs on most of my artist pages, I would need to make it dynamic and account for any number of tabs due to the changing requirements of my projects. Therefore, the small script that I've written accounts for you placing any tabs, in any order on a per album, artist or song basis.
It works like most dynamic tabs in that, using [myTab=Name of Your Tab]...Content goes here...[/myTabs] in your review field will dynamically render your MC reviews across multiple rokTabs, styled to match your rocketthem template.
Please follow along with the next few posts to see how to do it.
Best of luck,
Gez
Responses (10)
-
Accepted Answer
-
Accepted Answer
0I haven't tried it yet. I will have to set up a test site and play around with it. Looks cool. I typically use yootheme templates on sites when I don't need to build the templates from scratch. I will have to see if that extension plays nicely with the warp framework, or maybe just test it on a clean joomla install. -
Accepted Answer
-
Accepted Answer
-
Accepted Answer
-
Accepted Answer
-
Accepted Answer
0IMPORTANT
I forgot to add that, you will need to include the javascript tag with the src attribute set to the URL where your mootools script for your rokTabs is served (almost certainly in your template's JS folder).
You can do so by echoing it to the page from your view/tmpl/default.php file that you've added your tabs to.
Good luck,
Gez -
Accepted Answer
-
Accepted Answer
0STEP 2
Then, at the point where you want to output your tabbed review on the page, add the attached code, adjusting the rokTabs div classes & the JS script setup to your RocketTheme template and desired animation/user interaction. [file name=display_review_in_roktabs.zip size=1534]http://www.joomlamusicsolutions.com/images/fbfiles/files/display_review_in_roktabs.zip[/file] -
Accepted Answer
0STEP 1
Near the top of your tmpl/default.php file in any of your views, add the following block of code and amend as per comments. Also, ensure that the code is wrapped in php tags.
//=================== DYNAMIC TABS ========================//
// Split the 'About Information' & 'Galleries' from the review
$tabbedReview = explode("[/myTab]", $this->areview->text);
// Set DEFAULT images to place in blank tabs replacing the URL
// to the image with your own.
$_coming_soon = "a tag to your image";
// Set a Counter to iterate
$tabCount = count($tabbedReview);
$iTab = 0;
// Uncomment the following to debug
//print_r($tabbedReview);
foreach($tabbedReview as $review){
$iTab++;
preg_match('!\\[myTab=(.*)\\]!', $review, $matches);
$tabTitle = $matches[1];
$tabContent = str_replace($tabTitle,'',$review);
$tabContent = str_replace('[myTab=]','',$tabContent);
$tabContent = trim("$tabContent");
$tabNo = "roktabs-tab".$iTab;
// if this is the first tab
if($iTab==1){
$tabLI = "first active icon-left";
$myTabs = array(0=>array(
"tab" => "$tabNo",
"title" => "$tabTitle",
"class" => "$tabLI",
"content" => "$tabContent")
);
}
//if this is any other except the last tab
if($iTab [greater than] 1){
$tabLI = " icon-left";
array_push($myTabs, array(
"tab" => "$tabNo",
"title" => "$tabTitle",
"class" => "$tabLI",
"content" => "$tabContent")
);
}
//if this is the last tab
if($iTab==$tabCount){
$tabLI = "last icon-left";
array_push($myTabs, array(
"tab" => "$tabNo",
"title" => "$tabTitle",
"class" => "$tabLI",
"content" => "$tabContent")
);
}
}
// DEBUG THE ARRAYS
// print_r($myTabs);
//=================== END DYNAMIC TABS ========================//
Your Reply
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here.
Register Here »