Intro image ed articolo esteso di Joomla! con dimensioni diverse

Immagine intro ed articolo esteso di Joomla! con dimensioni diverse
Immagine intro ed articolo esteso di Joomla! con dimensioni diverse

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!:

  1. intro_image.php
  2. 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:

  1. dall'area amministrativa di Joomla!
  2. 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:

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:

  1. Immagine introduzione
  2. Immagine articolo esteso

Premendo il pulsante "Seleziona", scegliamo quella che vogliamo mostrare nell'articolo.

Questo passaggio è descritto nell'immagine seguente:

Inserire immagini in articolo categoria blog di Joomla!

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.