Toevoegen artikel simpel
Blog

Artikel toevoegen in Joomla, zo simpel!

Het is tijd om de tien tips om Joomla gebruiksvriendelijker te maken uit mijn vorige blog in praktijk te brengen. We gaan het het toevoegen van een artikel via de frontend van Joomla sterk vereenvoudigen en gebruiksvriendelijker maken.


Het toevoegen van artikelen via de Joomla frontend is een van de eerste dingen waarmee eindgebruikers te maken krijgen. Dit zou niet al te ingewikkeld moeten zijn maar veel gebruikers ervaren het toch als een complexe handeling.

Proef op de som

Ik wilde zien en testen wat de gebruikers ervaren dus heb ik mijn vriendin Julianne gevraagd een “blog” artikel te plaatsen op een standaard Joomla 3 installatie. Ze wist wat Joomla was, maar had er nog nooit mee gewerkt. Ik gaf haar gegevens om in te loggen en de volgende opdracht:

  1. Log-in op de website
  2. Plaats een artikel op de voorpagina met: titel, tekst, afbeelding en tag
  3. Log-uit op de website

Video vóór enige verbetering

De volgende video, die 2x versneld is afgespeeld, laat zien hoe Julianne in de standaard Joomla installatie de opdracht probeert uit te voeren. Het toevoegen van titel en tekst gaat Julianne snel af. Het toevoegen van een afbeelding en tag is iets lastiger, maar ook dat weet ze te vinden.

Gebruikerstest vóór verbetering

Na het opslaan van het artikel ontstaat echter de grootste verwarring. Het artikel staat niet op de voorpagina, waar is het gebleven? Na het nodige rondklikken, waarbij ze zelfs in de backend van Joomla terecht komt, ziet ze dat de categorie niet was geselecteerd.

In totaal doet Julianne er 8 minuten en 22 seconden over om het artikel te plaatsen. Niet slecht voor een eerste keer, maar dat moet zeker sneller kunnen.

Video ná verbetering

Ook de volgende video is 2x versneld afgespeeld. De zelfde opdracht wordt weer uitgevoerd, maar ditmaal op een geoptimaliseerde Joomla 3 installatie waarbij de gebruiksvriendelijkheid is verbeterd.

Gebruikerstest ná verbetering

Nu doet Julianne er slechts 1 minuut en 29 seconden over. Het is natuurlijk niet meer de eerste kennismaking met Joomla, maar dankzij de aanpassingen is de opdracht een stuk eenvoudiger en sneller uit te voeren.

De toegepaste verbeteringen

Wat voor ons heel logisch is als Joomla-expert kan voor een eindgebruiker onbegrijpelijk zijn. We proberen ons daarom te verplaatsen in de eindgebruiker. Het meekijken over de schouders is ontzettend leerzaam en heeft ons geïnspireerd om de volgende verbeteringen toe te passen.

Het uitgangspunt van alle onderstaande toegepaste optimalisaties voor de gebruikersvriendelijkheid is "Don't make me think"; voorkom dat de gebruiker gaat twijfelen, zoeken of allerlei keuzes moet maken.

  1. Verwijs naar relevante pagina na inloggen
  2. Hou het simpel & duidelijk: inloggen / uitloggen
  3. Maak gebruik van de Joomla instellingen
  4. Beperk de opties in de tekstverwerker
  5. Maak gebruikersgroepen en toegangsniveaus begrijpelijk
  6. Voorkom verwarring, geef geen onnodige toegang
  7. Pas taal overrides toe om teksten duidelijker te maken
  8. Website output aanpassen met template overrides
  9. Optimaliseer weergave met CSS en JavaScript
  10. Splits artikel invoervelden

Dit zijn tevens alle tips uit het artikel "10 tips om Joomla gebruiksvriendelijker te maken", lees daar de achtergronden bij de tips.

Template override voor toevoegen/bewerken artikel

Centraal in dit voorbeeld is een template override voor de weergave van het formulier om artikelen toe te voegen of te bewerken. Overbodige invoervelden zijn weggelaten of verborgen en extra functionaliteiten zijn toegepast om het plaatsen van een artikel eenvoudiger en duidelijker te maken.

Na de opname van de gebruikerstest heb ik de template override nog verder uitgebreid waardoor de alias automatisch wordt gegenereerd op het moment dat je typt. Deze is door er op te klikken verder naar wens aan te passen.

Template override voor toevoegen artikel

De alias wordt automatisch gegenereerd

Kan ik daar ook gebruik van maken?

Jazeker! De volledige code van deze template override is hieronder te vinden. Maak een nieuw bestand aan genaamd edit.php en plaats dit in de map templates/naam-van-template/html/com_content/form/. Knip en plak daarin onderstaande code.

Veel succes met het ontwikkelen van gebruiksvriendelijke Joomla websites!

<?php
/**
* @package Article Form override for Joomla 3
* @copyright Copyright (c) 2014 Sander Potjer - www.perfectwebteam.nl
* @license GNU General Public License version 3 or later
*/
defined('_JEXEC') or die;
JHtml::_('behavior.keepalive');
JHtml::_('behavior.calendar');
JHtml::_('behavior.formvalidation');
JHtml::_('formbehavior.chosen', 'select');
// Create shortcut to parameters.
$params = $this->state->get('params');
// Get Category ID
if($this->item->catid)
{
// Existing article
$catid = $this->item->catid;
}
else
{
// New Article
$catid = $params->get('catid');
}
// Get Article ID
if($this->item->id)
{
// Existing article
$id = $this->item->id;
}
else
{
// New Article
$id = '00';
}
// Generate preview URL to article
$url = JRoute::_(ContentHelperRoute::getCategoryRoute($catid));
?>
<scripttype="text/javascript">
Joomla.submitbutton=function(task)
{
if(task=='article.cancel'||document.formvalidator.isValid(document.getElementById('adminForm')))
{
<?phpecho$this->form->getField('articletext')->save(); ?>
Joomla.submitform(task);
}
}
</script>
<style>
#jform_title {
display: block;
width: 100%;
min-height: 40px;
font-size: 18px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.toggle-editor {
display: none;
}
.chzn-container {
width: 100%!important;
}
.btn-group {
width: 49%;
}
.btn-group .btn {
width: 100%;
}
</style>
<divclass="edit item-page<?phpecho$this->pageclass_sfx; ?>">
<?phpif ($params->get('show_page_heading', 1)) : ?>
<divclass="page-header">
<h1>
<?phpecho$this->escape($params->get('page_heading')); ?>
</h1>
</div>
<?phpendif; ?>
<formaction="<?phpechoJRoute::_('index.php?option=com_content&a_id='.(int) $this->item->id); ?>" method="post" name="adminForm" id="adminForm" class="form-validate form-vertical">
<!-- Visible fieldset -->
<fieldset>
<divclass="row-fluid">
<!-- Left column -->
<divclass="span8">
<divclass="tab-content">
<divclass="tab-pane active" id="editor">
<divclass="control-group">
<divclass="controls">
<?phpecho$this->form->getInput('title'); ?>
</div>
</div>
<divclass="control-group">
<divclass="controls">
<p><?phpechoJText::_('OVERRIDE_COM_CONTENT_FORM_PUBLICATION') ?><?phpecho$url; ?>/<?phpecho$id; ?>-<strongid="alias"><?phpecho$this->item->alias; ?></strong></p>
</div>
</div>
<divclass="control-group">
<divclass="controls">
<?phpecho$this->form->getInput('articletext'); ?>
</div>
</div>
<divclass="alert alert-info">
<?phpechoJText::_('OVERRIDE_COM_CONTENT_FORM_READMOREDESC') ?>
</div>
</div>
</div>
</div><!-- End Left column -->
<!-- Right column -->
<divclass="span4">
<divclass="well">
<h3class="page-header"><?phpechoJText::_('OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS') ?></h3>
<?phpecho$this->form->renderField('state'); ?>
<?phpecho$this->form->renderField('access'); ?>
<?phpecho$this->form->renderField('publish_up'); ?>
<divclass="btn-toolbar">
<divclass="btn-group">
<buttontype="button" class="btn" onclick="Joomla.submitbutton('article.cancel')">
<spanclass="icon-cancel"></span>&#160;<?phpechoJText::_('JCANCEL') ?>
</button>
</div>
<divclass="btn-group">
<buttontype="button" class="btn btn-success" onclick="Joomla.submitbutton('article.save')">
<spanclass="icon-ok"></span>&#160;<?phpechoJText::_('JSAVE') ?>
</button>
</div>
</div>
</div>
<divclass="well">
<h3class="page-header"><?phpechoJText::_('OVERRIDE_COM_CONTENT_FORM_IMAGE') ?></h3>
<divclass="control-group">
<divclass="controls">
<?phpecho$this->form->getInput('image_intro', 'images'); ?>
</div>
</div>
</div>
<divclass="well">
<h3class="page-header"><?phpechoJText::_('JTAG') ?></h3>
<divclass="control-group">
<divclass="controls">
<?phpecho$this->form->getInput('tags'); ?>
</div>
</div>
</div>
</div><!-- Right column -->
</div>
</fieldset><!-- End Visible fieldset -->
<!-- Hidden fieldset -->
<fieldsetclass="hidden">
<?phpecho$this->form->getInput('catid'); ?>
<?phpecho$this->form->getInput('alias'); ?>
<?phpechoJHtml::_('form.token'); ?>
<inputtype="hidden" name="task" value="" />
<inputtype="hidden" name="return" value="<?phpecho$this->return_page; ?>" />
<?phpif ($this->params->get('enable_category', 0) == 1) :?>
<inputtype="hidden" name="jform[catid]" value="<?phpecho$this->params->get('catid', 1); ?>" />
<?phpendif; ?>
</fieldset><!-- End Hidden fieldset -->
</form>
</div>
<scripttype="text/javascript">
// Add title placeholder
jQuery("#jform_title").attr("placeholder","<?phpechoJText::_('OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER') ?>");
// Transform title to alias while typing
jQuery("#jform_title").keyup(function()
{
vartitle=jQuery(this).val();
alias=title.toLowerCase().replace(/[^a-z0-9\s]/gi,'').replace(/[_\s]/g,'-');
jQuery("#jform_alias").val(alias);
jQuery("#alias").html(alias);
});
// Allow alias editing on click
jQuery('#alias').click(function()
{
varreplaceWith=jQuery('<input id="temp" name="temp" type="text"></input>');
varconnectWith=jQuery('#jform_alias');
varelem=jQuery(this);
elem.hide();
elem.after(replaceWith);
replaceWith.val(elem.text());
replaceWith.focus();
replaceWith.blur(function()
{
if(jQuery(this).val() != "")
{
connectWith.val(jQuery(this).val()).change();
elem.text(jQuery(this).val());
}
jQuery(this).remove();
elem.show();
});
// Only allow valid alias characters
jQuery("#temp").bind('keypress',function(event)
{
varregex=newRegExp("^[a-z0-9\-]+$");
varkey=String.fromCharCode(!event.charCode ? event.which : event.charCode);
if(!regex.test(key))
{
event.preventDefault();
returnfalse;
}
});
});
</script>
view rawedit.php hosted with ❤ by GitHub
JFIELD_ACCESS_LABEL="Visible for"
OVERRIDE_COM_CONTENT_FORM_IMAGE="Image"
OVERRIDE_COM_CONTENT_FORM_PUBLICATION="This article will be published on"
OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS="Publication details"
OVERRIDE_COM_CONTENT_FORM_READMOREDESC="<strong>Read More:</strong> use the \"Read More\" button to split an article. Place the cursor in the article where the \"Read More\" button needs to be added, and click on the \"Read More\" button above."
OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER="Enter your blog post title"