JMiur [E]

Como cada día se suman nuevos usuarios a Blogger hay preguntas que se repiten y este es uno de los temas por el que me llegan más consultas: ¿qué hacer con las imágenes? ¿cómo las pongo? ¿dónde están?.

Lo elemental es entender que las imágenes de los posts son archivos externos que podemos mostrar, vincular o ambas cosas a la vez. Una imagen "incrustada" es una imagen que incluimos con la etiqueta IMG:
<img src="URLimagen" />
y a la que podemos mostrar con un tamaño distinto al original agregando los atributos WIDTH y HEIGHT:
<img src="URLimagen" width="ancho" height="alto" />
Todas las imágenes son externas por lo tanto podemos crear vínculos a ellas:
<a href="URLimagen">Aquí está la imagen</a>
o vínculos que, en lugar de texto, contengan una miniatura de la imagen original:
<a href="URLimagen">
<img src="URLimagen" width="ancho" height="alto" />
</a>
Para que al hacer click se abran automáticamente en en una nueva ventana o una nueva pestaña, usamos el atributo TARGET:
<a href="URLimagen" target="_blank">Aquí está la imagen</a>
Si dentro de la etiqueta IMG agregamos algunas propiedades de estilo, logramos hacer que se muestren "flotando" al lado de un texto:
<img src="URLimagen" style="float: left;/>Aquí va el texto al lado
<br clear="left" />
Aquí va el texto abajo
Donde agregamos la etiqueta CLEAR para forzar a que el siguiente elemento aparezca debajo y no al lado. Lo mismo, puede hacerse utilizando right en lugar de left.

Si un imagen es un vínculo, por defecto tendrá un borde, para eliminarlo, usamos el atributo BORDER:
<img src="URLimagen" border="0"/>

Cuando subimos una etiqueta con Blogger, aparece un código por defecto que asusta:
<a href="URLimagen"
onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" >
<img src="otraURLimagen" border="0" alt=""
id="BLOGGER_PHOTO_ID_000000000000000000"
style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" />
</a>
Esto es así porque Blogger crea dos imágenes, una contiene la imagen original, la otra una miniatura que se redimensiona automáticamente para que entre en el área de posts y es la que se muestra con la etiqueta IMG. A la otra, sólo se accede a través del vínculo, haciendo click en la imagen.

Un ejemplo simple:

http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s1600/imagen.gif es la imagen completa
http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s400/imagen.gif es la miniatura

Por cierto, esto tiene algunos problemas. Si subimos una imagen grande y queremos usarla en la plantilla ¿cuál es la URL que debemos poner? La lógica nos dice que la primera, la que se encuentra dentro de la etiqueta A ya que es la que tiene el tamaño completo, sin embargo, muchas veces esto no funciona, la imagen no se muestra.

Incluso, si ponemos la URL de la imagen en el navegador, no se mostrará sino que nos preguntará si queremos descargar el archivo ¿Por qué? al parecer, Blogger no apunta a la imagen sino a una página intermedia a la que no tenemos acceso. Esto es bastante frecuente si la imagen es muy grande, por ejemplo, los fondos de las plantillas.

Explicaciones no tengo pero la solución práctica es simple. Si la URL de la imagen que subimos es de este tipo o similar:

http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s400/imagen.gif

basta fijarse en el nombre de la carpeta, es este caso s400 y modificarla para que apunte a s00, de tal forma, la URL a incluir en la plantilla sería:

http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s00/imagen.gif

Tal vez, alguna vez Blogger se digne explicar claramente qué hace con las imágenes y cómo podemos usarlas.

37 comentarios:

Nico  

Buena información. Digo lo mismo, porque es tan complicado el sistema de imágenes? Parece que estuviera todo entreverado. Sería mas coherente tenerlas todas juntas o al menos saber donde están.

Responder
JMiur  

Si, no sólo creo que es una mala solución sino casi una falta de respeto para los usuarios.

Por cierto: ¡Bienvenido! ¡qué sería de este blog sin vos, amigo!

Responder
don-bellaco  

Muy buena informacion, te felicito, muchas gracias por la ayuda, arreglé mi problema con una imagen de header que aparecía chica y no tenía solución, la masa loco, IDOLO!!!

Saludos

Responder
JMiur  

¡Una exageración! pero, agradecido igual :D

Responder
CGnauta  

Te doy la solución mi amigo usando picasa, lo único que debes hacer, es subir mediante un nuevo post (o sea, solo para subir las imágenes) en tu blog de la manera normal y luego entra en tu álbum de Picasa y en el álbum del blog da clic sobre las imágenes y luego amplíala con el botón de zoom.

Da clic sobre la imagen y obtendras la verdadera dirección de la imagen. (la dirección verdadera incluye el dominio google)

Ojo: si intentas pegar directamente en la barra de navegación lo tratará de descargar, pero mediante la etiqueta img se carga correctamente.

Pese a que tu solución en lo particular no funciona, me diste la idea para buscar la forma correcta, cosa que te agradezco,

mi blog he aplicado este método sin ningún problema http://cgnauta.blogspot.com/

En caso de querer subir las imágenes directamente a Picasa sólo le digo que no se pueden subir PNG sólo imágenes JPG

Responder
JMiur  

Agradezco la información, me parece muy valiosa.

Personalmente, creo que Picasa es un gran programa pero la integración con Blogger deja mucho que desear, por ahora, me parece que sigue siendo un tema pendiente.

Respecto a la solución, siempre que se cambie el directorio sXXX por s00, la imagen será accesible en su tamaño original, tanto desde un post como desde la plantilla, incluyendo scripts u hojas de estilo externas tal y como he comprobado recientemente.

Responder
CGnauta  

Es es muy cierto en eso de la gestión de imágenes, pero creo que el problema de usar la solución sXXX s400 esta en el servidor en que se encuentre.

A mi por ejemplo simplemente me muestra el contenido de Alt porque pasa precisamente lo que dices respecto a la petición que hace de blogger - picasa - google.
Otro problema que he visto, es que si insertas HTML en la plantilla en vez de usar el XML de blogger tampoco lo muestra, para aquellos que tienen ganas de hacer plantillas con las viejas tablas.

En todo caso esta solución que dí es para el caso de si quieren usar sus cuentas picasa - blogger en vez de un servidor externo.

Saludos

Responder
Ignacio  

Mucha y buena información. Yo estoy intentando pasarme a Blogger de Wordpress y me encuentro con un problema en las imágenes, porque quiero que mis visitantes las vean igual. En la plantilla de Wordpress, las imágenes salen con un borde en blanco y un marco de 1 pixel lo que le da el aspecto de estar enmarcadas; el mismo efecto lo he visto en otras blogs de Blogger pero no consigo hacerlo en la plantilla Minima y en otras tampoco. Si me pudieras orientar te lo agradecería muchísimo, desde ya gracias.

Responder
JMiur  

Tendría que saber exactamente tu idea pero, en términos generales, para poner un borde en todas las imágenes, hay que establecer la propiedades en el HEAD de la plantilla, dentro del estilo (en WP sería el archivo style.php) y en Blogger entre <b:skin> y </b:skin>

img {
padding: separacionpx;
border: 1px solid #color;
}

Esto, creará un recuadro alrededor de la imagen pero, según sea el navegador utilizado, se verá diferente. En Firefox, el recuadro "separará" (padding) de la imagen pero en IE no.

Hay alguna explicación más sobre los bordes en las imágenes AQUI

Responder
Ignacio  

Gracias por tu respuesta. Te cuento que después de hacerte esta pregunta, volvía a cargar la platilla Minima Stretch y seguí tocando código siempre con el mismo resultado; luego cargué la plantilla que Beckket porque me gustó como tienes el diseño para ver la apriencia, aunque para mi blog tienen que ser colores distintos. Luego volví a cargar la Mínima Stretch ¡y allí estaban los recuadros de las imágenes! No entiendo nada. No sé muy bien qué hacer por si paso todo lo que tengo en Wordpress al nuevo Blogger en xml y me falla el diseño. He probado también lo que me dices y no me hay ninguna variación, ahora sí que aparecen los bordes y no se modifican en nada, ponga más o menos anchura.
Tu artículo sobre las imágees es genial y el efecto que buscaba es muy parecido al de polaroid.
Gracias por tu ayuda y si se te ocurre alguna idea sobre lo que puede haber pasado sería un alivio.

Responder
JMiur  

Es difícil contestar en abstracto pero ... sigo intentando.

Cuando hacemos un cambio y este no se ve, se puede deber a que el navegador no actualiza la página sino que toma el contenido desde la caché. Por ejemplo, en Firefox, podemos recargar la página con CTRL+F5, forzandolo a ignorar la caché del disco.

Para estar seguro que ciertos cambios están activos, utilizo un método "brutal", bordes gordos, colores chillones, separaciones enormes, cosa de darme cuenta enseguida si se ve o no se ve. Luego, coloco los valores lógicos.

También es útil utilizar las herramientas del navegador, por ejemplo, Ver Código Fuente y copiar el código para experimentar.

Responder
Elianis Guerrero (elianis713_tm@hotmail.com)  

Hola muy buena la informacion de las imagenes del blog... yo necesito ayuda... pero hasta el momento no he conseguido algo que me sirva.

¿como hago para q las imagenes de blog que se abren en tamaño original se ajusten a la ventana?

Por que por ejemplo, cuando publicamos una imagen en el blog, esta la vemos en un tamaño de miniatura, si le damos click en ella abre la imagen en tamaño normal, pero si la imagen es muy grande no se ajusta al tamaño de la ventana. He visto que en muchas paginas cuando uno ve cualquier imagen estas se ajustan al tamaño de la ventana en que se esten mostrando, sin embargo esto no sucede en blogger. ¿Qué se puede hacer para que estas imagenes se ajusten al tamaño de la ventana?

Responder
JMiur  

Vas a tener que aclararme un poco la idea. ¿Cuando hablas de ajustarse a la ventana te refieres al ancho de la pantalla del monitor?

Si ese es el caso, sólo podrá hacerse con alguna rutina de JavaScript que verifique la definición de pantalla que usa el visitante (habrá varias diferentes), cree una ventana y la abra del tamaño adecuado, reajustando el tamaño de la imagen ¿Problemas de esto? Varios. Por ejemplo la proporción ancho/alto de las pantallas no siempre es la misma y la imagen podría deformarse.

Si tienes algún sitio donde hayas visto un ejemplo de lo que quieres hacer, déjame la dirección o envíamela por mail para que se me aclare un poco el panorama.

Responder
ls  

Estaba buscando en tu vasto blog (¿es un blog o una enciclopedia? :D) alguna información para poner imágenes de fondo de la plantilla, y no logro encontrar la info, si es que la hay. Como en este post hacás referencia a "fondos de plantilla" te consulto acá si en algún lugar de esta atrapadora vastedad trataste ese tema, es decir, el de poner una imagen como fondo de la plantilla. Si es así, disculpas por no encontrar el post: si no, ¿alguna sugerencia sobre donde buscar buena información o cómo diablos hacerlo?

Muchas gracias por la ayuda que puedas brindarme y saludos amables.

(Ah: te envié un mail sobre un blog vasco con pop-up; olvidalo, que ya le encontramos la vuelta. Disculpas por las molestias.)

Responder
JMiur  

ls, no es ni blog ni enciclopedia, sólo un cambalache y encontrar algo no es sencillo no siquiera para mi :D

Cualquier consulta, hacela donde quieras, no hay problema.

Para una imagen como fondo de la plantilla.

Deberías aclararme un poco el tema. Básicamente, se utiliza la propiedad background. Algo sobre los parámetros de esta propiedad CSS se explican ACÁ.

¿En qué parte poner el código? Depende de lo que quieras hacer. Por ejemplo, si todo el blog tiene una imagen de fondo la colocás en body. Imaginate que tenés una imagen pequeña que se repite como un mosaico, igual que con un fondo de escritorio.

En la parte de CSS de tu plantilla buscás:

body {
.................. una serie de propiedades
}

y le agregás el fondo:

body {
.................. una serie de propiedades
background: #un_color url(la_imagen) repeat left top;
}

Pero si se trata de algo más concreto, deberías aclararme dónde querés ponerla o que tipo de imagen vas a usar. Podés mandarme un mail sin problemas y lo vemos en detalle.

Responder
ls  

¡Eh! ¡No te metás con la criatura que no es ningún cambalache, o te hacemos el bigote!

Muchas gracias. Precisamente, sospechaste lo que preciso, que es poner una imagen de fondo de todo el blog. Había intendado, alguna madrugada calurosa, algo como lo que amablemente me explicás, pero sin éxito. Hoy persisto en el fracaso: que la variable no está definida, que no chilla pero tampoco se ve la imagen :( ... Capaz que todo se soluciona con esperar al otoño (me miento, lo sé).

En el template que estoy probando el código es:

body {
background:$bgcolor
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Cambio a url_imagen repeat left top; y empieza a chillar o no la muestra. ¿Qué diablos estoy haciendo tan mal? Además de dormir poco, que es otro asunto...

Un apretón de manos, para no pegotear.

Responder
ls  

Sí, también me avegüenza que no me salga bien, pero la intención era pegar el código tal cual está:
: $

Lo siento :$

Responder
JMiur  

Primero que nada, el error más común es que coloquemos la dirección de la imagen equivocada, ya sea porque Blogger no nos la muestra o porque la escribimos mal. Lo ideal para probar subir una a ImageShack, por ejemplo, tomar el enlace directo y pegarlo en la barra de direcciones del navegado. Si si se ve la imagen y no una página, es correcta.

Lo segundo, ya depende un poco de la plantilla que uses.

Los DIVs son rectángulos que se colocan uno dentro del otro, superponiéndose. Si el que está más arriba tiene el mismo tamaño que el que está más abajo, lo tapa. Un ejemplo:

<div> ....... el de abajo (el externo)
<div>
<div> ....... el de adentro (el interno)
CONTENIDO
</div>
</div>
</div>

En cualquier página web, el de abajo de todo, el externo es el BODY y en Blogger, normalmente, hay otro dos bloques:

#outer-wrapper { ................. }
#content-wrapper { ................. }

La propiedad es la misma para cualquiera de ellas. Por ejemplo:

background:transparent url(http://......./nombre) repeat left top

Si no lo conseguís decime donde puedo verlo online o enviame por mail una copia de la plantilla. No es tan complejo como parece y no hay que esperar hasta el otoño :D

Responder
ls  

¡Qué paciencia con mis taras, bigote! Te lo agradezco mucho. La imagen está alojada en ImageShack y, cuando la pego en el navegador, se ve correctamente. Voy a intentarlo de nuevo, ahora que promete viento del sudeste (:$), y espero no tener que volver a molestar con esto. Si logro que funcione antes del otoño, mejor ;)
De paso, esa decisión de Blogger de imponer un límite a las imágenes de header hace perder tiempo inútilmente.

Un eabrazo no es tan pegajoso, así que va.

Responder
JMiur  

Suerte y cualquier cosa, me avisás ;)

Responder
ls  

¡Viento! Saliome :D. Gracias, maestro.
Ahora que el viento viene a favor y más fresco, una molestia más. Si quisiera poner una imagen que no se mostrara como mosaico o repetida sino enterita, ¿el artilugio se complica mucho? Probé con no-repeat, repeat-x, repeat-y, scroll... y no sale. Supongamos, una foto de mi señora madre -o mi vieja-, que no quiero que se repita una y otra vez (dió libre y guarde), sino que se muestre una vez y entera (dió libre y guarde). La guardo como PNG, que me parece mejor y ¿después? ¿Cómo hacer para que la imagen de mi vieja se vea de fondo y no se me repita? (Mal ejemplo me elegí.)

Vamos avanzando -"soy taradaaa?" ;P-. Si avanzo un poco más en sólo dos días, es sólo gracias a tus benditas "complicaciones".
Un abrazo, que refrescó algo.

Responder
JMiur  

Bien hecho :D

Mirá, las posibilidades son estas:

background:transparent url(http://......./nombre) repeat left top;
es el valor por defecto, crea un mosaico

background:transparent url(http://......./nombre) repeat-x left top;
background:transparent url(http://......./nombre) repeat-y left top;
la imagen se repite horizontalmente o verticalmente

background:transparent url(http://......./nombre) no-repeat left top;
la imagen no se repite

El que necesitás es este último.

Fijate que tambien left y top son importantes, son los que determinan desde que parte del rectángulo comienza a mostrarse la imagen. Pueden ser right, bottom o center. O pueden usar pixeles (10px 5px) para ajustes finos o porcentajes (5% 20%).

Como antes, la imagen se verá si es que no hay otro bloque "encima" pero, si ves el mosaico, deberías ver una imagen simple.

Responder
Syl  

Hola de nuevo JMiur! Ya se que esta entrada es bastante vieja, pero es que me veo con el mismo problema del fondo en mosaico, pero con el I Explorer...no hay manera, en firefox se ve perfectamente, pero en IE, haga lo que haga se ve todo blanco, o se ve del color q le ponga, siempre q no le añada lo de
url(http.....)repeat left top;
Ya no se qué mas hacer" Yo no uso explorer, pero mis visitas si, y no me gusta nada ese fondo blanco nuclear....
Gracias de antemano!

Responder
JMiur  

Sly:

Fíjate en las propiedades del body. Dice:

background:transparent url(http://img340.imageshack.us/......jpg)repeat left top;

Entre el cierre del paréntesis y la palabra repeat, debería haber un espacio:

background:transparent url(http://img340.imageshack.us/......jpg) repeat left top;

En principio, eso, solucionaría el problema.

Responder
Syl  

Sí! ese era el problema! bueno antes el problema estaba en que tambien ponia fixed, que he leido por la red que eso no se llevaba bien con el IE, asi que al quitarselo pensaba que se solucionaria, pero claro, no me habia fijado en ese espacio....Que ojo tienes! Muchisimas gracias!

Responder
JMiur  

Me alegro que se solucionar :)

fixed funciona en IE aunque depende de cómo y dónde se coloca.

Responder
Ojos negros  

hola¡¡
escribo aqui para saber si podrias ayudar a solucionar mi problemilla
pasa q ayer le puse una imagen a mi titulo, pero ahora ya no la quiero porque no combina con el blogger y ya no se puede borrar, le doy eliminar imagen y no se deja,y pues quisiera regresar a mi mismo titulo o ponerle otra imagen pero ya modificada que si combina con mi blogger

Responder
Ojos negros  

aaa mi blogger es www.olimpoextraviado.blogspot.com

Responder
JMiur  

Imagino que ya has probado los métodos normales del editor. Si vas a cambiar la imagen, directamente sube la nueva a ver si eso lo soluciona. Obviamente es un error de Blogger.

Si sigue el problema, una posible solución es eliminar el header y volver a poner uno nuevo. Como Blogger no nos permite colocar dos headers, primero, debemos eliminar el anterior.

Si abres tu plantilla sin expandir los artilugios, el header dice algo así:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>

Cambialo así:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='(Header)' type='Header'/>
</b:section>
</div>

Para que luego, nos permita agregar cosas y no esté bloqueado.

Guardas y vas a la primera solapa Agregar Elementos. Vas a ver que ahora, hay una opción de agregar elementos en el header. Haz click en Editar y luego, Borrar Elemento. Con eso, eliminamos el viejo.

Ahora, agregas uno nuevo con Agregar Elemento.

Lamento si es la explicación es un poco confusa. cualquier cosa, si no se comprende el proceso, me avisas.

Responder
Saul Sanchez Toro  

JMiur: Como hago para que la tabla que pongo en el blog se alinee a la izquierda o derecha y el texto aparezca al lado de la tabla y no abajo y arriba?

Responder
JMiur  

Una forma sería colocar la tabla en un DIV, el texto en otro y hacerlos flotar a ambos:

<div style="float:left;"><table ............> ... </table></div>
<div style="float:right;"> ... </div>

Pero depende mucho del resultado que quieras obtener. Tendría que ver el ejemplo para darte más detalles.

Responder
La Gata Bolita  

Buenas! Disculpen me gustaria que me den una ayudita con algo: quisiera saber que tengo que hacer para que las imagenes que inserto en la galeria de mi blog no salten a otra pagina al pinchar las imagenes miniatura sino que floten en la misma pagina de esta forma como las imagenes de esta web: http://mangafront.com/sor-capitulo-15 . Esa es una pagina web pero he visto ese mismo efecto en otro blog (que ya borraron), me gustaria saber si alguien aqui me puede orientar :). Gracias

Responder
JMiur  

Utilizando un script que permita generar ventanas modales. Hay decenas de ellos, aca se muestran algunos.

Responder
La Gata Bolita  

Gracias por la ayuda :3! Aunque aun no entiendo bien el procedimiento para colocar el lightbox2 en mi blog :S... Le coloque algo que encontre en la red y me da resultado pero sin embargo en algunas PC no aparecen las cosas que coloque en las columnas de mi blog tras ello :S... si haces un tutorial paso a paso para supernvatos sobre como colocar lightbox2 en el blog te estaria muy agradecida TTwTT.
Igual muchas gracias :).

Responder
JMiur  

Tendria que saber qué es l oque se ve mal o en que condiciones lo ves mal.

Responder
Charo  

HOLA, he encontrado tu blog gracias a Jabba, me ha dicho que tú me podrías ayudar.
Me gustaría que al cuando alguien clicara en una de las fotos que pongo en mi blog, la pudiera ver más grande ¿cómo se hace?.
Gracias por tu ayuda

JMiur  

En Blogger hay una opción que por defecto está habilitada ya hace justamente eso. Se encuentra en Configuración | Entradas y Comentarios | Mostrar imágenes con Lightbox y debería decir SI.

Si quieres usar algún otro sistema, debe deshabilitar eso y luego, buscar alguna clase de librería de JavaScript para crear ventanas modales. Hay muchas pero yo probaría con el sistema de Blogger a ver si eso satisface tus necesidades.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR