Chi gestisce un sito web Joomla! potrebbe avere l'esigenza di presentare, nella categoria blog, l'immagine introduttiva e quella dell'articolo completo con dimensioni differenti.
L'articolo odierno mostra come raggiungere tale risultato, facendo notare come il tutto lo si ottiene con una sola immagine anzichè due.
La prova è stata fatta con una versione di Joomla 3.9.1.
Per fare quanto appena scritto, si deve procedere con l'override di due files del core di Joomla!:
- intro_image.php
- full_image.php
Come si evince dai nomi dei due files interessati, questi si occupano di mostrare le immagini, se presenti, dell'introduzione e dell'articolo completo.
Step 1: Override dei files del core di Joomla!
I suddetti files sono raggiungibili al seguente percorso:
Directory-installazione-Joomla/layouts/joomla/content
Si può ottenere l'override in due modi:
- dall'area amministrativa di Joomla!
- trasferire i files manualmente con un programma FTP
Entrambi i sistemi sono validi.
Sia che si proceda attraverso l'override di Joomla!, sia che il trasferimento lo si effettui con un programma FTP, la nuova destinazione deve essere:
Directory-installazione-Joomla/templates/Nome-Template-in-uso/html/layouts/joomla/content
In questo modo possiamo apportare tutte le modifiche che vogliamo, senza andare ad inficiare i files originali del core di Joomla!
Step 2: apportare modifiche ai files intro_image.php e full_image.php
Supponiamo che le dimensioni delle immagini saranno:
- 800px / 380px per l'immagine della intro in visualizzazione blog
- 900px / 400px per l'immagine dell'articolo completo
Una volta che i due files si trovano nella cartella content, trasferirli sul desktop.
Impostare le dimensioni per il file intro_image.php
Aprire il suddetto file con un editor di testo. Notare, all'inizio della pagina, il codice:
defined('JPATH_BASE') or die;
$params = $displayData->params;
Immediatamente sotto scrivere:
$width = 780; $height = 380;
Non abbiamo fatto altro che dichiarare le dimensioni per larghezza ed altezza in due variabili, distinte e separate.
Scorrere il file ed individuare il codice itemprop="thumbnailUrl".
Dopo aver dato uno spazio, scrivere:
width="<?php echo $width ?>" height="<?php echo $height ?>"
Cosa è stato fatto? Con la dichiarazione di queste due variabili, sono state impostate le dimensioni per tutte le immagini degli articoli introduttivi della pagina in vista blog.
Nel caso in cui le volessimo più grandi o più piccole, è sufficiente modifificare le dimensioni.
Salvare il file e portarlo sul server, nella cartella del template che si sta utilizzando.
Impostare le dimensioni per il file full_image.php
Stessa ed identica cosa va fatta con il file full_image.php.
Aprirlo con l'editor ed impostare le variabili; questa volta a 900px / 400px.
Di conseguenza avremo:
$width = 900; $height = 400;
Individuare lo snippet di codice itemprop="image" e scrivere:
width="<?php echo $width ?>" height="<?php echo $height ?>"
Salvare e portare il file sul server, sempre nella cartella content.
Step 3: Inserire le immagini in un articolo di Joomla!
Il passaggio successivo, per vedere se il tutto è stato fatto in maniera corretta, prevede la scrittura di un articolo appartenente alla categoria blog.
Si modifichi un articolo esistente, o se ne crei uno da zero.
Con il tab "Contenuto" attivo, scriviamo il testo di introduzione. Inseriamo il "Leggi tutto" ed al di sotto di esso, il resto del testo che leggeremo come articolo completo.
Portarsi nel tab "Immagini e link".
Notare a sinistra il riquadro diviso in due parti:
- Immagine introduzione
- Immagine articolo esteso
Premendo il pulsante "Seleziona", scegliamo quella che vogliamo mostrare nell'articolo.
Questo passaggio è descritto nell'immagine seguente:
Salvare e chiudere la scrittura dell'articolo ed aggiornare la pagina del front-end in cui è presente la vista blog.
Notare la differenza delle dimensioni tra l'immagine introduttiva e quella dell'articolo completo.