Demo Content PDF  Array Imprimer Array  Envoyer

The demo for MediaMogul utilises a large stock of custom code and styling to make the most of every content item and show what MediaMogul can do. This basically means that the HTML used in the custom modules and content have customisations which employ the characteristics of the template to make the "perfect" content.

This demo content section will take you through some of the content areas and general techniques used to further your understanding and help you realise the true potential of MediaMogul. If you would like to quickly deploy a replica of our MediaMogul demo for a new Joomla site, be sure to check out our RocketLauncher package.

Search Module

MediaMogul features special styling for the search module which can be seen in the right column of this demo. To activate this on your site, just publish the search module into the "Search" module position with other modules active in the Right Positions.

RokNewsRotator

Brand new for MediaMogul is the RokNewsRotator. The RokNewsRotator can display your top stories of the day and beautifully fades between them, giving your site a professional appearance. You can see this effect in action at the top of the main column on the front page of the demo. The setup is listed below.

Module Configuration

You can choose to use an installable module for the RokNewsRotator. The settings are accessible from the following path Admin > Extensions > Module Manager > RokNewsRotator . Setup is as follows:-
  • Link Title: Select if you want your titles to link to the article or not
  • Link Images: Select if you want the images to link to the article or not
  • Frontpage Items: This option controls whether frontpage items are shown
  • Count: Enter the value of how many articles you wish to have in the module
  • Category: Controls the category where the content is loaded from
  • Section: Controls the section where the content is loaded from
  • Include Mootools JS Library: Set to no unless using a template which doesn't have mootools already being called
  • Read More Label: The text placed in the read more button
  • Transition Duration: The time taken for the transition between articles in ms
  • Delay Length: The time taken for a transition to occur
  • Show Image Corners: If set to yes produces rounded cornered images, default is square
  • AutoPlay Rotator: Sets the module to automatically change articles or stay static for user input
  • Preview Length: Set a value to choose how many characters are shown as a preview of the full article
If you wish to place inside an Article, follow the instructions below:-
  1. Navigate to Admin > Extensions > Module Manager > RokNewsRotator
  2. Assign the module to the rotator position (By default, Joomla does not include this module position, so just type the rotator name into the position field.)
  3. Create your static content item
  4. Insert the following syntax {loadposition rotator} into the content item

    The article will now load the module
All you need to do now is to create some content items which are assigned to the category/section you chose in the module settings. In the content item, you will need to use the following syntax to load the image with the correct styling. The code is content editor HTML mode friendly.
<!--IMAGE image_path IMAGE-->
An example is as follows
<!--IMAGE images/stories/lego/rotator-3.jpg IMAGE-->
Place the image code at the top of your content item and write your content after it.

The Custom Script Approach

To enter custom classes into your content, you may first need to disable the default Joomla
WYSIWYG editor as it will strip out these classes when the item is saved. You can do this from your control
panel by going to Site > Global Configuration and setting apply setting Editor - N Editor
  • In the Joomla Administrator, go to Admin > Content > Article Manager. Select the New icon at the top right of the control centre.
  • Setup the static content item with the normal configuration, setting the fields for title, published etc..
  • Make sure your images are uploaded to your Joomla! /images/stories folder.
  • Scroll down to the large white box at the footer area of the content control area.
  • Insert the following at the top of this text box
<script type="text/javascript" src="templates/rt_mediamogul_j15/js/roknewsrotator.js">
</script> <script type="text/javascript"> window.addEvent('domready', function() { var rotator = new RokNewsRotator('news-rotator', { delay: 7000, duration: 800, corners: false, autoplay: true }); }); </script> <div id="news-rotator"> <div class="story-block"> <div class="image"> <img src="images/stories/lego/rotator-1.jpg" alt="story image" /> </div> <div class="story"> <div class="padding"> <h1>Imperials on Tatooine</h1> <p>In a bold move, the Empire task force has landed on the desert
planet of Tatooine in force. It's rumored that they are searching for one very
sannoying droid and his tiny companion, who may hold the key to the survival of
the galaxy.</p> </div> </div> </div> <div class="story-block"> <div class="image"> <img src="images/stories/lego/rotator-2.jpg" alt="story image" /> </div> <div class="story"> <div class="padding"> <h1>New Y-Wing Released</h1> <p>Featuring the amazing new golf ball thruster technology, the
rebel alliance has publicly announced the development of their new
secret weapon, the deadly Y-Wing. In addition to golf ball thrusters,
it also features an oak interior with chrome hardware.</p> </div> </div> </div> <div class="story-block"> <div class="image"> <img src="images/stories/lego/rotator-3.jpg" alt="story image" /> </div> <div class="story"> <div class="padding"> <h1>Firefighters Save the Day!</h1> <p>The smell of melted plastic was in the air as the well known
egoLand Tower went up in flames. Firefighters from multiple sets converged on
the location in a desperate attempt to extinguish the flame as
quickly and safely as possible.</p> </div> </div> </div> </div>

RokMediaScroller

Below are the instructions for setting up the new RokMediaScroller module to display your media feeds and content.

Module Configuration

You can choose to use an installable module for the RokMediaScroller available in the MediaMogul downloads section (mediamogul_extensions_j15). You can see the module version in action in the right column of this page. The settings are accessible from the following path Admin > Extensions > Modules Manager > RokMediaScroller . Setup is as follows:-
  • ID of Module Set unique ID's for each of your RokMediaScroller module instances so you can use more than one on a single page.
  • Count: Enter the value of how many feed items you wish to have the module display.
  • Feed URL Enter the url for the RSS feed for the media items you want to display.
  • Include rokmediascroller.js file: Set to no if another module is calling this file.
  • Transition Duration: The time taken for the transition between articles in ms

The Custom Script Approach

You can also choose to use custom script and html to create your own thumbnails and link content that will be displayed in the scrolling fashion, this approach can be seen in action in the right column of the demo frontpage. To enter custom classes into your content, you may first need to disable the default Joomla
WYSIWYG editor as it will strip out these classes when the item is saved. You can do this from your control
panel by going to Site > Global Configuration and setting apply setting Editor - N Editor
  • In the Joomla Administrator, go to Extensions > Module Manager. Select the New icon at the top right of the module control centre.
  • Setup the custom module with the normal configuration, setting the fields for position, published etc..
  • Scroll down to the large white box at the footer area of the module control area.
  • Insert the following at the top of this text box
<script type="text/javascript" src="templates/rt_mediamogul_j15/js/
rokvideoscroller.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { var x = new RokVideoScroller('video-list',{ 'duration': 1000 }); }); </script> <div id="video-list" class="video-list"> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini1.jpg" /> </div> <div class="desc"> <p>Empire Stops Drunk Drivers</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini2.jpg" /> </div> <div class="desc"> <p>Pilot Upset Over Crash</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini3.jpg" /> </div> <div class="desc"> <p>Politicians Hold a Summit</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini4.jpg" /> </div> <div class="desc"> <p>Popular Pub Past Prime</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini5.jpg" /> </div> <div class="desc"> <p>Animal Couples Go Boating</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini6.jpg" /> </div> <div class="desc"> <p>Here's Looking at You Kid</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini7.jpg" /> </div> <div class="desc"> <p>Riots In BlockTown Again</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini8.jpg" /> </div> <div class="desc"> <p>Unhappy Pet Seeks Vengeance</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini9.jpg" /> </div> <div class="desc"> <p>Hunting Season Opens Today</p> <p><a href="#">Watch Video</a></p> </div> </div> </div

Tabbed Modules

MediaMogul features an exciting new RokSlide powered tabbed module system. It is designed to allow you to publish your modules into the designated locations, creating tabs for each module position which you can customise. Currently, MediaMogul uses the User10-16 module positions for your tabs plus other module positions. By default, Joomla does not include these module positions, so these must be created in the Joomla admin.


Read More Buttons

Read more buttons are automatically generated for content items that use the intro and main text option. However, you can easily insert them manually as witnessed on this demo. Use the following code:
<a href="your_link" class="readon">Read More...</a>
 
RocketTheme Joomla Templates