He visto en algunos blogs editados en La Coctelera cómo las imágenes que ilustran los posts exceden el ancho de la capa que los contiene, invadiendo el espacio de la barra lateral. O también cómo a imágenes de un ancho considerable, aunque inferior al del contenedor, se les aplica un estilo que las sitúa a la izquierda o la derecha del texto, con el resultado de que éste último se cuela en el escaso espacio restante y la apariencia de la página se resiente.
Después de haber comentado el tema en privado con un par de amigos que tenían este problema, he decidido dedicarle este post por si a alguien más puede serle de utilidad. Vamos a ver a continuación cada uno de los dos casos a los que me refiero y sus correspondientes soluciones:
Caso 1.- El ancho de la imagen es superior al de la capa

La solución está clara, hay que reducir el ancho de la imagen para que se ajuste a las dimensiones de la capa que la contiene. Esto podemos hacerlo de dos maneras diferentes:

  • Usando un programa de retoque fotográfico, como Photoshop, para reducir las dimensiones de la imagen. Visualizadores de archivos de imagen, como XnView, también ofrecen esa posibilidad.
    Esta alternativa es la más aconsejable, pues con la reducción de las dimensiones también disminuye el peso de la imagen, el tamaño en kilobytes.
    Una vez redimensionada la imagen:
    1. la guardamos en nuestro ordenador con el mismo nombre que tenía
    2. nos dirigimos a la página de edición del artículo que incluye la imagen a sustituir desde artículos anteriores en el editor de La Coctelera
    3. volvemos a subir la imagen a La Coctelera usando el enlace Incluir archivo
    4. copiamos el código que la aplicación nos ofrece (es recomendable elegir la opción de la alineación centrada)
    5. sustituimos en el artículo el antiguo código de la imagen por el que acabamos de obtener
    6. actualizamos el artículo pulsando el botón Publicar
  • Si no sabemos o no podemos reducir las dimensiones de la imagen en nuestro ordenador, queda la opción de modificarlas en el código de la imagen, dentro del artículo. Para ello hemos de cambiar los valores de width (ancho) y height (alto). En esto es importante que los nuevos valores guarden la misma relación de proporción que los anteriores, pues si no la imagen quedará distorsionada.
    La desventaja de esta opción es que el tamaño en Kb de la imagen no varía, con lo que la página tiene un peso añadido innecesario y en el servidor usamos un espacio de almacenaje extra inútil, que no nos sirve para nada. Por eso no es recomendable utilizar esta opción sistemáticamente. Si nos encontramos a menudo con imágenes demasiado grandes, lo ideal es modificarlas en nuestro ordenador y subirlas a La Coctelera ya con sus dimensiones ajustadas.

Con cualquiera de las dos soluciones, la nueva apariencia del post debe ser algo parecido a esto:

Caso 2.- Texto no deseado al lado de la imagen

La solución más rápida y eficaz, en este caso, es elegir el código con la imagen centrada cuando la subimos al servidor de La Coctelera. Esto hará que el texto comience a mostrarse bajo la imagen y no aparezca en el lateral:

Pero si consideramos que queda mucho espacio libre a los lados de la imagen y no nos gusta la apariencia final, podemos reducir sus dimensiones como se indica en el caso anterior y situarla a la izquierda o a la derecha. En este sentido, yo recomendaría que el ancho de la imagen no superara la mitad del ancho total de la capa. Esto es, si la capa tiene un ancho de 400 píxeles, por ejemplo, la imagen no debería tener más de 200.
La apariencia final debería ser algo similar a esto:

Anchos de capa en las diferentes plantillas
Al crear o editar las imágenes para los artículos debemos tener en cuenta que el ancho de la capa contenedora de los posts es de 412px en la mayoría de las plantillas de La Coctelera.
Hay tres plantillas que tienen un ancho diferente. Son las siguientes: Dezigne Vintage, con 402px; Florido Classic, con 480px; y ésta que utilizo yo, Florido Azul, con 500px.
Bueno, espero que se entiendan las explicaciones (más o menos). No obstante, si alguien tiene problemas con esta cuestión de las imágenes puede dejar sus dudas en los comentarios.