29 enero 2008

Ampliar una imagen en Blogger.





Blogger permite la publicación de imágenes en tres tamaños: pequeño, mediano o grande, siendo el tamaño del lado más largo 144, 288 y 400 px respectivamente, siendo este último el que se ha utilizado para subir esta imagen.

Se puede cambiar el tamaño pero para ello tenemos que modificar el código html. Aquí os describo un modo de hacerlo:

1.- Crear la entrada y subir la imagen del modo habitual.

2.- Cambiar el modo de edición a HTML, veremos un código como el del cuadro.



3.- Donde se define el estilo de imagen [img style] y tras las comillas se copia y pega el código siguiente:



sustituyendo mmm por el valor del ancho deseado y nnn por el alto en pixeles, teniendo en cuenta que estos valores deben guardar la relación ancho/alto de la foto original y que no debemos superar el ancho de la side bar principal para no descolocar los elementos del blog.

4.- Por último, hemos de evitar la pixelación de la imagen debida al aumento de tamaño de la misma. Para ello, hemos de tener en cuenta que Blogger aloja las imágenes subidas en álbums web de Picasa, guardando cada una en cuatro tamaños, miniatura 144 px, pequeña 288 px, mediana 400 px y grande 800 px.

Así, lo que tenemos que hacer es cambiar nuestra referencia de la imagen por otra de mayor tamaño sustituyendo en el código html /s400/ por /s800/, el enlace a la imagen se encuentra dentro del código [scr=""], justo antes del nombre del archivo.

5.- El código, para esta imagen, cuya relación ancho alto es de 4:3 subida a 400 px de ancho y 300 px de alto que se quiere ampliar a 560 pixeles de ancho y 420 de alto, sería:



La foto quedaría así:


Nota: en el paso 3 suele bastar indicar sólo el ancho de la imagen, con lo que se evita así realizar cálculos para determinar el valor del alto de la imagen a partir de la relación entre las dos dimensiones.


Post revisado el 21/11/2009.

43 comentarios:

  1. muy buena explicación, sencilla y muy util...
    felicidades por tu blog, muy bueno!

    ResponderEliminar
  2. Me alegra que este post te haya sido de utilidad y más aún que te guste el blog.

    ResponderEliminar
  3. Utilísimo para nosotros los blogueros que estamos sujetos a los estrictos cánones del blog...fenomenal tu página...azpeitia

    ResponderEliminar
  4. Muchas gracias, no he conseguido ampliar las fotos hasta que no he leido esto, saludos cordiales

    ResponderEliminar
  5. A Azpeitia y Catalá:

    Me alegra de que esta entrada os haya sido de utilidad.

    Un saludo y muchas gracias por vuestros comentarios.

    ResponderEliminar
  6. hola, esta bueno el aporte, pero lo que yo deseo es lo siguiente: que al hacerle doble click la imagen se amplie en una ventana nueva "pero" del tamaño de la ventana y no como suele suceder al tamaño real. Algo asi como el buscador de imagenes del google que encaja o reduce las imagenes grandes en una ventana nueva y aparece el cursor con un simbolo (+) o (-)

    ResponderEliminar
  7. Petroperu,

    Lo que expones en tu comentario es una pega y una incomodidad a la hora de visualizar las imágenes, coincido con tu comentario.

    Las soluciones que se me ocurren es redimensionar las imágenes a un tamaño inferior a la resolución del monitor antes de subirlas a Blogger o bien cambiar el enlace de la imagen de modo que te aparezca la misma pero en el álbum web de Picassa, que es donde se almacenan las imágenes subidas.

    ResponderEliminar
  8. Muchisimas gracias por esta entrada, yo no sé cuanto tiempo llevaba para poder agrandar las fotos y que me quedasen bien encajadas en el blog, la explicación es perfecta para los no entendidos como yo.

    Saludos

    ResponderEliminar
  9. ¡Hola!
    Podeis probar el editor off-line Windows Live Writer.

    Lo uso desde hace algun tiempo y me va de fábula. Con él puedes hacer las fotos del tamaño que te plazca, además de que las aloja automáticamente en picasa.

    ResponderEliminar
  10. Hola Ángel:

    Muchas gracias por tu aportación, ya he probado esta herramienta para publicar en el blog y efectivamente es como comentas, y además puedes poner marcos y efectos de sombra a las imágenes.

    Fantástica recomendación.

    Un saludo.

    ResponderEliminar
  11. Genial tío, las vueltas que habre dado por ahí hasta llegar a ver esto.
    Por cierto, la foto de Segovia es buenisima, estuve por allí antes del verano y no fuí capaz de hacer una foto que realmente me gustara, esta es fantastica

    ResponderEliminar
  12. A Pablo y Trotamundos:

    Me alegra que os haya sido útil, no obstante os recomiendo que probéis el editor Windows Live Writer del que Ángel nos hablaba.

    Pablo:

    Gracias por tu valoración de la foto de Segovia, la verdad es que tuve suerte con la niebla.

    Trotamundos:

    Mis disculpas por haber contestado a tu comentario antes.

    Saludos.

    ResponderEliminar
  13. Genialll...me ha ayudado mucho...

    Gracias

    ResponderEliminar
  14. Gracias César por tu comentario y por haberte convertido en un seguidor del blog, en cuanto pueda te devuelvo la visita.

    Un saludo.

    ResponderEliminar
  15. Claro y muy útil. Se agradece que lo compartas.

    ResponderEliminar
  16. De nada. Me alegra que te haya sido de utilidad.

    Saludos.

    ResponderEliminar
  17. Necesito ayuda, en mi blog al darle doble click a las imágenes no se amplian! Gracias!

    ResponderEliminar
  18. Noe,

    no sé como ayudarte, lo único que se me ocurre es que hayas modificado la plantilla original y eso halla afectado a las imágenes.

    Por cierto, unos trabajos muy interesantes los que muestras en tu blog.

    Un saludo.

    ResponderEliminar
  19. He mirado decenas de "explicaciones" para aumentar el tamaño de las fotos y ésta ha sido la única que está correcta.

    ¡¡¡ Muchas gracias !!!

    ResponderEliminar
  20. Tengo un blog de dibujos y hacía mucho que buscaba la forma de ampliar el ancho de las imágenes en las entradas. Muchísimas gracias. Didáctica y perfecta explicación. Lo que han dicho los demás comentaristas, es cierto, y yo lo reafirmo en todos los casos. Además, considero que tienes unas excelentes dotes de maestro.

    Me sumo como seguidor a tu blog, te lo mereces por la calidad que tiene y sobre todo por lo útil que es. Mucha suerte en todo.

    ResponderEliminar
  21. Observatorio Montaña Blanca y Elio Milay:

    Sois muy amables con vuestros comentarios y me alegra que os hayan sido de utilidad.

    Elio, ahora espero ser yo el que responda a tu interés en este blog y me anime a publicar y a responder a los comentarios con más asiduidad.

    Te devolveré la visita.

    Saludos.

    ResponderEliminar
  22. Antonio!!! muchas gracias por la explicación, me queda muy claro todo, pero en la práctica no las puedo ampliar porque se salen del área del blog y sólo se ve un fragmento de la foto...me podrías decir cuales son los valores máximos que puedo utilizar tanto de ancho como de alto...muchas gracias, un abrazo!!!
    Enrique M. R.
    www.conceptomigranas.blogspot.com

    ResponderEliminar
  23. Hola Enrique,

    El valor máximo que puedes utilizar es el del ancho de la barra principal. Aunque he de decirte que en el caso de tu blog las imágenes ocupan ya todo el ancho de la barra. Si quieres fotos más grandes tendrás que utilizar otra plantilla.

    Por cierto, presentas unas imágenes muy interesantes.

    Un saludo.

    ResponderEliminar
  24. Muchas Gracias Antonio!!!

    Me da gusto que te agrade parte de mi trabajo personal...no quisiera abusar de tu ayuda pero...tengo otra pequeña dudita, espero me pudieras asesorar un poco.

    Si viste en el blog tengo unos links que te llevan a distintos aspectos de mi trabajo (Documental, Aruitqectura y Paisaje/Promocional, etc) lo malo es que cuando les da uno click, abren una ventana adicional...odio que haga eso, odio llenar de ventanas mi ordenador...será que pueda cambiar eso y navegar por el blog en una misma ventana???

    Muchísimas gracias por tu apoyo y te felicito por tu blog,,,cualquier cuestión en mi blog encuentras mi mail.

    un abrazo!!!
    Enrique Moreno R.
    www.conceptomigranas.blogspot.com

    ResponderEliminar
  25. Hola de nuevo Enrique:

    Me temo que esta vez no te puedo ayudar con las ventanas. De todos modos creo que eso no puede hacerse en los enlaces de la barra lateral, aunque si en las entradas utilizando el editor html.

    Un saludo.

    ResponderEliminar
  26. Gracias gracias!!Por fin he visto un poco la luz con este tema...he hecho pruebas y creo que ha salido tal y como andaba buscando...lo que sí queria saber es,si para cada foto que se suba al Blog hay que seguir estos pasos??No estoy nada puesta en lenguaje HTML,pero mi pregunta es si no se podría cambiar el el código,para que cuando se suba la foto ya salga el tamaño mayor!?No sé si me he explicado,...De todas maneras gracias por tu explicación!
    Agur!
    Itzi

    ResponderEliminar
  27. Hola itzi:

    Me alegra que te haya sido de utilidad, respecto a tu pregunta no puedo ayudarte. Seguro que algo puede hacerse o hay plantillas preparadas para publicar fotos en otros tamaños. Por poner un ejemplo, estoy haciendo pruebas con una de Dante Araujo donde las fotos se suben a un tamaño diferente y además con un click se amplían en la misma ventana: Álbum De Fotos.

    Un saludos y felices fiestas.

    ResponderEliminar
  28. Muchas gracias por esa publicación, ya me tardaba poder ampliar mis fotos! Sin abusar de tu ayuda, tengo una pequeña duda:

    compara mi blog (http://vida-en-obras.blogspot.com, con éste http://sharedcloset.blogspot.com)

    En el mío podrás observar que los márgenes entre foto/datos personales y demás, son muy estrechos, y esto hace que cuande amplie la foto, solo salga la mitad de ella.

    ¿Sabes como podría hacerlo para que mis fotos sean grande y se vean enteramente, y que mi página se vea más espaciada (es decir, con todo el apartado de los datos personales completamente a la derecha)?

    Gracias por tu ayuda!

    ResponderEliminar
  29. Vida en obras:

    De nada, respecto a tu consulta decirte que está relacionada con la plantilla que utilizas y el ancho del cuerpo de la misma.

    Así que, o bien cambias de plantilla o intentas modificar los anchos de la tuya. Te remito a un artículo del blog de ayuda "El escaparate de Rosa" donde podrás encontrar la solución:

    http://elescaparatederosa.blogspot.com/2007/11/ensanchar-la-plantilla-mnima.html

    Suerte y te felicito por tu blog.

    ResponderEliminar
  30. genial este es el truco que tanto andaba buscando muchísimas gracias amigo!!!!

    ResponderEliminar
  31. 馬丁:

    Pues muchas de nada, espero que le saques buen partido.

    ResponderEliminar
  32. muuuchas gracias!! Muy útil y bien explicado!! :)
    Os invito a mi recién estrenado blog:
    http://aduanerosinfrontera.blogspot.com/

    Un abrazo

    ResponderEliminar
  33. Xabi:

    De nada, me alegra que te sirva este truco. He visitado tu blog y lucen muy bien las fotos ajustadas al ancho de la columna principal.

    Ánimo con tu aventura.

    ResponderEliminar
  34. Hola Antonio, muchísimas gracias ! contentísima con la sencilla explicación. La de horas que he pasado con el tema sin ningún resultado claro hasta ahora...

    Saludos cordiales !

    María José
    www.interior-es.blogspot.com

    ResponderEliminar
  35. María José:

    Me alegra que este post te haya resultado de utilidad.

    Por otra parte, tienes un blog muy elegante, aunque sus contenidos se alejan un poco de mi presupuesto.

    Un saludo.

    ResponderEliminar
  36. Tenemos un problema cuando publicamos una imagen en la tapa del blog se deforman como podemos hacer para que esto no suceda más?

    http://www.radioe99.com/

    ResponderEliminar
  37. @Mariano Cruz Liberatti

    Mis disculpas, acabo de leer el comentario.

    La solución a tu problema pasa por redimensionar la foto al tamaño del ancho de la cabecera y después subirla.

    Un saludo.

    ResponderEliminar
  38. I love defotosyotros.blogspot.com! Here I always find a lot of helpful information for myself. Thanks you for your work.
    Webmaster of http://loveepicentre.com and http://movieszone.eu
    Best regards

    ResponderEliminar
  39. What i discover troublesome is to discover a weblog that may seize me for a minute but your blog is different. Bravo.

    ResponderEliminar
  40. Gracias, para los que empezamos con esta herramienta, esta bien encontrar explicaciones sencillas y útiles...

    ResponderEliminar
  41. Hola amigo me sirvió tu explicación, el antes y después del código es genial. Una pregunta aparte, como hiciste para colocar el codigo css en esas ventanas ampliables y muy bistosas?

    Saludos!

    ResponderEliminar
    Respuestas
    1. Hola, me alegra que te haya servido este post de utilidad.

      Para crear las cajas de texto tienes que utilizar el elemento HTML "textarea" indicando las dimensiones del cuadro. Yo he utilizado un ancho de 460 píxeles. Si el texto ocupa más espacio aparecerán las flechas verticales.

      Un saludo.

      Eliminar
  42. This is to inform the general public male or female who are healthy and 100% serious about selling their kidney should contact Dr mercy
    Hospital as soon as possible.
    E-mail: drmercyhospital686@gmail.com
    we have a lot of patients who currently need kidney transplant., are you looking for an opportunity to sell your kidney for money due to financial break down and we will buy your kidney for the sum of 800,000 euros for kidney.
    And we also have HIV / cure, if you need cure also
    And if you need a sperm to buy,
    You want penis enlargement too you can email us now,
    EMAIL: drmercyhospital686@gmail.com
    WhatsApp: +2348100367800
    whatsapp +491639478840
    Sincerely,
    Dr. mercy hospital

    ResponderEliminar

Si el artículo ha sido de tu agrado, ¿por qué no lo comentas?
Y si no te ha gustado, ¿por qué no lo comentas?
¡Gracias por dejar aquí tu tiempo y tus palabras!