Imágenes subidas a Blogger

Este tutorial fue actualizado Ir a la actualización

Las imágenes subidas a Blogger tienen características que, en ocasiones, producen confusión para su manejo. Vamos a analizar dos aspectos fundamentales: Las dimensiones y los códigos. Dimensiones Las imágenes que subimos a Blogger se alojan, en su versión original, con un máximo de 1.600px en su dimensión más larga (ancho o alto), o en ambas, cuando son cuadradas. Pero en nuestro blog quedarán, sometidas a tres limitaciones, dependiendo del tamaño que hayamos escogido al subirlas. Las opciones son: Pequeño, Mediano y grande. Estas opciones tiene en cuenta el ancho (width) y el alto (height), y son: Para Pequeño: 200px Para Mediano: 320px Para Grande: 400px Se puede presentar uno de estos casos: Que las dos dimensiones sean  iguales o menores que 200 pixeles : En este caso la imagen quedará en el blog con sus medidas originales. que una o las dos dimensiones estén dentro del rango  mayor que 200px e igual o menor que 400px : En este caso la dimensión mayor adquirirá el tamaño escogido, y la menor se ajustará, por defecto, guardando la proporción. Que una o las dos dimensiones sea(n)  mayor(es) que 400 pixeles : En este caso la dimensión mayor adquirirá el tamaño escogido y la menor se ajustará, por defecto, guardando la proporción. Cuando necesitamos que la imagen subida tenga un ancho específico y con ninguna de las opciones lo conseguimos, podemos ajustar las medidas manualmente (en el código de la imagen), aplicando una sencilla fórmula matemática de proporciones. Por ejemplo, para disminuír el tamaño de la imagen cuyas medidas originales son 320px de ancho y 118 px de alto, tomamos el nuevo ancho que le queremos dar (Ej. 250px), y aplicamos la siguiente fórmula: en donde: a = nuevo ancho, b = altura actual, c = ancho actual, x = nueva altura (tres valores conocidos y una incógnita). Reemplazamos en la fórmula: Resuelta la fórmula, el resultado indica que la nueva altura debe ser de 92px, que es la que corresponde para guardar la proporción con el nuevo ancho (250px), al que redujimos el originalo (320px). Si lo que necesitamos es una altura específica aplicamos la fórmula con estas equivalencias: a = nueva altura, b = ancho actual, c = altura actual, x = nuevo ancho. Es necesario tener en cuenta que, en caso de aumentar el tamaño de la imagen, ésta se distorsiona tanto más cuanto mayor sea el aumento del tamaño. Códigos Los códigos generados cuando subimos imágenes a Blogger tienen características especiales que es necesario conocer para adaptar convenientemente las imágenes al diseño de la entrada o del elemento del blog en el cual las ponemos. Las características de los códigos generados, cuando se suben imágenes a Blogger, varían dependiendo de: Editor de entradas Editor anterior Editor actualizado Navegador Internet Explorer Mozila Firefox y otros Código de imagen subida con el editor anterior La imagen, cuyo código vamos a analizar, tiene las siguientes dimensiones en su versión original (imagen real): Ancho (Width): 388px, Alto (Height): 143px, fue subida con tamaño Mediano, y ubicada a la Izquierda. 1.- Con Internet Explorer <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ap5Rl8SzsMHp4uTzqG3qL15vmlUgfx8QEUVhmhSfOqOpTBEYfr5gpKQxs-AO_X9q4ykV6GXhi2PcT9WNjVW4BiF0iIWNrA93AZiCoqUMzfF9D9EvqV0Qic_HrOlwL2at_tjANrzvlWc/s1600/Blogger.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 118px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ap5Rl8SzsMHp4uTzqG3qL15vmlUgfx8QEUVhmhSfOqOpTBEYfr5gpKQxs-AO_X9q4ykV6GXhi2PcT9WNjVW4BiF0iIWNrA93AZiCoqUMzfF9D9EvqV0Qic_HrOlwL2at_tjANrzvlWc/s320/Blogger.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5592199810662894994" /></a> 2.- Con Mozila Firefox <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ZCbapoNJ6fqLBqzQe5z2AtU17sDYqnfzG-akluX_TlaA0GjIiIiQIghal5zPkLjtCPol3RNbwh_zx7MysjG6q0_RdEYm-ThQov4EClVvBbFh1kT5kDlHq-sW58wY7y8viXkq1-gWu2A/s1600/Blogger.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 118px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ZCbapoNJ6fqLBqzQe5z2AtU17sDYqnfzG-akluX_TlaA0GjIiIiQIghal5zPkLjtCPol3RNbwh_zx7MysjG6q0_RdEYm-ThQov4EClVvBbFh1kT5kDlHq-sW58wY7y8viXkq1-gWu2A/s320/Blogger.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5592505807323818274" /></a> Elementos del código: 1.1.- <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ap5Rl8SzsMHp4uTzqG3qL15vmlUgfx8QEUVhmhSfOqOpTBEYfr5gpKQxs-AO_X9q4ykV6GXhi2PcT9WNjVW4BiF0iIWNrA93AZiCoqUMzfF9D9EvqV0Qic_HrOlwL2at_tjANrzvlWc/s1600/Blogger.png"> 2.1.- <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ZCbapoNJ6fqLBqzQe5z2AtU17sDYqnfzG-akluX_TlaA0GjIiIiQIghal5zPkLjtCPol3RNbwh_zx7MysjG6q0_RdEYm-ThQov4EClVvBbFh1kT5kDlHq-sW58wY7y8viXkq1-gWu2A/s1600/Blogger.png"> Contiene la dirección URL de la imagen, en su versión original, y hacia la que apunta el enlace que, en este caso, es la imagen generada en el blog por defecto. Es decir que un click hecho sobre la imagen llevará a la misma imagen, pero en su versión original. Si queremos que en nuestro blog quede la imagen real (versión original), volvemos a subirla pero utilizando esta URL, y eliminando este elemento del código generado. En general es aconsejable eliminar este elemento, junto con la etiqueta de cierre (</a>), que está al final del código. Se debe conservar este elemento en dos casos: Cuando, para mejor comprensión de la imagen, sea necesario ver una ampliación de la misma, y Cuando se utiliza la imagen como un enlace, pero reemplazando la dirección URL por la que debe enlazar la imagen. 1 y 2 (Para ambos códigos) <img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 118px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ap5Rl8SzsMHp4uTzqG3qL15vmlUgfx8QEUVhmhSfOqOpTBEYfr5gpKQxs-AO_X9q4ykV6GXhi2PcT9WNjVW4BiF0iIWNrA93AZiCoqUMzfF9D9EvqV0Qic_HrOlwL2at_tjANrzvlWc/s320/Blogger.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5592199810662894994" /> Este elemento tiene las siguientes características:  float:left; : Sitúa la imagen a la izquierda de la página, con el texto a su dereha. Esta característica varía así:  float:right; : si la imagen es ubicada a la derecha, y  display:block; : si la imagen es ubicada en el centro.  margin:0 10px 10px 0; : Establece los márgenes o espacios, en pixeles entre cada lado de la imagen y el texto, teniendo en cuenta la ubicación de la imagen (izquierda, derecha o centro). El orden en que están definidos estos márgenes sigue el sentido de las manecillas del reloj, empezando por el margen superior. En este caso (imagen a la izquierda), el margen superior es  0 , el derecho  10px , el inferior  10px  y el izquierdo  0 . Estos márgenes se pueden modificar sin que con ello se altere la imagen. Esta característica varía así:  margin:0 0 10px 10px; , si la imagen es ubicada a la derecha, y  margin:0px auto 10px; , si la imagen es ubicaha en el centro. En este caso no se define sino un solo margen, el inferior, (auto 10px), ya que al situar la imagen en el centro, todo el texto se desplaza debajo de la misma.  cursor:pointer; cursor:hand; : Define el puntero del cursor, cuando se pone sobre la imagen, como la imagen de una mano.  width: 320px; height: 118px; : Fija las medidas en pixeles de la imagen, como quedará alojada en el blog: ancho (width) y alto (height). Como ya se explicó, estas medidas son modificables si se quiere mostrar la imagen de tamaño diferente, teniendo cuidado de guardar la proporcionalidad y de que el tamaño no sea superior al cuerpo de la entrada o del elemento en donde pongamos la imagen.   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ap5Rl8SzsMHp4uTzqG3qL15vmlUgfx8QEUVhmhSfOqOpTBEYfr5gpKQxs-AO_X9q4ykV6GXhi2PcT9WNjVW4BiF0iIWNrA93AZiCoqUMzfF9D9EvqV0Qic_HrOlwL2at_tjANrzvlWc/s320/Blogger.png" : Contiene la dirección URL de la imagen tal como quedará alojada en el blog, dependiendo del tamaño que le hayamos dado al subirla, y sometida a cualquiera de las opciones explicadas al comienzo de este tutorial. s320 indica que fue subida con tamaño Mediano.  border="0" : Establece un borde para la imagen, obviamente con una cifra diferente de cero (0), dependiendo del grosor que le queramos dar. Para que esta característica funcione es necesario eliminar el enlace del código, o sea la primera URL (<a href="URL">), y su correspondiente etiqueta de cierre, al final del código (</a>).  alt="" : En este entrecomillado ponemos una descripción de la imagen, que el atributo  alt  hará que se vea al poner el cursor sobre la misma. Debido a que este atributo parece ya obsoleto, para asegurarnos que este efecto funcione agregamos a continuación este:  title="" , con la misma descripción entre las comillas.  id="BLOGGER_PHOTO_ID_5592505807323818274" : Es la identificación que Blogger da a cada imagen. Código de imagen subida con el editor actual Con el editor actual los códigos generados, con Internet Explorer y con Mozila Firefox, son iguales. Continuando con el ejemplo que estamos analizando, el código es: <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifLC3weizanEZjH8ZeHaLWsRcpiPYOol73jAnnScJqJoQc9cW-EnDH0fvM-8A7GPukYf81-gjh5IVNWlqBh3p8DFy9dPhW4LFv7toKXhr86ix_jfzgmVCJ77ylHGrcynfo1Pdduma1sBc/s1600/Blogger.png" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="118" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifLC3weizanEZjH8ZeHaLWsRcpiPYOol73jAnnScJqJoQc9cW-EnDH0fvM-8A7GPukYf81-gjh5IVNWlqBh3p8DFy9dPhW4LFv7toKXhr86ix_jfzgmVCJ77ylHGrcynfo1Pdduma1sBc/s320/Blogger.png" /></a></div> Elementos del código: Este código contiene elementos que también están en los códigos de imágenes subidas con el editor anterior, y que ya analizamos; y otros que no están en dichos códigos, y son: Los elementos resaltados en amarillo: Parecen inocuos, sin una función definida; si se eliminan del código la imagen no se altera en nada.  margin-right:1em; margin-bottom:1em : Establece los márgenes o espacios entre cada lado de la imagen y el texto, teniendo en cuenta la ubicación de la imagen (izquierda, derecha o centro). En este caso (imagen a la izquierda), están definidos los márgenes derecho (right) e inferior (bottom). Para los demás casos este elemento varía así:  margin-left:1em; margin-bottom:1em : Cuando la imagen es ubicada a la derecha, y  margin-left:1em; margin-right:1em : Cuando la imagen es ubicada en el centro. Como podemos observar, en este código los márgenes están dados en em's y no en pixeles, como sucede con las imágenes subidas con el editor anterior. Un em es una unidad de Longitud en hojas de estilo, representa la altura de la fuente de un elemento y equivale a 16px. Una herramienta para convertir pixeles a em's, la encontramos aquí: Em Calculator. Para eliminar el enlace entre la imagen alojada en al blog y la imagen real, suprimimos del código lo resaltado en rojo Twittear