Prestashop 1.7: immagine di copertina alle pagine CMS

Le pagine CMS di Prestashop

Se utilizzi le pagine CMS di Prestashop come collezione di articoli su argomenti vari oppure vuoi solo rendere più accattivanti graficamente queste pagine, puoi pensare di aggiungere un’immagine di copertina per ciascuna pagina.

Ciascuna immagine verrà visualizzata nella categoria che raggruppa le proprie pagine e nelle singole pagine.

Immagini di copertina alle pagine senza moduli, override e modifiche al database

Di seguito le indicazioni su per aggiungere poche righe di codice in 2 file del template del tuo ecommerce.

Immagini nell’archivio pagine CMS (categoria)

1. Aprire il file category.tpl contenuto nella cartella /themes/classic/templates/cms/ con un Text Editor come Notepad++
2. Modificare il codice:
   

   {foreach from=$cms_pages item=cms_page}
     <li><a href="{$cms_page.link}">{$cms_page.meta_title}</a></li>
   {/foreach}
   

3. con il seguente codice:
   

   {foreach from=$cms_pages item=cms_page}
     <li>
       <a href="{$cms_page.link}" title="{$cms_page.meta_title}">
         <img class="img-fluid" src="{$urls.img_ps_url}cms/{$cms_page.id_cms}.jpg" alt="">
       </a>
       <a href="{$cms_page.link}">
         {$cms_page.meta_title}
       </a>
     </li>
   {/foreach}
   

4. Salvare il file

Il codice originario visualizza la lista di tutte le pagine appartenenti alla stessa categoria tramite il ciclo “foreach”.
Per ogni pagina viene visualizzato il titolo che funge anche da link per accedere al dettaglio della pagina stessa.

Il codice modificato, oltre a fare quanto scritto in precedenza, visualizza un’immagine per ciascuna pagina a patto che:

1. Ogni immagine abbia come nome del file il valore dell’ID della pagina a cui vogliamo associarla (esempio: 7.jpg).
2. Ogni immagine sia stata caricata nella cartella /img/cms/ della tua installazione Prestashop.

Immagine in ciascuna pagina CMS

1. Aprire il file page.tpl contenuto nella cartella /themes/classic/template/cms/ con un Text Editor come Notepad++
2. Appena dopo il codice:
   

   {block name='cms_content'}
   

3. aggiungere il seguente codice:
   

   <img class="img-fluid" src="{$urls.img_ps_url}cms/{$cms.id}.png" alt="">
   

4. Salvare il file.

Il codice appena modificato mostrerà l’immagine di copertina della pagina appena sotto il titolo a patto che:

1. Ogni immagine abbia come nome del file il valore dell’ID della pagina a cui vogliamo associarla (esempio: 7.jpg).
2. Ogni immagine sia stata caricata nella cartella /img/cms/ della tua installazione Prestashop.

Conoscere il valore ID di ciascuna pagina

Il valore ID di ciascuna pagina si ricava in 2 modi:

• dalla pagina categoria delle pagine, puoi portare il mouse sopra il titolo di una pagina: il browser ti mostrerà il percorso alla pagina (URL), percorso che conterrà anche il suo ID;
• dalla sezione Migliora > Design > Pagine che visualizza la lista delle pagine CMS del tuo ecommerce Prestashop.

Misure delle immagini di copertina

La misura in pixel della larghezza ed altezza delle immagini di copertina dipende dal tema utilizzato e dal design che vorrai dare alle tue pagine.

Entrambi i codici modificati utilizzano la classe img-fluid (class=”img-fluid”) in ogni tag immagine: questa classe garantisce che le immagini saranno sempre responsive, adattandosi allo spazio disponibile in base alla risoluzione del dispositivo utilizzata dall’utente.

Consigliamo di eseguire alcune prove per valutare la giusta dimesione delle immagini e di utilizzare la stessa misura per tutte le immagini di copertina delle pagine CMS di Prestashop.