Aggiungere immagini al modulo Articoli - I più letti

Proviamo un altro esercizio di override del template, modificando il layout del modulo Articoli - I più letti. Normalmente il modulo presenta gli articoli in una semplice lista puntata, vediamo come visualizzarli invece con le loro immagini introduttive se sono presenti...

Prima di tutto creiamo un modulo Articoli - I più letti nel nostro sito e pubblichiamolo in una delle posizioni modulo che sono a disposizione.
Creiamo anche degli articoli impostando un'Immagine introduzione nel tab Immagini e link.
Questo è il layout del modulo predefinito di Joomla utilizzando il template Protostar:


Creazione dell'override del template

Andiamo in Estensioni > Template > Lista template e clicchiamo su Protostar Dettagli e File (o il proprio template predefinito se diverso), andiamo su Crea override e clicchiamo su mod_articles_popular:



Automaticamente Joomla crea il file di override del template che potrete trovare nella cartella templates/protostar/html/mod_articles_popular/ oppure lo potete modificare direttamente dal pannello di controllo cliccando sul tab Editor:



Ora possiamo modificare il codice, sostituendo il codice dopo

defined('_JEXEC') or die;
?>

con

<div class="row-fluid mostread <?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
 
      <?php $images = json_decode($item->images); ?>
 
    <div class="span4">
      
      <?php if( $images->image_intro ) : ?>
          <img src="/<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
      <?php endif; ?>
      
        <a href="/<?php echo $item->link; ?>">
            <?php echo $item->title; ?></a>
    </div>
 
<?php endforeach; ?>
</div>



Salviamo.

La classe row-fluid fa parte di Bootstrap 2:

<div class="row-fluid mostread <?php echo $moduleclass_sfx; ?>">

Nell'esempio è stata utilizzata la classe span4 (sempre di Bootstrap) per visualizzare 3 articoli per riga:

<div class="span4">

Potete utilizzare le classi del vostro template, molte utilizzano Bootstrap 2 o 3.

Il risultato dopo l'applicazione dell'override è il seguente:



Se spostiamo il modulo in una posizione più ampia, appare così:



Per ottenere un effetto visivo migliore sarebbe meglio avere immagini con le stesse dimensioni.


Articolo tratto da:
https://www.ostraining.com/blog/joomla/most-read-intro-images/

 

Commenta questo articolo sul forum