AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Alinear imágenes en una entrada.

miércoles, 30 de abril de 2008

Inés me ha dejado esta consulta en cbox: Quiere que cuando postea imágenes salgan todas de la misma media, independientemente de la que tengan.

Eso se puede hacer, redimensionándolas, con una salvedad: Si la medida que va a usar es superior a la de la imagen, quizás se vea borrosa.

Y como el movimiento se demuestra andando, voy a añadir aquí tres imágenes de distintas medidas. Luego las redimensionaré a la medida de la mediana para que veais e que me refiero.
Al final dejaré el código.

1ª imagen- medidas: ancho (width) 131px, alto (height) 108px.



2ª imagen- medidas: 440 x 440



3ª imagen- medidas: 560 x 420




Voy a colocar las tres de nuevo, todas con el mismo ancho, 440px.








Como puedes apreciar, la más grande se ve nítida, sin embargo la que era más pequeña se ve mal. Se ha pixelado. Al hacerla más grande, lo único que ha hecho ha sido hacer más grandes los cuadritos, (píxels), que la forman. Pero se han alineado.

¿Como hacerlo?
En principio deberías añadir la imagen, en Edición de HTML, desde un servidor, aunque sea el propio blogger, pero no de la forma en que blogger añade las direcciones de las imágenes.

A ver si me explico:
Cuando añades una imagen al blog, por el sistema de pinchar en la foto que vemos encima de donde escribimos, el código de esa imagen es algo así: (codigo de una imagen a la que le hemos dicho que la centre)

<a href="dirección"><img id="BLOGGER_PHOTO_ID números" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="dirección" border="0" /></a>

Y ese el código de una imagen añadida "manualmente" en Edición de HTML (también centrada).

<center><img src="dirección"></center>
El código de blogger es difícil de redimensionar, ya que a menudo blogger ya las redimensiona.

Pero podemos aprovechar la dirección, subiéndola a una entrada "almacén" y copiando la segunda que se ve, (la que he remarcado en rojo).
El código manual es más sencillo. Basta con añadir una de las dos medidas al código, (la otra es automática) para que se vea como queremos.

En el caso que nos ocupa, como lo que queremos que sea igual es el ancho, el código a añadir sería este, (pongo el de las imágenes que veis, tal como lo he escrito):

<img width="440px" src="dirección">
Yo no las he centrado, por eso no lo pongo aquí.

Si quieres escribir al lado, a ese código le añades el FLOAT, con lo que quedaría así: (te pongo el código de la que ves, alineada a la izquierda para poder escribir a su lado y redimensionada).


<img style="FLOAT:left" width="232"
src="dirección">

Como puedes comprobar, funciona.

Imprime esta entrada

5 comentarios. ¿Quieres añadir el tuyo?

  1. Inés ha dicho
  2. Hola Eulalia, ante todo muchas gracias por responder tan rápido y tan claramente.

    Ya he aprendido a alinear las imágenes (sería más fácil desde un servidor ajeno, pero ya sé cómo se hace desde blogger).

    El único problema que le encuentro a hacerlo así, es que aunque mi imagen 'vertical' tenga suficiente resolución como blogger te las redimensionas, cuando copias la "dirección2" aparece pixelada siempre. Y eso es un rollo. No sé si tendría que subirlas todas antes a otro servidor. Que es lo que yo quería evitar, pero bueno.

    En cualquier caso, muchas gracias.
    ¡Un saludo!

  3. Eulalia ha dicho
  4. Inés: La solución a esto es acceder a la imagen original en el album de blogger en Picasa.
    En esta entrada explico como acceder.
    Allí tienes un álbum con todas las imágenes que hayas subido al blog.
    Pincha en la que quieras poner y se abre en una página ella sola. Pinchándola con el botón derecho verás la dirección de la imagen real, en su tamaño original.
    Saludos.

  5. Christine Torres ha dicho
  6. Gracias por compartir con nosotros, creo que este sitio web realmente se destaca

    Medical Health Information Resources
    Medical Information

  7. MEX_LABONITA ha dicho
  8. Hola Eulalia, me gusta mucho tu blog, son muy buenos tus consejos, yo tngo un blog que he ido creando poco a poco el enlace es http://mexlabonita.blogspot.com.es/

    Me gustaría que me ayudases (si puedes claro) en un tema que ando detrás de él. Si te metes en la página web de Lovelypepa una bloguera su enlace es http://lovely-pepa.com/ , veras en el apartado del menu categorías-looks salen todas las imágenes que ha ido publicando cada año.

    Me gustaría que me ayudases a poder poner las imágenes como lo tiene ella (como una plantilla),correspondientes a cada año y enlazadas a sus entradas publicadas. Mi correo electrónico es mexlabonita@gmail.com

    Muchas gracias por todo amiga!!!

  9. Eulalia ha dicho
  10. MEX_LABONITA:
    Le he echado una ojeada a la página que me enlazas y veo que es una plantilla de página web, no de blog. No se si eso se puede hacer en un blog de los nuestros.

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.