Ottimizzare i layout dei blog Joomla: utilizzare immagini a schermo intero per gli articoli principali.

Per impostazione predefinita, il layout delle categorie del blog di Joomla utilizza ovunque l’immagine introduttiva. Si tratta di una scelta sensata, ma significa anche che spesso l’articolo più importante non si distingue dagli altri.

In questo articolo illustrerò un metodo semplice e sicuro in caso di aggiornamenti per far sì che gli articoli in primo piano utilizzino invece l’immagine completa dell’articolo, lasciando invariati l’introduzione e gli elementi collegati.

Perché cambiare l’immagine dell’articolo in primo piano?

Gli articoli in primo piano esistono per un motivo. Hanno lo scopo di attirare l’attenzione, definire il contesto e incoraggiare i lettori a continuare a leggere.

• Crea una chiara gerarchia visiva
• Fa risaltare i contenuti in primo piano
• Incoraggia una scelta migliore delle immagini per gli articoli chiave
• Migliora l’equilibrio complessivo del layout del blog

Ma soprattutto, ciò può essere fatto senza modificare i file di base.

L’approccio

Anziché modificare l’output predefinito di Joomla, utilizziamo un override del template e una piccola modifica al layout:

1. Creare (o riutilizzare) un override della categoria blog
2. Creare un layout dedicato per gli articoli in primo piano
3. Sostituire l’immagine introduttiva con l’immagine completa in quel layout
4. Indicare al blog di caricare il nuovo layout per gli articoli in primo piano

In questo modo tutto rimane pulito, leggibile e al sicuro in caso di aggiornamenti.

Passo 1: Creare un override della categoria blog

Se il vostro template dispone già di un override della categoria blog, potete saltare questo passaggio.

Dall’amministrazione di Joomla:

• Vai su Sistema → Modelli del sito
• Seleziona il tuo template attivo
• Apri Crea sostituzioni
• Espandi Componenti → com_content
• Fai clic su categoria

Joomla creerà i file necessari in:

/templates/your_template/html/com_content/category/

Passaggio 2: Creare un layout per gli articoli in primo piano

Il layout standard del blog utilizza blog_item.php per la visualizzazione degli articoli. Lo riutilizzeremo come punto di partenza per gli articoli in primo piano.

Aprire la cartella di sovrascrittura:

/templates/your_template/html/com_content/category/

Quindi:

• Crea un nuovo file denominato blog_leading.php
• Copia il contenuto di blog_item.php in blog_leading.php

Passaggio 3: Passare dall’immagine introduttiva all’immagine a schermo intero

Questa è la modifica fondamentale.

Apri blog_leading.php e individua la riga relativa al rendering dell’immagine:

<?php echo LayoutHelper::render(‘joomla.content.intro_image’, $this->item); ?>

Sostituiscila con:

<?php echo LayoutHelper::render(‘joomla.content.full_image’, $this->item); ?>

Questo indica a Joomla di visualizzare l’immagine completa dell’articolo per gli articoli in primo piano.

Passaggio 4: Caricare il nuovo layout in primo piano

Il passaggio finale consiste nell’indicare al layout del blog di utilizzare blog_leading.php per gli articoli in primo piano.

Aprire:

/templates/your_template/html/com_content/category/blog.php

Trova la sezione che inizia con:

<?php if (!empty($this->lead_items)) : ?>

All’interno di quel blocco, modifica:

echo $this->loadTemplate(‘item’);

in:

echo $this->loadTemplate(‘leading’);

Il risultato

• Gli articoli in primo piano mostrano l’immagine completa dell’articolo
• L’introduzione e gli articoli collegati continuano a utilizzare le immagini di introduzione
• Il layout rimane completamente a prova di aggiornamenti

Si tratta di una piccola modifica, ma che migliora significativamente la presentazione dei contenuti.

Considerazioni finali

Il punto di forza di Joomla risiede nella sua flessibilità. Comprendendo come sono assemblati i layout, è possibile apportare miglioramenti mirati che elevano l’esperienza complessiva del sito.

Trattare gli articoli in primo piano come contenuti di prima classe è una modifica semplice, ma invia un messaggio chiaro ai lettori: questo merita la vostra attenzione.