En que formato subo el logo a prestashop

Logotipo de Prestashop svg

¿Conoces bien el logotipo de? ¿Cómo personalizarlo y sustituir el que viene por defecto en la plantilla actual por otro? He recopilado en este artículo todo sobre ello en una tienda online realizada con la plataforma de comercio electrónico PrestaShop.

Si no eliminas o cambias el predeterminado desde el Panel de Administración, aparecerá en el tema por defecto. En caso de que utilice una plantilla de pago en lugar de una plantilla por defecto, todavía tiene que cambiar la imagen porque el archivo por defecto está hecho por el autor del tema y se mostrará en su tienda.

Se muestra en todas las páginas de la portada de tu tienda (incluido el logotipo de la cabecera). El logotipo de la página de inicio se muestra como una pequeña imagen en la columna izquierda, la cabecera o el pie de página de tu tienda online. Contiene un enlace que salta al sitio web oficial de PrestaShop (es un software de comercio electrónico de código abierto - ¿lo recuerda?).

Es la abreviatura de icono de favoritos. Un favicon suele ser un gráfico cuadrado de 16 × 16 píxeles y se guarda como favicon.ico en el directorio raíz del servidor. Se muestra a la izquierda de la barra de direcciones de tu navegador (la barra de direcciones de Chrome y Opera ya no muestra el icono).

Tipos de imágenes php

Por ahora no vamos a permitir .svg para el logotipo de correo electrónico porque sólo el 50% de los servicios de mensajería electrónica lo soportan y no para el PDF porque el sistema que utilizamos actualmente para generar PDF no lo soporta

Esto es muy interesante: SVG es un formato gráfico vectorial, por lo que es muy, muy ligero y se escala perfectamente en todas las pantallas, incluidas las de alta DPI. Como es compatible con todos los navegadores, la mayoría de los CMS ya lo aceptan hoy en día.

Además, si existe el objetivo de permitir .svg en todas partes: en lugar de intentar generar una miniatura, sería mejor utilizar el archivo para todos los tamaños. Quiero decir, cuando una imagen es un .svg, no hay necesidad de crear una miniatura por lo que tal vez debería ser manejado de una manera diferente en el código.

Creo que no tiene sentido permitir el soporte de este formato sólo para el logotipo de la tienda, deberíamos ser capaces de manejarlo en todas partes en el software. De lo contrario, podría ser frustrante para los usuarios. @matks, ¿cómo de complicado sería técnicamente?

Ya utilizo un archivo svg para el logotipo del sitio web en al menos uno de mis sitios web. Es posible crear un archivo svg con el buen tamaño o proporción, en la configuración del documento, antes de guardar. Así que es posible respetar la recomendación de un tema, incluso con .svg. O, tal vez no entiendo y no estamos hablando de la misma cosa.

Logotipo de Magento

Como se mencionó en el artículo anterior sobre plantillas gratuitas para PrestaShop , la plantilla Classic aún no soporta el atributo Srcset de HTML 5 y en consecuencia no permite ofrecer imágenes de alta resolución a dispositivos retina. En el caso del WebP existen varios módulos para PrestaShop, con la nueva versión 8, seguirá existiendo soporte nativo para este formato de imagen. Prestashop presenta el elemento "Generar imágenes de alta resolución" en el back-end que se puede activar en: Diseño> Ajustes de imagen .

Veamos el siguiente ejemplo, los dos primeros logos aparecen idénticos en dispositivos sin alta definición y el tercero, dependiendo de la calidad del monitor, aparecerá más marcado o más pixelado, en las pantallas Retina el logo del centro aparecerá granulado y borroso, el de la izquierda y derecha aparecerán correctos.

Al final del artículo explico cómo simular una pantalla retina en un monitor normal. Sin embargo, puede ver el ejemplo anterior con un zoom del 200% y verá que el logotipo del centro aparecerá borroso, mientras que el de la derecha estará bien definido. El logotipo optimizado de 290 píxeles tiene un peso de 9,6 kb (5Kb en formato WebP calidad 90%), mientras que el logotipo de 580 píxeles pesa 29kb (13,7kb en formato WebP calidad 90%). Una diferencia que puede parecer insignificante, pero que no gustará a las métricas vitales de la web. Sin embargo, estamos hablando de una imagen pequeña con pocos colores y ya optimizada para la web, en el caso de una diapositiva la diferencia entre una imagen de 1920 pixeles y una de 3840 pixeles, es muy grande. Si estamos hablando de un ecommerce y de las miniaturas de las imágenes de los productos de la categoría, utilizar imágenes más grandes de lo necesario nos penalizará y no poco. Por eso con HTML 5 se introdujo el atributo srcset.

Logotipo de Wix

Prestashop sólo permite el uso de una imagen como miniatura de la categoría por defecto, creando así problemas en tener diferentes formatos para las imágenes de subcategorías en la vista de lista de productos. En este tutorial vamos a añadir una imagen secundaria a las categorías de prestashop, para aumentar la flexibilidad en la visualización de las miniaturas cuando se muestran como subcategorías.

Antes de empezar, vale la pena notar este tutorial implica un buen montón de modificaciones y anulaciones, y por lo tanto se recomienda que usted tiene un sólido conocimiento de php antes de hacer nada. Como siempre, consulte la documentación oficial de Prestashop sobre Overrides si eres nuevo en el tema. Dicho esto, estos son los archivos que necesitamos para anular / modificar:

El controlador de administración de las categorías es el archivo que se trata principalmente con. Aunque podríamos modificarlo directamente, siempre es mejor usar un override. Por lo tanto, crea un nuevo archivo en /override/controllers/admin llamado AdminCategoriesController.php, y pega lo siguiente dentro de las etiquetas php:

Fíjate en la última fila, return parent::renderForm();. Cámbialo por return AdminController::renderForm();. si no hubiéramos tomado esta contramedida, todos nuestros cambios habrían sido anulados por el controlador original. Para asegurarnos de que la anulación funciona, accede a la caché/ y borra class_index.php para habilitar el nuevo archivo. A continuación, inicie sesión en el back office y compruebe que la vista de categoría única funciona como se espera. Si es así, sigue leyendo.