0

Smartblog, redimensionar imágenes para la versión móvil

El otro día, echando un vistazo al blog de mi tienda online por el móvil (uso el módulo gratuito smartblog, que recomiendo sin lugar a dudas), me di cuenta que había un error en las imágenes; se sobresalen del tamaño de la plantilla de prestashop sin redimensionarse, causando una incómoda visualización del artículo, por no hablar de lo poco profesional que queda que en la versión móvil, tipo de visualización que va en aumento, se descuadren las imágenes. Aclarar antes de nada que utilizo la plantilla por defecto default-bootstrap de prestashop.

Así se puede visualizar la imagen en un dispositivo móvil:

 


No obstante, en otras resoluciones no he detectado el problema, por lo que se trata solamente de la versión móvil, con menor resolución, donde se detecta el problema.

Después de hacer unas pruebas, he hallado el foco del problema: si visualizamos el código de la publicación, y buscamos la imagen que se sobresale de la plantilla, podremos ver que, por defecto, smartblog, inserta las imágenes con el tamaño que tienen (como es lógico). A posteriori puedes cambiarle el tamaño sin pegas, el problema viene que no se adapta a la versión móvil.



<p style=”text-align: center;”><img src=”http://URL-de-la-imagen.jpg” alt=”f” width=”750″ height=”300″ /></p>


La solución es bien sencilla, eso sí, hay que hacerlo de manera manual cada vez que se inserta una imagen en cada publicación, pero evitas así que ninguna imagen se sobresalga de la plantilla móvil.

Solución al problema de redimensión de imágenes con el módulo smartblog de prestashop:


 Bien, solo tendrás que acceder al código de la imagen en la edición de la publicación (Menu>Herramientas>Código fuente), y localizar width=”750″ height=”300″ para modificarlo por width=”70%” y asunto solucionado. El width lo he puesto al 70% porque si lo ponemos al 100%, y la imagen que insertas no tiene una gran resolución, se puede pixelar. De todas forms, el porcentaje lo puedes adaptar a tus necesidades. Si la imagen tiene un gran tamaño y quieres que ocupe todo el ancho en la versión escritorio, lo puedes poner al 100% sin problemas.


<p style=”text-align: center;”><img src=”http://URL-de-la-imagen.jpg” alt=”f” width=”70%” /></p>


Y de esta manera, la imagen queda redimensionada en la versión móvil de esta manera.

imagen redimensionada smartblog


Estoy seguro que hay más maneras de poder redimensionar la imagen, esta es una manera sencilla y rápida. Estoy abierto a sugerencias y por supuesto, a intentar ayudar en lo que esté en mis manos si no consigues redimencionar las imágenes.

Cristian Ballesteros

Apasionado de la informática, de la política, del deporte y vida sana. Independiente, emprendedor, incansable, constante, ilusionador, ilusionado…
Coordino la web latiendadeelectricidad.com

Deja un comentario