Bloque de imagen demasiado grande (Solucionado)

[jpalbox]

Hola, estoy realizando mi propia tienda, una libreria, hay algunas que no se como adaptalas, esta es la direccion http://www.tiendatricolor.com/es/juveniles/9-maldicion-del-maestro-2-cronicas-de-la-torre.html, en concreto lo que deseo es que  el bloque de imagen se adapte al tamaño de la imagen, o por lo menos que sea mas pequeño de lo que es ahora, no se si me explico si veis el enlace la imagen aparece sobre un fondo blanco que sobresale aproximadamente 2 cm por cada lado, quiero que ese fondo se adapte a la imagen, en las imagen de la portada tambien me sucede lo mismo.

La versión que uso es 1.7.6 con el tema classic

Edited December 14, 2020 by jpalbox (see edit history)

[kouty_80]

53 minutes ago, jpalbox said:

Hola, estoy realizando mi propia tienda, una libreria, hay algunas que no se como adaptalas, esta es la direccion http://www.tiendatricolor.com/es/juveniles/9-maldicion-del-maestro-2-cronicas-de-la-torre.html, en concreto lo que deseo es que  el bloque de imagen se adapte al tamaño de la imagen, o por lo menos que sea mas pequeño de lo que es ahora, no se si me explico si veis el enlace la imagen aparece sobre un fondo blanco que sobresale aproximadamente 2 cm por cada lado, quiero que ese fondo se adapte a la imagen, en las imagen de la portada tambien me sucede lo mismo.

La versión que uso es 1.7.6 con el tema classic

El fondo blanco parece que es de la propia imagen, ¿no? http://www.tiendatricolor.com/6-large_default/maldicion-del-maestro-2-cronicas-de-la-torre.jpg Sube una imagen pero que no tenga esas franjas verticales blancas a los lados.

[eilyvictoria123]

si es la imagen que colocaste

[jpalbox]

Hola, las imágenes se han subido sin ningún margen, no me había dado cuenta de eso, pero parece como si este margen lo creara prestashop al mostrar la imagen como si intentara hacerla cuadrada, la imagen que se ha subido es esta.

[kouty_80]

11 hours ago, jpalbox said:

Hola, las imágenes se han subido sin ningún margen, no me había dado cuenta de eso, pero parece como si este margen lo creara prestashop al mostrar la imagen como si intentara hacerla cuadrada, la imagen que se ha subido es esta.

Cierto, es Prestashop el que le pone ese fondo. Lo que tienes que hacer si no quieres que salga, es subir la imagen en png en vez de en jpg. Y luego quitar un par de estilos a la clase .product-cover img, estos dos que te pongo en la imagen, el fondo blanco y la sombra:

Puedes poner en el archivo custom.css que está en themes/classic/assets/css/ esto:

.product-cover img {
    box-shadow: none !important;
    background: none !important;
}

Y queda así:

 

Si quieres quitar también ese fondo blanco y la sombra del modal que se abre cuando clicas en la imagen y de las miniaturas, tienes que añadir esto también a tu custom.css:

#product-modal .modal-content .modal-body .product-cover-modal{
        background:none!important;

}

#product-modal .modal-content .modal-body .image-caption{
    background:none!important;
    
}

#product-modal .modal-content .modal-body .product-images img{
    background: none !important;
}

.product-images>li.thumb-container>.thumb{
    box-shadow: none !important;
}

#product-modal .modal-content .modal-body .image-caption{
    border-top:none!important;
}

Y por si acaso, revisa que tengas esta opción marcada en Ajustes de imágenes:

Te dejo la imagen en png para que la descargues por si no la tienes:

Edited December 13, 2020 by kouty_80 (see edit history)

[gusman126]

Pregunta , Todas las imágenes vas a ser verticales? supongo que si ya que van a ser libros.

Entonces lo mejor sera que cambies el tamaño de imágenes en la configuración y ajustes de imágenes

Suponiendo que utilizas como el ejemplo que hay en el mensaje anterior, son imágenes de 502x750 , seria mejor utilizar la principal de 1004x1500 

Deberías cambiar las proporciones y tamaños aquí, siempre con la base de 1004x1500, de esa manera las imágenes serian verticales

el "large_default" 502x750 

El superlarge -> 1004x1500

y las demás a proporción, siempre imágenes verticales y tamaño mayor el vertical

 

 

 

[jpalbox]

Muchas gracias por los aportes. Estoy cambiando los parámetros de las imágenes tal y como indica gusman126 y parece una buena solucion.

[jpalbox]

Como no todos los libros no tienen el  mismos tamaño de imagenes, adoptando la solución de gusman126 algunas imágenes quedan bien, pero otras como esta http://www.tiendatricolor.com/es/juveniles/8-valle-de-los-lobos-1-cronicas-de-la-torre.html queda con ese pequeño borde, he cambiado los codigos como indica 

kouty_80 pero no logro apreciar los cambios, lo ideal seria hacer transparente el fondo blanco que aparece en la imagen

[kouty_80]

1 hour ago, jpalbox said:

Como no todos los libros no tienen el  mismos tamaño de imagenes, adoptando la solución de gusman126 algunas imágenes quedan bien, pero otras como esta http://www.tiendatricolor.com/es/juveniles/8-valle-de-los-lobos-1-cronicas-de-la-torre.html queda con ese pequeño borde, he cambiado los codigos como indica 

kouty_80 pero no logro apreciar los cambios, lo ideal seria hacer transparente el fondo blanco que aparece en la imagen

¿Estás subiendo la imagen en formato .png o en .jpg?

Edited December 13, 2020 by kouty_80 (see edit history)

[gusman126]

MUY IMPORTANTE 

Hay que regenerar imagenes

[jpalbox]

12 hours ago, kouty_80 said:

¿Estás subiendo la imagen en formato .png o en .jpg?

Se me había pasado ese detalle. Ya las he subido y reginerado y se ven perfectamente. Gracias. Solo me queda un detalle pendiente quiero quuitar el enlace de la imagen grande, y  quitar el evento hover.

Edited December 14, 2020 by jpalbox (see edit history)

[gusman126]

hace 2 horas, jpalbox dijo:

Se me había pasado ese detalle. Ya las he subido y reginerado y se ven perfectamente. Gracias. Solo me queda un detalle pendiente quiero quuitar el enlace de la imagen grande, y  quitar el evento hover.

Perfecto, cambia el titulo del mensaje a "solucionado" 

Y edita el ultimo mensaje como lo solucionaste, si fue con el cambio de configuración + regenerar o con los cambios de CSS, no esta claro la solución

 

[jpalbox]

Solucionado este tema

Con esta aportación de kouty_80

Cierto, es Prestashop el que le pone ese fondo. Lo que tienes que hacer si no quieres que salga, es subir la imagen en png en vez de en jpg. Y luego quitar un par de estilos a la clase .product-cover img, estos dos que te pongo en la imagen, el fondo blanco y la sombra:

y la aportacion de gusman126  cambiando las proporciones y tamaños de las imagenes