Adding a login popup to a gantry template

Before reading the tutorial there are two important points. First, there is a very similar tutorial on the Gantry framework website you might want to check. They use a module and rokbox while we want to use the component and a lightbox jQuery plugin. Second, if your template is not based on Gantry you should still be able to use the same idea, only you'll edit a module override instead of a feature.

What we want is to show a simple link to the log in view of the users component. The form will be loaded using ajax in the lightbox overlay. If a visitor doesn't have JavaScript enabled the link should point to the normal login page.

The back-end stuff

To make the feature usable we need to add it to the options of the template. To do so you need to edit template-options.xml, a standard file for gantry templates. Look for the features fieldset and add the new login feature if it doesn't exist already.

<fieldset name="features" label="FEATURES">
.
.
.
<fields name="login" type="chain" label="LOGIN" description="LOGIN_DESC">
 <field name="enabled" enabler="true" type="toggle" default="1" label="SHOW" />
 <field name="position" type="position" translation="false" default="toolbar-a" label="POSITION"/>
 </fields>
.
.
.
</fieldset>

If you need more options later you can add them to these fields. For this tutorial we only need the basic options of whether to show the link and where.

The front-end stuff

This part is more fun. First you'll want to have your favorite lightbox plugin and jQuery linked to the Joomla pages. Obviously, the plugin you choose must support ajax calls. We will use PrettyPhoto here (we've also tested it with Colorbox).

login.php

Let's start with the feature file. In your template you should have a folder called features. Create a file called login.php in this folder. These are the contents:

defined('JPATH_BASE') or die();
gantry_import('core.gantryfeature');
JHtml::_('behavior.keepalive');
/**
 * @package gantry
 * @subpackage features
 */
class GantryFeatureLogin extends GantryFeature {
 var $_feature_name = 'login';
 
 function getType(){
 $user = JFactory::getUser();
 return (!$user->get('guest')) ? 'logout' : 'login';
 }
 
 function render($position=""){
 global $gantry;
 $type = GantryFeatureLogin::getType();
 ob_start();
 ?>
 <div class="login">
 <?php if( $type == 'login'): ?>
 <a href="/<?php echo JRoute::_('index.php?option=com_users&view=login'); ?>" id="login-popup" title="<?php echo JText::_('JLOGIN') . '&nbsp;/&nbsp;' . JText::_('JREGISTER'); ?>"><?php echo JText::_('JLOGIN') . '&nbsp;/&nbsp;' . JText::_('JREGISTER'); ?></a>
 <?php else: ?>
 <?php $params = &JComponentHelper::getParams('com_users'); ?>
 <form action="<?php echo JRoute::_('index.php?option=com_users&task=user.logout'); ?>" method="post">
 <button type="submit" class="button"><?php echo JText::_('JLOGOUT'); ?></button>
 <input type="hidden" name="return" value="<?php echo base64_encode($params->get('logout_redirect_url',$params->getValue('return'))); ?>" />
 <?php echo JHtml::_('form.token'); ?>
 </form>
 <?php endif; ?>
 </div>
 <?php
 return ob_get_clean();
 }
}

As you see it's just a class that extends/overrides the default Gantry features. The final output is produced by the render function. In it we first make a check to see if the visitor is logged in or not. If he/she is we just show the default logout form, otherwise we display the login link. Notice the link has an id so we can easily target it with JavaScript and the target URL is the default login component view (JRoute::_('index.php?option=com_users&view=login')).

JavaScript

Now comes the JavaScript. You only need to add the following code using your preferred method.

var loginLink = jQuery("a#login-popup"),
href = loginLink.attr('href');
 
 if(href){
 // The suffix must start with & if other parameters were already in the URL
 if( href.indexOf('?') != -1 ){
 var new_href = href + '&tmpl=component&type=raw&ajax=true&width=420&height=260';
 }else{
 var new_href = href + '?tmpl=component&type=raw&ajax=true&width=420&height=260';
 }
 loginLink.attr('href',new_href);
 
 loginLink.prettyPhoto({
 'show_title':false,
 'opacity':.5,
 'social_tools':false,
 'deeplinking':false,
 'keyboard_shortcuts':false
 });
 }

This simple script will add parameters to the target URL of the login link, then it will use PrettyPhoto to load the content of the target URL. The first parameter tmpl=component tells Joomla to load the component only, using the layout found in root/templates/your-template/component.php. As you may guess that'll be the next file to edit. The second parameter will be used in the next section. The rest are all parameters for PrettyPhoto. As you see you need to specify the dimensions of the popup, which isn't necessary if you use colorbox.

component.php

This is the last file you need to edit. You only need to add a check at the top, like this:

.
. // no direct access, etc
.
<?php if (JRequest::getString('type')=='raw'):?>
<div class="rt-block">
 <jdoc:include type="component" />
 </div>
<?php else: ?>
.
. // normal output
.
<?php endif; ?>

This needs to be done because we don't want a whole HTML document but only the markup for the form. That means no doctype, no head, no body tags. Just the plain component output. Otherwise you will load a complete document inside another one, which might cause errors and won't validate. That's why we check the type parameter. If it happens to be raw, as we set it with the script, we'll get only what we need. However we may not forget that component.php is used n other parts of Joomla so the rest should be left intact.

The wrapping div with the class rt-block should provide padding so the content doesn't touch the borders of the lightbox.

And that's it. Now you have an awesome login for your site.