[Tutorial] Ampliar imagen de portada de categorías o sub-categorías [PS 1.7]

Existen muchas preguntas en el foro acerca de este tema, como es sencillo y teniendo en cuenta que existen diferencias en las rutas de los ficheros y en las líneas de código en esta versión de Prestashop respecto a versiones anteriores, lo explicare detalladamente.

Te muestro a continuación lo que se quiere lograr.
Imagen de portada de las categorias de una tienda prestashop


Para ampliar la imagen de portada categorías o subcategorias en Prestashop 1.7 y suponiendo que estemos trabajando con la plantilla por defecto, lo primero que debes hacer es ingresar al panel de administración de tu tienda online:

https://ejemplo.com/adminabc

Tener en cuenta, que «ejemplo.com» es el nombre de dominio de tu tienda y «abc» es el identificador generado por prestashop al momento de instalar.
Puede que toda la ruta después del nombre de dominio adminabc«) sea diferente, porque fue editada con anterioridad, en este caso debe ingresar en nombre el cual ingresó.

 

1.- Ajustes de tamaño de las imágenes

Debemos dirigirnos al bloque PERSONALIZAR (en el menú del lado izquierdo) y ingresar a la sección Diseño » Ajustes de imágenes en el bloque «Ajustes de imágenes» y aquí elegiremos en este caso «category_default» (click en Modificar).

ajustes-de-imagenes-en-una-tienda-prestashop


 

2.- Editar el tamaño de las imágenes próximas a subir en las portadas de las categorías

En este apartado de edición, lograremos modificar el tamaño de las imágenes que carguemos  próximamente en las portadas de las categorías , es decir que las imágenes que ya se encuentran en los archivos del sistema no se modificarán, pero tranquilos que más adelante lograremos modificar las que ya existen.

Nuestros tamaños de anchura y altura serán 760 x 200 respectivamente ya que los valores se encuentra por defecto en pixeles, y luego click en guardar como se muestra en la siguiente imagen.

editar-category-default-en-prestashop


En este momento ya se configuro el tamaño de las imágenes de portada de las categorías y solo queda modificar las existentes o las que fueron subidas antes de la modificación.

 

3.- Regenerar el tamaño de las imágenes en las portadas de las categorías

En en mismo apartado de PERSONALIZAR (en el menú del lado izquierdo) en la sección Diseño » Ajustes de imágenes debemos hacer scroll hacia abajo y buscar el bloque «Regenerar miniatura».
Existen varias opciones, pero la elección conveniente de este tutorial ya que existen para muchas configuraciones adiciones la detallaremos a continuación :

a) Seleccionar imagen : Categorías
b) Seleccionar formato : category_default
c) Eliminar las imágenes anteriores : Sí

Esta selección realizará el trabajo automático y eliminará las imágenes anteriores si este fuese el caso en la elección «Si», por ende solo que darle click en Regenerar miniaturas.
Este acción, procesa una gran cantidad de información la cual tomará un tiempo determinado si su tienda cuenta con miles de imágenes en las portadas de las categorías, de lo contrario procesará de inmediato y dependerá mucho de la capacidad de su servidor.

regenerar-miniaturas-en-prestashop

Recordar que se realizaron los pasos anteriores tienes que limpiar la cache en la pestaña Parámetros Avanzados -> Rendimiento para que se apliquen los cambios visuales en la web (Debido al sistema de cache que de seguro lo tienes activo para un mejor rendimiento en velocidad).

El resultado en la web es el siguiente :
resultado-imagen-portada-categorias-en-prestashop

 

4.- Modificar el tamaño por defecto de la imagen de portada de las categorías en los archivos de la plantilla de Prestashop 1.7

Para modificar los tamaños de portada de la categorías en Prestashop 1.7 y suponiendo que estemos trabajando con la plantilla por defecto, debemos editar el fichero:

Si te encuentras dentro de estas versiones :
1.7.0.x1.7.1.x1.7.2.x1.7.3.x1.7.4.x
La ruta a editar del fichero es la siguiente :
/themes/classic/templates/catalog/listing/category.tpl

o

Si te encuentras dentro de estas versiones :
1.7.5.x1.7.6.x1.7.7.x
La ruta a editar del fichero es la siguiente :
/themes/classic/templates/catalog/_partials/category-header.tpl
Tener en cuenta, que si tu plantilla no es la que lleva Prestashop por defecto, no estaremos hablando de la carpeta «classic«, sino de la carpeta de tu plantilla instalada.
 
Ahora dentro del archivo encontramos el siguiente bloque:

<div class="block-category-inner">
     {if $category.description}
         <div id="category-description" class="text-muted">{$category.description nofilter}</div>
     {/if}
     {if $category.image.large.url}
         <div class="category-cover">
              <img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}">
         </div>
     {/if}
</div>

 
Y solo debemos realizar una pequeña modificación en :

<div class="block-category-inner"</span>

 
Eliminamos la clase block-category-inner y lo dejamos así:

<div>
     {if $category.description}
         <div id="category-description" class="text-muted">{$category.description nofilter}</div>
     {/if}
     {if $category.image.large.url}
         <div class="category-cover">
              <img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}">
         </div>
      {/if}
</div>

 
 
Por último, recordar que tenemos que limpiar la cache en la pestaña Parámetros Avanzados -> Rendimiento para que se apliquen los cambios por el sistema de cache ya mencionado.

El resultado final será el siguiente y habremos acabado:
Imagen de portada de las categorias de una tienda prestashop
 

 
¿Con qué versiones de Prestashop es compatible?
Este tutorial es compatible con las siguientes versiones de Prestashop:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *