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
Responses (10)
  • Accepted Answer

    Tuesday, May 15 2012, 09:07 AM - #Permalink
    0
    STEP 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 ========================//
    The reply is currently minimized Show
  • Accepted Answer

    Tuesday, May 15 2012, 09:14 AM - #Permalink
    0
    STEP 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]
    Attachments:
    The reply is currently minimized Show
  • Accepted Answer

    Tuesday, May 15 2012, 09:53 AM - #Permalink
    0
    STEP 3 - Markup your reviews with the [myTab] Tags
    Add [myTab=Whatever you want] With your content for the tab here. You can even load modules inside the tabs - NO PROBS! Then Close the tab using [/myTab].

    Repeat for as many tabs as you desire!

    Hope you're new tabbed MC is looking awesome!

    Gez
    The reply is currently minimized Show
  • Accepted Answer

    Monday, May 21 2012, 10:05 AM - #Permalink
    0
    IMPORTANT

    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
    The reply is currently minimized Show
  • Accepted Answer

    greengeek
    greengeek
    Offline
    Wednesday, May 23 2012, 03:55 AM - #Permalink
    0
    Sounds cool! Do you have a demo of it up by chance or any screen shots? I tried visiting the link which I thought was to your site, but it is password protected.
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, May 23 2012, 08:15 AM - #Permalink
    0
    Hi @greengeek,

    Sorry, site down for some dev atm.

    I'll post a video to demonstrate it working shortly.

    Gez
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, May 23 2012, 10:11 AM - #Permalink
    0
    Here's how it looks and works... As I mentioned in earlier posts, you just need to adjust the classes to the ones that your rockettheme template uses - i.e. module class suffixes etc...

    The reply is currently minimized Show
  • Accepted Answer

    Thursday, May 31 2012, 09:37 AM - #Permalink
    0
    Has anyone implemented this yet?

    If so, please post some screenshots/feedback to show others.

    Cheers,

    Gez
    The reply is currently minimized Show
  • Accepted Answer

    greengeek
    greengeek
    Offline
    Thursday, May 31 2012, 09:57 AM - #Permalink
    0
    I 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.
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, May 31 2012, 10:00 AM - #Permalink
    0
    If you're using some other tabs module/plugin, you should be able to add/remove or even edit the classes that are generated in the loop that splits the content into tabs to suit your needs.

    Shouldn't be too much of an edit hopefully!

    Hope it's useful,

    Gez
    The reply is currently minimized Show
Your Reply