Prestashop 1.7: add a cover image to CMS pages

If you use Prestashop CMS pages as a collection of articles about various topics or you just want to make these pages more graphically appealing, you can think of adding a cover image for each page.

Each image will be displayed in the category that groups these pages and on every CMS page.

Cover images for pages without using modules, overrides and database changes

Here are the instructions to add a few lines of code in 2 files of your ecommerce template.

Images in the CMS page archive (category)

1. Open category.tpl inside the folder /themes/classic/templates/cms/ with a Text Editor like Notepad++
2. Replace this code:
   

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

3. with:
   

   {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. Save the file

The original code displays the list of all the pages belonging to the same category via the “foreach” cycle. For each page the title is displayed which also acts as a link to access the page detail.

The modified code, in addition to doing what previously written, displays an image for each page provided that:

1. Each image has as file name the value of the ID of the page to which we want to associate (example: 7.jpg).
2. Each image has been uploaded to the folder /img/cms/ of your ecommerce Prestashop.

Image on each CMS page

1. Open page.tpl inside the folder /themes/classic/templates/cms/ with a Text Editor like Notepad++
2. Just after this code:
   

   {block name='cms_content'}
   

3. add:
   

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

4. Save the file

The code just modified will show the cover image of the page just below the title provided that:

1. Each image has as file name the value of the ID of the page to which we want to associate (example: 7.jpg).
2. Each image has been uploaded to the folder /img/cms/ of your ecommerce Prestashop.

Knowing the ID value of each page

The ID value of each page can be obtained in 2 ways:

• from the page category, you can move the mouse over a page title: the browser will show you the path to the page (URL), path that will also contain its ID;
• from the section Improve > Design > Pages which displays the list of CMS pages of your Prestashop ecommerce with their IDs

Cover image width and height

Width and height of your cover images depend on the theme used and the design you want to give to your pages.

Both modified codes use the img-fluid class (class=”img-fluid”) in each image tag: this class ensures that images will always be responsive, adapting to the available space based on the resolution of the device used by the user.

We recommend to perform some tests to decide the right image size and to use the same measurement for all the cover images of Prestashop CMS pages.