Supporto volontario e collaborativo per Joomla!® in italiano

Creazione di articoli: come semplificare la vita agli autori

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
La schermata predefinita per la creazione di un articolo dal frontend di Joomla non si presenta molto user-friendly per i non addetti ai lavori, l'ideale sarebbe avere un layout il più semplice possibile per consentire un invio di articoli da frontend immediato, senza dover comprendere tutti i parametri disponibili.
In questo articolo vedremo come renderla più semplice e intuitiva, in parte con i parametri di Joomla e in parte con l'aiuto dei nostri preziosi override del template.

Redirect del login

Di default quando un autore effettua il login da frontend, dopo il login viene redirezionato alla pagina del proprio profilo.
Un primo passo per rendere più semplice l'inserimento di nuovi articoli è fare in modo che dopo il login l'autore venga redirezionato direttamente alla pagina di creazione dell'articolo.
Per fare questo, se abbiamo una voce di menu di tipo Utenti > Login, andiamo a modificarla nel tab Opzioni e inseriamo l'url per la creazione degli articoli, es. index.php?option=com_content&view=form&layout=edit oppure l'url della voce di menu collegata all'invio articolo, se presente.




Anche nel modulo Login possiamo impostare il parametro Redirezionamento dopo accesso in modo che vada alla voce di menu per la creazione dell'articolo.

Categoria per la creazione degli articoli


Un altro consiglio per non creare confusione e dubbi nell'autore è non dare a lui la scelta della categoria, ma di impostarla direttamente nella voce di menu di tipo Articoli » Crea nuovo articolo
nel tab Opzioni, parametro Scegli una categoria:

Ridurre l'editor alle funzioni minime

L'editor TinyMCE di default è in modalità Avanzata o Estesa, per poterne utilizzare tutte le funzionalità come amministratore, ma un utente inesperto può essere messo in difficoltà da tutti quei pulsanti e probabilmente non li saprebbe utilizzare.
Possiamo quindi andare in Estensioni > Plugin > Editor - TinyMCE e impostare il parametro Modalità su Semplice.
Ecco come apparirà l'editor in frontend:



Purtroppo non c'è ancora la possibilità di impostare questa Modalità per gruppi di utenti (lo sarà dalla versione 3.7.0 di Joomla), quindi avrà effetto anche sull'amministratore del sito. Sarà quindi necessario installare un altro editor, come Jce, da assegnare all'amministratore, per poter nuovamente avere tutte le funzionalità a propria disposizione. In alternativa, Jce prevede l'assegnazione di diversi profili a seconda del gruppo di utenti, si può quindi impostarlo come predefinito per il sito in Configurazione globale e poi assegnare i vari profili ai gruppi di utenti. In questo caso la personalizzazione è molto più approfondita e può essere fatta per gruppi di utenti.

Nascondere i pulsanti non necessari

Alcuni pulsanti presenti nell'editor possono creare confusione e dubbi. Possiamo quindi andare in Estensioni > Plugin e nel menu a tendina scegliere editors-xtd. Appariranno tutti i pulsanti presenti nell'editor. Modifichiamo quelli che non vogliamo far vedere agli autori del sito impostando il parametro Accesso su Super Users. In questo modo sarà visibile solo agli amministratori del sito.
Nel nostro esempio lasceremo visibile solo il pulsante Button - Readmore, ovvero il Leggi tutto. Questo è il risultato:





Override del form di invio dell'articolo

Siamo arrivati a buon punto, la schermata di invio articolo si presenta più semplice, ma ci sono ancora degli elementi che possono creare esitazioni all'autore:


I pulsanti Salva e Annulla sono in alto, posizione non propriamente intuitiva...
Sono presenti i tab Pubblicazione, Lingua e Metadati, chiediamoci se vogliamo veramente che l'utente intervenga su questi parametri.
L'Alias è un campo che crea sicuramente confusione..."cos'è un Alias, cosa ci devo scrivere?"

Per intervenire su questi aspetti dobbiamo modificare il codice della pagina di invio di un articolo. Naturalmente utilizzeremo un override del template, così non perderemo le modifiche con successivi aggiornamenti.

Andiamo in Estensioni > Template > Lista template, selezioniamo il template (nel nostro esempio Protostar) e clicchiamo sul tab Crea override. Nella colonna Componenti clicchiamo su com_content e poi su form





Andiamo nel tab Editor, clicchiamo su html > com_content > form > edit.php



I tab sono visibili grazie a questo codice:

    <ul class="nav nav-tabs">
        <li class="active"><a href="#editor" data-toggle="tab"><?php echo JText::_('COM_CONTENT_ARTICLE_CONTENT') ?></a></li>
        <?php if ($params->get('show_urls_images_frontend') ) : ?>
        <li><a href="#images" data-toggle="tab"><?php echo JText::_('COM_CONTENT_IMAGES_AND_URLS') ?></a></li>
        <?php endif; ?>
        <?php foreach ($this->form->getFieldsets('params') as $name => $fieldSet) : ?>
        <li><a href="#params-<?php echo $name; ?>" data-toggle="tab"><?php echo JText::_($fieldSet->label); ?></a></li>
        <?php endforeach; ?>
        <li><a href="#publishing" data-toggle="tab"><?php echo JText::_('COM_CONTENT_PUBLISHING') ?></a></li>
        <li><a href="#language" data-toggle="tab"><?php echo JText::_('JFIELD_LANGUAGE_LABEL') ?></a></li>
        <li><a href="#metadata" data-toggle="tab"><?php echo JText::_('COM_CONTENT_METADATA') ?></a></li>
      </ul>​

Per nascondere ad esempio il tab Lingua, basta eliminare la riga

<li><a href="#language" data-toggle="tab"><?php echo JText::_('JFIELD_LANGUAGE_LABEL') ?></a></li>​

Altrimenti li possiamo eliminare tutti, in questo modo non ci saranno più tab.

Seguendo l'esempio di questo articolo Creating an Article in Joomla! Has Never Been This Easy! possiamo modificare il layout della pagina di creazione dell'articolo affinchè appaia in questo modo:



Questo il codice utilizzato per ottenere il layout:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_content
 *
 * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
 
defined('_JEXEC') or die;
 
JHtml::_('behavior.tabstate');
JHtml::_('behavior.keepalive');
JHtml::_('behavior.calendar');
JHtml::_('behavior.formvalidator');
JHtml::_('formbehavior.chosen', 'select');
 
// Create shortcut to parameters.
$params = $this->state->get('params');
 
// This checks if the editor config options have ever been saved. If they haven't they will fall back to the original settings.
$editoroptions = isset($params->show_publishing_options);
 
if (!$editoroptions)
{
  $params->show_urls_images_frontend = '0';
}
 
JFactory::getDocument()->addScriptDeclaration("
  Joomla.submitbutton = function(task)
  {
    if (task == 'article.cancel' || document.formvalidator.isValid(document.getElementById('adminForm')))
    {
      " . $this->form->getField('articletext')->save() . "
      Joomla.submitform(task);
    }
  }
");
?>
<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>
<div class="edit item-page<?php echo $this->pageclass_sfx; ?>">
  <?php if ($params->get('show_page_heading')) : ?>
  <div class="page-header">
    <h1>
      <?php echo $this->escape($params->get('page_heading')); ?>
    </h1>
  </div>
  <?php endif; ?>
 
  <form action="<?php echo JRoute::_('index.php?option=com_content&a_id=' . (int) $this->item->id); ?>" method="post" name="adminForm" id="adminForm" class="form-validate form-vertical">
 
    <fieldset>
    <div class="row-fluid">
      <div class="span8">
      <div class="tab-content">
        <div class="tab-pane active" id="editor">
          <?php echo $this->form->renderField('title'); ?>
 
          <?php echo $this->form->getInput('articletext'); ?>
        </div>
 
        <?php foreach ($this->form->getFieldsets('params') as $name => $fieldSet) : ?>
          <div class="tab-pane" id="params-<?php echo $name; ?>">
            <?php foreach ($this->form->getFieldset($name) as $field) : ?>
              <?php echo $field->renderField(); ?>
            <?php endforeach; ?>
          </div>
        <?php endforeach; ?>
        <div class="tab-pane" id="publishing">
          <?php echo $this->form->renderField('catid'); ?>
          <?php echo $this->form->renderField('tags'); ?>
          <?php if ($params->get('save_history', 0)) : ?>
            <?php echo $this->form->renderField('version_note'); ?>
          <?php endif; ?>
          <?php echo $this->form->renderField('created_by_alias'); ?>
          <?php if ($this->item->params->get('access-change')) : ?>
 
            <?php echo $this->form->renderField('featured'); ?>
            <?php echo $this->form->renderField('publish_up'); ?>
            <?php echo $this->form->renderField('publish_down'); ?>
          <?php endif; ?>
          <?php echo $this->form->renderField('access'); ?>
          <?php if (is_null($this->item->id)):?>
            <div class="control-group">
              <div class="control-label">
              </div>
              <div class="controls">
                <?php echo JText::_('COM_CONTENT_ORDERING'); ?>
              </div>
            </div>
          <?php endif; ?>
        </div>
        <div class="tab-pane" id="language">
          <?php echo $this->form->renderField('language'); ?>
        </div>
        </div>
      </div>
 
      <!-- Right column -->
        <div class="span4">
 
          <div class="well">
            <h3 class="page-header"><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS') ?></h3>
            <div class="btn-toolbar">
              <div class="btn-group">
                <button type="button" class="btn btn-primary" onclick="Joomla.submitbutton('article.save')">
                <span class="icon-ok"></span><?php echo JText::_('JSAVE') ?>
                </button>
              </div>
            <div class="btn-group">
              <button type="button" class="btn" onclick="Joomla.submitbutton('article.cancel')">
              <span class="icon-cancel"></span><?php echo JText::_('JCANCEL') ?>
              </button>
            </div>
          </div>
          </div>
          <div class="well">
            <h3 class="page-header"><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_IMAGE') ?></h3>
            <div class="control-group">
              <div class="controls">
              <?php echo $this->form->renderField('image_intro', 'images'); ?>
 
              </div>
            </div>
          </div>
          <div  style="visibility: hidden">
                  <?php echo $this->form->getInput('image_intro_alt', 'images'); ?>
                  <?php echo $this->form->getInput('image_intro_caption', 'images'); ?>
                  </div>
          <input type="hidden" name="task" value="" />
          <input type="hidden" name="return" value="<?php echo $this->return_page; ?>" />
 
        </div><!-- Right column -->
      </div>
      <?php echo JHtml::_('form.token'); ?>
    </fieldset>
  </form>
</div>
<script type="text/javascript">
  // Add title placeholder
  jQuery("#jform_title").attr("placeholder", "<?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER') ?>");
  // Transform title to alias while typing
  jQuery("#jform_title").keyup(function ()
  {
    var title = 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 ()
  {
    var replaceWith = jQuery('<input id="temp" name="temp" type="text"></input>');
    var connectWith = jQuery('#jform_alias');
    var elem = 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)
    {
      var regex = new RegExp("^[a-z0-9\-]+$");
      var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
      if (!regex.test(key))
      {
        event.preventDefault();
        return false;
      }
    });
  });
</script>

Questi gli override della lingua utilizzati:
OVERRIDE_COM_CONTENT_FORM_IMAGE="Inserisci un'immagine"
OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS="Pubblicazione"  
OVERRIDE_COM_CONTENT_FORM_READMOREDESC="<strong>Leggi tutto:</strong> utilizza il pulsante \"Leggi tutto\" per dividere l'articolo in testo introduttivo e testo esteso. Metti il cursore nella parte di articolo che vuoi dividere e clicca sul pulsante  \"Leggi tutto\" qui sopra."    
OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER="Inserisci il titolo dell'articolo"


In questo modo l'autore ha pochi e semplici campi da inserire. Per l'immagine abbiamo utilizzato l'immagine introduttiva, quindi se vogliamo che questa appaia anche nel testo esteso sarà necessario un override del template, che, in caso ci sia un'immagine introduttiva ma non quella per l'articolo esteso, vada a prendere quella introduttiva anche per il testo esteso.

Vediamo come....

Override degli articoli

Andiamo in Estensioni > Template > Lista template, selezioniamo il template e clicchiamo sul tab Crea override. Nella colonna Componenti clicchiamo su com_content e poi su article

Dopo questo codice
  <?php if (isset($images->image_fulltext) && !empty($images->image_fulltext)) : ?>
  <?php $imgfloat = (empty($images->float_fulltext)) ? $params->get('float_fulltext') : $images->float_fulltext; ?>
  <div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image"> <img
  <?php if ($images->image_fulltext_caption):
    echo 'class="caption"' . ' title="' . htmlspecialchars($images->image_fulltext_caption) . '"';
  endif; ?>
  src="<?php echo htmlspecialchars($images->image_fulltext); ?>" alt="<?php echo htmlspecialchars($images->image_fulltext_alt); ?>" itemprop="image"/> </div>
  <?php endif; ?>

Inseriamo il codice che richiama l'immagine introduttiva se quella del testo esteso non è presente:

  <?php if (empty($images->image_fulltext)) : ?>
  <?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
  <div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image"> <img
  <?php if ($images->image_intro_caption):
    echo 'class="caption"' . ' title="' . htmlspecialchars($images->image_intro_caption) . '"';
  endif; ?>
  src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" itemprop="image"/> </div>
  <?php endif; ?>


Ecco fatto, ora è tutto pronto per ricevere articoli dagli autori in tutta semplicità.

 

CommentaCommenta questo articolo sul forum




Ultima versione di Joomla!®

downloadVer. 3.6.5 Stabile Italiana
Data di rilascio:14 Dicembre 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: