Que tal Taringueros.
Tengo días tratando de compartir esto con ustedes pero no me había tenido tiempo. Espero que les ayude mucho y me refiero a los que tienen blogs ya sea en Blogger o Joomla.
¿Cómo hacer que nuestras imágenes se adapten al contenido, sea cual sea la template que estemos usando ya sea en Blogger o en Joomla?
- Cuando subimos una imagen a Blogger y vemos el codigo HTML, tendremos algo como esto:
<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_t47rXx-EvE4/TQr64LSdn6I/AAAAAAAAB-Y/UAY4C80FRXg/s1600/1001.jpg"> <img border="0" src="http://4.bp.blogspot.com/_t47rXx-EvE4/TQr64LSdn6I/AAAAAAAAB-Y/UAY4C80FRXg/s1600/1001.jpg"></a> </div>
o esto:
<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_t47rXx-EvE4/TQr64LSdn6I/AAAAAAAAB-Y/UAY4C80FRXg/s320/1001.jpg"> <img border="0" src="http://4.bp.blogspot.com/_t47rXx-EvE4/TQr64LSdn6I/AAAAAAAAB-Y/UAY4C80FRXg/s320/1001.jpg" width="320"></a> </div>
El primer código es el resultado de subir una imagen mayor a 600px
El segundo código es el resultado de subir una imagen menor a 600px y Blooger automáticamente le pone un ancho de 320px, noten lo que he marcado en ROJO.
Les enseñaré como hacer que las imágenes que subamos se adapten a cualquier plantilla que queramos aplicar, ya que a veces sucede que cambiamos de plantilla pero algunas imagenes son grandes y dañan el diseño de las columnas izquierda o derecha de nuestra plantilla. Imaginense tener que cambiar el ancho cada vez que queramos cambiar de plantilla. Y si son cientos de post que hemos publicado? El problema podría ser más incomodo.
¿Qué haremos?
Al subir una imagen iremos al código de la misma y agregaremos esto en la linea: width="99%"
Esto le indica a la imagen que debe ajustarse al ancho de la columna en un 99%, si nuestra columna donde mostramos las publicaciones es de 200px, la imagen se ajustará sin problemas sin necesidad de que tengamos que estar cambiandole el tamaño a todas nuestras imagenes.
Entonces, subimos la imagen, vamos a edicion de HTML, editamos la linea de codigo y nos tiene que quedar así:
<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_t47rXx-EvE4/TQr64LSdn6I/AAAAAAAAB-Y/UAY4C80FRXg/s1600/1001.jpg"> <img border="0" src="http://4.bp.blogspot.com/_t47rXx-EvE4/TQr64LSdn6I/AAAAAAAAB-Y/UAY4C80FRXg/s1600/1001.jpg" width="99%"></a> </div>
En Joomla es mucho más facil, ubicamos la imagen, le cambiamos los atributos y en lugar de aplicar el ancho en pixeles, colocamos el 99% y nuestras imágenes se ajustarán a cualquier tipo de columna donde sean publicadas.
Si revisan las urls que puse de ejemplo se llevarán una agradable y grande sorpresa:
SUERTE, y que ya no os reventeis la cabeza en vuestros blogs.
NOTA: Esto sirve más que todo para los blogs que muestran galerias. Importante subir imagenes en alta calidad.
NOTA2 No exactamente tiene que ser 99%, puede ser 90, 80, o como mejor les parezca.