Cuándo añadimos imágenes a los productos en PrestaShop, se realiza un resize para crear los distintos tamaños necesarios. El gran problema es que, si subimos archivos .png transparentes, PrestaShop las genera en formato .jpg, eliminando la transparencia y añadiendo un color de fondo blanco sólido.
Por desgracia, no existe ninguna opción en el Backoffice que nos deje escoger el tipo de archivo, la transparencia o el color de fondo, y después de testear la nueva versión 1.4.0.12 (aún en versión test), no parece que este problema haya sido resuelto.
Así que si queremos utilizar archivos de imágenes .png transparentes para nuestros productos, tendremos que editar un par de líneas de código en nuestro PrestaShop, a continuación, vamos a ver como.
- Abrimos el archivo images.inc.php, en el directorio raíz de PrestaShop. Ahora localizamos la siguiente línea:
function imageResize($sourceFile, $destFile, $destWidth = NULL, $destHeight = NULL, $fileType = 'jpg'){
Bien, como podéis observar, el formato del archivo de salida está en .jpg, así que vamos a cambiarlo a .png dejando la línea de la siguiente manera:
//function imageResize($sourceFile, $destFile, $destWidth = NULL, $destHeight = NULL, $fileType = 'jpg'){
function imageResize($sourceFile, $destFile, $destWidth = NULL, $destHeight = NULL, $fileType = 'png'){
Una practica aconsejable cuando editamos código en el core de algún CMS, es comentar el código original, para poder ponerlo siempre en su estado original en el caso de que nuestro nuevo código no funcione.
Ahora localizamos la siguiente línea:
$white = imagecolorallocate($destImage, 255, 255, 255);
Bien, la comentamos y añadimos lo siguiente:
$white = imagecolorallocate($destImage, 255, 255, 255); //lo dejamos comentado por si acaso y añadimos:
$white=imagecreatefromgif("img/trans.gif");
Bien, lo que hemos hecho es eliminar la orden que especificaba el color de relleno del fondo y generamos la imagen a partir de trans.gif, que debemos tener en el directorio img de PrestaShop. Este gif será una imágen de 1×1 px transparente. Ahora, si ya hemos subido imágenes .png con fondo transparente, solo nos quedará regenerar las imagenes desde el backoffice de PrestaShop, y si no, ya podemos comenzar a subir nuestros .png, que quedarán con su fondo transparente.
Información Bitacoras.com…
Valora en Bitacoras.com: Cuándo añadimos imágenes a los productos en PrestaShop, se realiza un resize para crear los distintos tamaños necesarios. El gran problema es que, si subimos archivos .png transparentes, PrestaShop las genera en formato …….
Hey I’ve been looking for a solution to have transparent product images in prestashop for a couple of weeks, and tried several other edits of the image.inc.php file, but none worked as intended. This one is almost perfect!
One problem though, is a 1px black edge around my images! Would you happen to know anything for that?
Muchas gracias por esta aportación! la verdad es que me ha funcionado bien, se crea la transparencia, pero por alguna razón me sale un hilillo negro rodeando la imagen cuando exporto a PNG32, podrías ayudarme?
Muchas gracias! :)
Hola Jordi,
Gracias por dejar tu comentario, voy a ver si puedo ayudarte.
El problema es que cuando subimos una imagen a PrestaShop, se resiza en los tamaños especificados en el BackOffice. Bien, esta función php, genera imagenes jpg en los distintos tamaños, con la solución propuesta en este artículo hacemos 2 cosas, por un lado “habilitar” que prestashop acepte .png’s transparentes (cosa, que aunque intentemos subir imagenes transparentes por FTP no conseguimos) y por otro “falseamos” el resize.
¿Cómo?, emulando un GIF como un PNG, por eso necesitamos de la imagen de 1 pixel transparente….
Como sabrás, los GIF tienen el problema del “borde”. Si usamos un fondo oscuro, no habrá problema, pero si queremos usar un fondo con algún pattern, no nos quedará mas remedio que subir las imágenes PNG por FTP, que una vez editado el images.inc.php ya nos las acepta.
Es un poco costoso, pero te aseguro que utilizar productos transparentes es una maravilla, sobre todo en la animación hasta el carrito.
Como conclusión, esta solución nos sirve para poder usar PNG transparentes, aunque tengamos que subirlos por FTP, cosa que si no editamos el images.inc.php no conseguimos.
Sería estupendo conseguir editar la función resize para qie nos cree las imágenes en PNG “real”, pero a´n no me he puesto a ello.
Un saludo y espero haberte ayudado, POR CIERTO, si alguien quiere colaborar en solucionar este “problemilla”, toda colaboración será bien venida.
Muchísimas gracias por tu explicación!
Creo que lo capté todo y he hecho los pasos que indicas para, finalmente, tener un archivo PNG transparente, renombrarlo a JPG (falseándole la extensión, vamos) y subiéndolo por FTP.
Entiendo que era ese el paso final que me faltaba. Ahora sí me funciona. Muchísimas gracias!!! :)
Buenas,
Lo he probado en PrestaShop™ 1.4.1.0 y no funciona, me hace petar el BackOffice.
Gracias!
Hola Kabir, es raro, yo lo uso en un Prestashop 1.4.1.0 y funciona correctamente.
No obstante, creo que este “truco” debe usarse sólo en casos extremos en los que el diseño exija productos transparentes ya que forzamos a que archivos PNG sean tratados como JPG (al grabarlos con esta extensión).
Un saludo.
Tengo la version 1.4 y esas no lineas no existen, podran saber porque? saludos y gracias
Hola. Gracias por el post.
Voy a probar de seguir el codigo que dejaste. No es esto lo que estaba buscando, pero bueno, cai aqui y veremos.
Saluds
Hola: tengo la tienda en marcha desde hace un par de meses, quiero cargar una foto en un producto y me sale la leyenda Warning: imagejpeg() [function.imagejpeg]: Unable to open ‘/home/s118507e/public_html/latiendadelmicrocemento.com/img/p/1/7/3/173.jpg’ for writing: No such file or directory in /home/s118507e/public_html latiendadelmicrocemento.com/images.inc.php on line 328