Author:
Immagini con dimensioni differenti tra categoria blog ed articolo completo in joomla
Immagini categoria blog e pagina articolo completo di Joomla! con dimensioni differenti
Extrowebsite Logo

Chi gestisce un sito Joomla! potrebbe avere la necessità di presentare l'immagine della intro, categoria blog, e dell'articolo completo, con due diverse dimensioni.
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 descritto nell'introduzione, 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:

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

  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!
Inserimento 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.