Supporto volontario e collaborativo per Joomla!® in italiano

Categoria blog con testo introduttivo automatico e layout alternativo

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Il testo introduttivo è un elemento importante per i blog, in quanto dà una prima impressione sull'articolo. Nella maggior parte dei casi il testo introduttivo è composto dai primi due o tre paragrafi dell'articolo.

Il problema è che quando c'è un gran numero di articoli da pubblicare, inserire il "Leggi tutto" rallenta le operazioni e sarebbe meglio che tutti i testi introduttivi avessero lo stesso numero di linee per avere un aspetto più gradevole della pagina Categoria blog.

In questo articolo proponiamo una soluzione che creerà automaticamente il testo introduttivo limitando il testo principale ad uno specifico numero di caratteri, dando anche qualche idea su come rendere migliore l'aspetto del blog.


Come fare?

Utilizzeremo Protostar, il template standard di Joomla, per creare un layout Blog con testo introduttivo automatico.

I passaggi per crearlo sono i seguenti:

A. Creare un Layout alternativo del Blog con l'override del “Menu Item Type”
B. Cambiare il codice nei file dell'override
C. Creare un campo per controllare il numero di caratteri attraverso i parametri del Template
D. Creare una voce di menu che sarà collegata al nostro nuovo layout Blog
E. Creare un nuovo file css per migliorare l'aspetto del blog

NOTA: Questo articolo propone la modifica del file “templateDetails.xml”, perciò al prossimo aggiornamento di Joomla le modifiche al template predefinito Protostar andrebbero perse. Consiglio di creare una copia del template Protostar andando in Estensioni > Template > Lista template. Clicchiamo su Protostar Dettagli e File e con il pulsante Copia template creiamo una copia del template.

A. Creiamo un layout alternativo del Blog


1. Copiamo i file della categoria blog dalla cartella di Joomla, ../components/com_content/views/category/tmpl/

Copiare questi file:

    blog.php
    blog.xml
    blog_item.php
    blog_links.php
    blog_children.php

2. Incollare i files in questa cartella (creala se non c'è):
../templates/protostar/html/com_content/category/

e rinominali in:

    autoblog.php
    autoblog.xml
    autoblog_item.php
    autoblog_links.php
    autoblog_children.php

B. Cambiamo il codice dei file del layout alternativo


Cambieremo del codice nei file autoblog_item.php e autoblog.xml.

Modifiche a autoblog_item.php

1. Nella linea #12 aggiungiamo queste linee per avere accesso ai parametri del template:

// Getting template parameters
$app = JFactory::getApplication('site');
$template = $app->getTemplate(true);


2. Nella linea #54 cerchiamo questo codice:

<?php echo $this->item->introtext; ?>


e sostituiamolo con questo:

<div class="myIntrotext">
<?php echo JHtml::_('string.truncate', strip_tags($this->item->introtext), $template->params->get('charactersNumber', 200));?>
</div>


Il codice sopra restituirà il testo introduttivo facendo questo:
- pulisce il codice da qualsiasi tag
- limita i caratteri del testo principale in base al parametro del template che creeremo nel prossimo passaggio (C) o se non c'è nessun valore, di dafault limita a 200 caratteri
- finisce il testo con una parola
- aggiunge i puntini "..." dopo l'ultima parola


3. Alla linea #65 cerchiamo questo codice:

<?php if ($params->get('show_readmore') && $this->item->readmore) :

e sostituiamolo con questo:

<?php if ($params->get('show_readmore')) :

Questo forzerà il blog a mostrare il "Leggi tutto" collegato alla pagina dell'articolo.

4. per abbellire la pagina, spostiamo la linea #44 che mostra l'immagine introduttiva dell'articolo:

<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

e spostiamola alla linea #25

<!-- image moved here -->
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
<!-- // image moved here -->

Salviamo il file autoblog_item.php e andiamo avanti...





Modifiche ad autoblog.xml



Cambiamo il codice dalla linea #3 alla #8:

Codice attuale:
<layout title="COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" />
<message>
<![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>
</message>
</layout>​
 


cambiamo in:

<layout title="Categoria blog con testo introduttivo automatico" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" />
<message>
<![CDATA[Visualizza gli articoli con un testo introduttivo automatico limitando il testo esteso, con un layout a colonna singola o multipla.]]>
</message>
</layout>

In questo modo abbiamo creato un nuovo tipo di voce di menu che potrà essere scelto quando creeremo la voce di menu collegata al nuovo layout del blog.

Salviamo autoblog.xml e andiamo avanti...


C. Creiamo un campo per controllare il numero di caratteri dai parametri del Template


Creiamo un nuovo campo per controllare il numero di caratteri, così sarà facile cambiarlo attraverso i parametri del Template in amministrazione.

Apriamo il file ../templates/protostar/templateDetails.xml e prima della fine del fieldset aggiungiamo un nuovo field

<config>
<fields name="params">
<fieldset name="advanced">




<field name="charactersNumber"
label="Numero caratteri testo introduttivo Blog"
description="Inserisci il numero massimo di caratteri del testo esteso che verranno utilizzati per il testo introduttivo"
type="number"
default="200" />
</fieldset>
</fields>
</config>

Salviamo e andiamo in amministrazione Estensioni > Template e scegliamo Protostar. Andiamo nel tab Avanzate troveremo il parametro che abbiamo aggiunto: Numero caratteri testo introduttivo Blog

In questo modo possiamo inserire il numero di caratteri di testo che creeranno il testo introduttivo.

All'interno del codice avevamo inserito come valore predefinito "200" (passaggio B.2) che viene preso nel caso non ci siano valori nel parametro.

D. Creiamo una voce di menu collegata al layout blog personalizzato


Creiamo la voce di menu:

1. Scegliamo il menu e creiamo una nuova voce di menu
2. Inseriamo un titolo, esempio Autoblog
3. Come Tipo di voce di menu scegliamo Articoli e poi "Categoria blog con testo introduttivo automatico" (come indicato nel passaggio B in autoblog.xml)




4. Selezionala
5. Scegli una categoria
6. Clicca sul tab Visualizzazione pagina e nel parametro Classe pagina scrivi "myAutoBlog" (NOTA lascia uno spazio prima della parola myAutoBlog) Perchè questo? Per fare poi delle modifiche specifiche alla pagina con il nostro css e che avranno effetto solo su questa pagina. Questo significa che se selezioni un'altra voce di menu blog, questa non verrà modificata.
7. Salva




Ora andiamo in frontend, selezioniamo la voce di menu che abbiamo creato e vediamo il risultato. Avremo una pagina blog con testo introduttivo automatico per tutti gli articoli.

ATTENZIONE: con questa modifica le immagini del testo introduttivo devono essere inserite attraverso il tab Immagini e link, quelle inserite direttamente nel testo non saranno visibili, in quanto per tagliare i caratteri del testo introduttivo vengono eliminati eventuali tag presenti.
Ricordiamoci di attivare in Articoli > Opzioni >Layout modifica il parametro  Immagini e Link lato pubblico, in questo modo sarà possibile inserire le immagini introduttive anche da frontend.

Lo stesso vale per altri tag presenti nel testo introduttivo, con questo override non funzioneranno.

Andiamo ora a modificarne l'aspetto.

E. Creiamo un nuovo file css per cambiare il look


Nella cartella ../templates/protostar/css/ creiamo un nuovo file chiamato user.css Il template Protostar di default guarda se esiste questo specifico file.
Qui sotto c'è il codice da inserire nel file

/* .myautoblog is for specificity purposes so only in the blog page */
/* with this page class you will have the changes below */

/* margin from images */
.blog.myAutoBlog .pull-left.item-image {
margin: 0 0 10px 0;
}

/* remove the word "Details" above article details - I just do not like it there! */
.blog.myAutoBlog .article-info-term {
display: none;
}

/* Use of the flexbox to make items have same high */
.blog.myAutoBlog .items-row {
display:flex;
}

/* give some color to items and other ... */
.blog.myAutoBlog .items-row [class*="span"] {
background:#eee;
margin-bottom: 15px;
padding:0 0px 50px 0px;
position:relative;
}

/* a different color to leading item and other ... */
.blog.myAutoBlog .items-leading [class*="leading-"] {
background:#ddd;
margin-bottom: 15px;
padding:0px 0px 50px 0px;
position:relative;
}

/* force items read more button to be always at the bottom right */
.blog.myAutoBlog .readmore {
position: absolute;
right: 10px;
bottom: 0px;
}

/* minor changes, that you can change easy later */
.blog.myAutoBlog h2, .blog.myAutoBlog .page-header {
margin: 0 0 5px 0;
padding: 0 5px 3px;
}

.blog.myAutoBlog .page-header {
border-bottom: 0px solid #fff;
background: #0088CC;
}
.blog.myAutoBlog .page-header a{
color:#fff;
font-weight: normal;
}
.blog.myAutoBlog .icons {
padding: 0 10px;
}
.blog.myAutoBlog .myIntrotext {
padding: 0 10px;
}

@media (max-width: 767px) {
/* removes flex and allow items to stack on mobiles */
.blog.myAutoBlog .items-row {
display: block;
}
}

E questo è il risultato finale:



Conclusione:

Con la creazione del blog con testo introduttivo automatico, abbiamo cercato di risolvere un problema di pubblicazione di routine, ma soprattutto abbiamo assaggiato la potenza e la flessibilità di Joomla.

Override di template, classi di pagine, parametri del template, poche righe di codice ed un css personalizzato sono gli strumenti utilizzati per creare un blog totalmente diverso.

Ultima cosa e la più importante, è che al prossimo aggiornamento il tuo sito rimarrà intatto come l'hai modificato.



Traduzione dell'articolo del magazine di Joomla.org: Blog category view with auto created introtext and new look

 

CommentaCommenta questo articolo sul forum


Ultima versione di Joomla!®

downloadVer. 3.7.2 Stabile Italiana
Data di rilascio: 23 Maggio 2017
(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: