Language Files

When naming Joomla language files, it is important to remember that the extension group name is used. The language filename uses the extension group name after the extension prefix. For example,

somebutton.xml
<extension version="3.4" type="plugin" group="editors-xtd">
    ...
    <languages folder="language">
        <language tag="en-GB">en-GB/en-GB.plg_editors-xtd_somebutton.ini</language>
        <language tag="en-GB">en-GB/en-GB.plg_editors-xtd_somebutton.sys.ini</language>
    </languages>
</extension>

Customizing Media Manager

These examples show how to load copies of com_media views and templates instead of their core counterparts for customization without hacking any core Joomla files.

Here is the secret sauce to override com_media views and templates. A system plugin with an onAfterInitialise() event handler to capture request data and evaluate parameters using JInput. For example,

/plugins/system/mcm/mcm.php
// no direct access
defined ( '_JEXEC' ) or die ( 'Restricted access' );

jimport('joomla.plugin.plugin');

class plgSystemMcm extends JPlugin { 

    public function onAfterInitialise() {

        $input = JFactory::getApplication()->input;

        if('com_media' == $input->getCMD('option')) {

            $this->loadView($input->getCMD('view'));

        }

        return true;
    }

    protected function loadView($view)
    {
        if (('images' == $view) || ('imagesList' == $view)) {

            $overridePath = FOFPlatform::getInstance()->getTemplateOverridePath('com_media', true) . '/' . $view;

            require_once $overridePath . '/view.html.php';
        }
    }
}

Application Specific onAfterInitialise()

This version of the onAfterInitialise() function shows how to apply the override for just the frontend (site) views and templates.

public function onAfterInitialise() {

    $app = JFactory::getApplication();

    if ($app->isSite()) {

        if('com_media' == $app->input->getCMD('option')) {

            $this->loadView($app->input->getCMD('view'));

        }

        return true;
    }

    return false
}

Create the new custom templates and views by copying the folders from the com_media component into your template folders. For example, if you want to customize media manager for your protostar template, copy the com_media folders into the protostar template as follows:

  1. copy
    /administrator/components/com_media/views/images
    to
    /templates/protostar/html/com_media/images
  2. copy
    /administrator/components/com_media/views/imageslist
    to
    /templates/protostar/html/com_media/imageslist

Directory structure of com_media protostar template overrides.

  • templates
    • protostar
      • html
        • com_media
          • images
            • tmpl
              • default.php
          • view.html.php
          • imageslist
            • tmpl
              • default_folder.php
              • default_image.php
              • default.php
          • view.html.php

Then modify both copies of view.html.php to include their respective default.php template copies.

At the end of the display function, comment out or replace,
parent::display($tpl);

with an include directive to the template copy,
include( dirname(__FILE__) . '/tmpl/default.php');

for example, in both the images and imageslist folders:

/templates/protostar/html/com_media/images/view.html.php
/templates/protostar/html/com_media/imageslist/view.html.php
//parent::display($tpl);
include( dirname(__FILE__) . '/tmpl/default.php');

Also comment or replace both loadTemplate('folder') and loadTemplate('image') function calls in the imageslist default.php template and include their file and folder default.php template copies.

for example,

/templates/protostar/html/com_media/imageslist/tmpl/default.php
<?php for ($i = 0, $n = count($this->folders); $i < $n; $i++) :
	$this->setFolder($i);
	//echo $this->loadTemplate('folder');
	include( dirname(__FILE__) . '/default_folder.php');
endfor; ?>

<?php for ($i = 0, $n = count($this->images); $i < $n; $i++) :
	$this->setImage($i);
	//echo $this->loadTemplate('image');
	include( dirname(__FILE__) . '/default_image.php');
endfor; ?>

The com_media views and templates will now be loaded instead of their core counterparts and can be customized without hacking any core Joomla files. The plugin code above can be found here on GitHub. The next page covers extending the com_media controller to handle base64 image uploads.

source code

Joomla Hacks

My notes while learning about Joomla extension development.

Google Maps API Key Storage

Extension Type: Component

Add the field parameters to the component configuration and update the respective language files. For example,

/administrator/components/com_mycomponent/config.xml
<!-- insert after existing fields -->	
<field name="googleapik" type="text" size="40"
    label="COM_MYCOMPONENT_FIELD_GOOGLEAPIK_LABEL"
    description="COM_MYCOMPONENT_FIELD_GOOGLEAPIK_DESC" />

Update the edit.php file containing the form that needs to retrieve the api key from the database. For example,

/administrator/components/com_mycomponent/views/mycomponent/tmpl/edit.php
<?php
defined('_JEXEC') or die;

// get google api key from component config
jimport('joomla.application.component.helper');
$googleapik = JComponentHelper::getParams('com_mycomponent')->get('googleapik');
?>

Put the API key in a JavaScript object below the form and before the JavaScript application that will use it.

<script type="text/javascript">
// global app namespace
var com_mycomponent = com_mycomponent || {};
// define global app vars here
com_mycomponent.googleapik = '<?php echo $googleapik; ?>';
</script>

Extension Type: Plugin

Add a config node for the the field parameters to the plugin manifest file and update the respective language files. For example,

/plugins/content/myplugin/myplugin.xml
<config>
    <fields name="params">
        <fieldset name="basic">
            <field 
                name="googleapik"
                type="text" 
                label="PLG_CONTENT_MYPLUGIN_FIELD_GOOGLEAPIK_LABEL" 
                description="PLG_CONTENT_MYPLUGIN_FIELD_GOOGLEAPIK_DESCRIPTION"
            />
        </fieldset>
    </fields>
</config>

Update the template override file containing the form that needs to retrieve the api key from the database. For example, add this php code before the form markup.

/administrator/templates/isis/html/com_content/article/edit.php
$plg_content_myplugin = JPluginHelper::getPlugin('content', 'myplugin');
$plg_content_myplugin_params = new JRegistry($plg_content_myplugin->params);

$googleapik = $plg_content_myplugin_params->get('googleapik');
Language Files

Resources

Joomla Hello World Module

This post documents my experience while following the Creating a simple module Joomla 3.x tutorial. I am brand new to Joomla and wanted to share my experience for anyone else trying to develop, install and demo this module in their Joomla 3 environment.

After following the steps in the tutorial, you can compare your mod_helloworld files to the files I have pushed to github. Additionally, here is the file structure of the module.

Files

  • mod_helloworld
    • sql
      • mysql
        • install.mysql.utf8.sql
        • uninstall.mysql.utf8.sql
    • tmpl
      • default.php
      • index.html
    • helper.php
    • index.html
    • mod_helloworld.php
    • mod_helloworld.xml

Install the Module

I created the module directly in the Joomla modules folder. For example,
C:\xampp\htdocs\joomla3\modules\mod_helloworld\

Using XAMPP for Windows as my local Joomla development environment.

In this example, install the module as follows:

  1. Copy the mod_helloworld folder into the Joomla modules folder if it isn’t already there.
  2. In the Joomla Administration page (/administrator), navigate to Extensions > Manage
  3. Select Discover from the sub menu.
  4. Select the Discover button.
  5. Check the box next to the Hello World module.
  6. Select the Install button.
Joomla 3 Module Discovery Install
Joomla 3.x Module Discovery Install

Add the module as follows:

  1. Navigate to Extensions > Modules
  2. Select the New button
  3. Under Select a Module Type: scroll down to the Hello World! module and select it.
  4. Fill out the mod_helloworld form, enter a Title, select a language and Position.
  5. Select the Save & Close button
Joomla 3.x Hello World Module Form
Joomla 3.x Hello World Module Form

In this example, Bonjour tout le monde (Hello World in French) is displayed in position-1 at the top of the home page.

Joomla3 Home page with Hello World module
Joomla3 Home page with Hello World module