Imágenes, tablas y vídeos adaptables para eso del responsive | Oloblogger Este es un truco sencillo con el que completar nuestra plantilla elástica (adaptable, responsive, se...

4 de diciembre de 2012

Imágenes, tablas y vídeos adaptables para eso del responsive

Este es un truco sencillo con el que completar nuestra plantilla elástica (adaptable, responsive, sensible o como demonios se llame...), de manera que no sólo las columnas vayan cambiando de ancho a medida que ampliamos o disminuimos la ventana, sino que también lo hagan las imágenes e incluso los vídeos que dichas columnas contengan.

El texto es lo único que se adapta automáticamente sin necesidad de incluir código extra, pero para otros elementos sí que necesitamos añadidos. Además -para no variar- cada navegador se comporta de manera algo distinta así que a veces resulta algo difícil dar con la tecla de qué es lo justo y necesario que hay que añadir para que todo vaya bien.

Lo siguiente es lo que yo uso con un buen resultado desde hace tiempo en distintos navegadores. Sin embargo, como no he podido comprobar todas las versiones espero que el que tenga otras distintas de Chrome23, Firefox16 o IE9, se manifieste al respecto.



Lo más fácil son las imágenes aisladas y con ese adjetivo me refiero a las que no tienen pie de imagen. Sólo hace falta buscar el contenedor de las entradas (en Blogger generalmente .post-body) y añadir en nuestro CSS estas declaraciones:

.post-body img {
max-width: 100%;
width: auto;
height: auto;
}

Para salvar que Blogger inserta código extra al subir una imagen desde el editor y que lo anterior pueda no funcionar, los que usamos esta plataforma añadiremos también el selector .separator. Además, para evitar que ese margen a izquierda y derecha que igualmente inserta el editor, nos pegue totalmente la imagen a la derecha al reducirla, mi opción es sólo ocupar una parte del total. En concreto el 94% que vi que quedaba bien:

.post-body img, .separator a {
max-width: 94%;
width: auto;
height: auto;
}


Haz más pequeña tu ventana actual para ver el resultado con esta imagen. Con los siguientes elementos que encontrarás avanzando en el post también podrás probar.



Aquí se puede comprobar que una imagen con float también se adapta cuando el texto circundante ya no cabe en el ancho disponible.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare pretium metus, a ornare diam interdum id. Aliquam euismod consectetur libero, non interdum enim fermentum eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque magna libero, sollicitudin vitae viverra venenatis, varius vel sapien. Aliquam euismod nulla id tellus laoreet nec ornare tellus tempus. Aenean aliquam bibendum metus nec auctor. Curabitur adipiscing tellus facilisis tortor adipiscing a posuere sem mollis.



Al principio no hablé de las tablas, pero también podemos hacer que se adapten a su contenedor. Además, en Blogger las imágenes con leyenda van dentro de estos elementos por lo que si no queremos que estas escapen de nuestro control, también las tenemos que formatear.

En general será suficiente con usar el primer selector, pero una vez más, en esta nuestra amada plataforma tendremos que añadir el segundo por lo ya comentado de que hacen un poco lo que les da la gana:

.post-body table, table.tr-caption-container img {
width: 100%;
border-collapse: collapse;
}

Pie de imagen de una bonita idem



Y para terminar un truco ingenioso que vi en A list apart y que sirve para poder redimensionar automáticamente vídeos, lo más complicado de todo.

El problema radica en poder mantener la proporción, porque si bien con el ancho se puede hacer lo mismo que con las imágenes, el alto se resiste a seguir la pauta.

A diferencia de los anteriores, este sistema requiere añadir un par de cajas manualmente a la que forma el vídeo, pero merece la pena hacerlo si incluyes vídeos en tu entradas de forma esporádica para tener un diseño totalmente elástico... o como sea.

Ese extraño 56,25% en el padding-bottom es para guardar la proporción 16:9 (divídanse ambas cifras en orden inverso).

.video-wrapper {
width: 600px;
max-width: 100%;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<div class="video-wrapper"><div class="video-container">
CODIGO IFRAME U OBJECT
</div>
</div>

Con iframe:


Con object (código antiguo YouTube):

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

29 comentarios :

  1. Quiero saber como hago para que algunos post no se vallan a la pagina principal lo que sucede es que tengo un blog que habla única y exclusivamente para las aplicaciones online (Tv Online, Editores de fotos y video Online, medidores de velocidad a conexion en internet Online, etc) esos son los que quiero que estén en la portada, pero tengo otros temas de interés que no quiero que se vallan a la pagina principal, yo tengo todos mis post ordenados con una etiqueta especifica pero el problema es que se van a la pagina principal, los cambio por una fecha mas antigua y me aparecen en entradas antiguas y yo no quiero eso, conoces algun truco para ese caso ??

    ResponderEliminar
    Respuestas
    1. No. O se ven o no se ven, pero no existe otra opción. Si no los quieres en portada sólo te queda pasarlos a fechas anteriores tal y como hiciste, pero eso se los lleva a entradas antiguas. No podría ser de otra manera.

      Eliminar
  2. ¿Y eso qué tiene que ver con esta entrada?

    ResponderEliminar
  3. baahhhh es una simple pregunta, no sabia que los justicieros de post existian.

    ResponderEliminar
  4. Buenas,

    quería saber cómo puedo insertar una imagen dentro de mi blog. Antes al pinchar en insertar imagen, directamente buscaba la dirección donde tenía ubicada la imagen y la abría y ya estaba insertada, pero ahora cuando hago click en insertar imagen me da las siguientes opcioines : Desde este blog, from your phone, from your webcam ó desde un URL. qué tengo que hacer ? cómo puedo insertar la imagen ? donde tengo que poner la imagen para poder insertarla en mi blog ??
    Espero que me ayudéis.
    Gracias.

    ResponderEliminar
    Respuestas
    1. No te aparece la pocion de subirla? lo que puedes hacer es subir tu imagen imagenshak.com y ai mismo te da una url de ea imagen con el formqato q tu kieras y todo pero igual es algo raro.. spero haberte ayudado Beso ♥

      Eliminar
    2. Lo primero es desaconsejar a María que suba las imágenes a ImageShack. A mí me ha dejado colgado alguna que otra vez.

      Para mí lo mejor es subirlas desde el disco duro a Blogger y así se almacenan en Blogger. Bueno, realmente en Picasa que a fin de cuentas es de la misma empresa (Google). Aquí uno de los motivos por lo que me lo parece, al margen de que si Google peta, que perdamos las imágenes será el menor de nuestros problemas.

      Y ahora para Jose María. No he visto esas opciones que dices ¿desde qué parte estás intentando subir la imagen? ¿Escritorio, editor entradas, gadgets...?

      Eliminar
  5. Hola!! soy supernovatilla en esto y no entiendo na de na....pero bueno, gracias a tu entrada sobre los comentarios he podido poner la opción de responder así que gracias! Ahora mi problema es que algunas imágenes me las sube del revés cuando las tengo guardadas derechas. Las he vuelto a editar y nada, siguen del revés. ¿Qué es lo que falla?

    ResponderEliminar
    Respuestas
    1. ¿Qué quiere decir al revés?
      a) En orden distinto a como las subes cuando son varias
      b) Cabeza abajo
      c) Giradas 90º
      d) Volteadas de manera que se ve el dorso
      e) Otros

      :)

      Eliminar
  6. Gracias me sirvió de mucho este tutorial!!!

    ResponderEliminar
  7. Hola amigo. ¿Cómo identifico el contenedor de entradas? En mi plantilla hay muchos .post-body.

    ¿Y hay alguna manera de forzar la adaptabilidad del blog a todos los navegadores y tamaños?

    Hay personas que usan su navegador con la vista al 100%, otros menos. Es allí cuando a veces no solo las imágenes, sino los menús, gadgets y todo lo demás se ve "revuelto", unas cosas encima de otras.

    ResponderEliminar
    Respuestas
    1. .post-body es el el contenedor general, el selector que contendrá el contenido de cada post.

      Luego verás .post-body img y otros similares pero esos se refieren a ciertos tipos de elementos dentro de las entradas. En el ejemplo último, las imágenes.

      Eliminar
  8. Hola Maestro! Necesito de tu ayuda! tengo un blog que utilizo para publicar mis notas -www.afnotinet.blogspot.com.ar- y quisiera saber como quitar el dominio ".ar" y como eliminar de mi plantilla unos gadget que no quiero utilizar. Ingreso a mi escritorio, pongo configuración y no me aparece ni plantilla ni diseño. Por lo tanto no puedo añadir un nuevo gadget ni quitar. Tendrá que ver con el nuevo diseño. Utilizo Chrome com navegador -por las dudas influya- y noté que me no tengo acceso como antes después que le puse un dominio de mi país .ar, no se si tiene que ver. Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola

      Lo del dominio es sencillo. Sólo tienes que usar el script que figura al final de esta entrada, pero lee antes el resto de intrucciones.

      Y lo otro no es normal. Al entrar a http://blogger.com y acceder al blog, tienen que salirte a la izquierda esos dos enlaces: plantilla y diseño. Con el nuevo editor no hay cambios sobre eso.

      Eliminar
  9. Gracias Maestro!! Me diste una buena guía! Curiosamente abrí un blog nuevo y puedo acceder a Diseño, plantilla, pero tuve que abrir uno nuevo que utilizo para publicar is fotos. Pero el otro, todavía no pude hacer nada porque lo abro desde el escritorio y no me aparece la opción de poder a Diseño porque no me aparece! Igual muchas gracias por la respuesta y te felicito por este blog tuyo que es de mucha ayuda y uno aprende muchos trucos que no los tiene en cuenta. Me encanta este blog porque es defácil lectura y entendimiento, muy didáctico. Felicitaciones!

    ResponderEliminar
    Respuestas
    1. Gracias, pero sigue siendo muy raro eso de que haya opciones de Escritorio que no te salgan. Ahora se me ha ocurrido una posible causa y es que quizás esté dado de alta con otro usuario. Si usas varios prueba con otro y si es eso entonces autoriza a tu otro usuario como administrador.

      Eliminar
  10. Yo kiero saber como subir videos imagenes ayudemen

    ResponderEliminar
    Respuestas
    1. En el editor de entradas tienes un icono para subir a un post, cualquier vídeo que tengas en tu disco duro.

      Eliminar
  11. Buenas tardes y ante todo felicidades por toda la ayuda que como veo se presta aquí, he utilizado muchos de los trucos que aquí se publican y la verdad es que me ha ido muy bien. Hoy me ha surgido una duda que me gustaría aplicar a alguno de mis blogs, yo me preguntaba si sería posible crear que al pinchar una imagen del blog surgiera una ventana emergente donde se pudiera leer información acerca de esa imagen, para después poder cerrarla con su x correspondiente.. Muchas gracias de antemano y nuevamente muchas felicidades por este gran lugar.

    ResponderEliminar
    Respuestas
    1. Hola. Lo de pinchar no lo veo, porque normalmente las imágenes tienen un enlace que o bien llevan a otra dirección o bien permiten que la imagen se vea ampliada (lightbox). Quizás lo más práctico sería que al pasar el puntero por encima mostraran esa información. No he publicado nada que funcione exactamente así, pero sí un par de posts con el código fundamental para lograrlo.

      Este sería uno de ellos y este el otro.

      Estas otras serían otras ideas más sofisticadas ;)

      Eliminar
  12. como hago para poner un video sobre una imagen por ejemplo una imagen de un marco y dentro de este el video, me dijeron que tengo que sobreponerlo en una tabla para que parezca flotar sobre la imagen, pero no se como hacerlo.

    ResponderEliminar
  13. Hola, era justo lo que buscaba, y me fue de mucha utilidad.

    ResponderEliminar
  14. Hola! Cuelgo vídeos de Youtube desde insertar HTML pero necesito que se me optimicen para móvil. Cómo lo hago? El código que pones no entiendo dónde tengo que insertarlo... Gracias

    ResponderEliminar
    Respuestas
    1. Las reglas CSS (.video-wrapper { width: 600px;max-width.... etc.) las tienes que poner en tu plantilla, en la parte de estilo, al final por ejemplo de las otras que tendrás. En Blogger sería antes del cierre de la etiquetas SKIN.

      La segunda parte iría dónde pongas el código del vídeo que te da YouTube, en una entrada, en la barra lateral, etc. Sólo escribe ese código y dónde pone "CODIGO IFRAME U OBJECT" sustituyes esas palabras por el código de insertar de YouTube.

      Eliminar
  15. Hola, muy útil, pero no encuentro el contenedor de entradas (.post-body)

    ResponderEliminar
    Respuestas
    1. No lo tienes que encontrar, sólo añadir lo que se indica en tu CSS.

      No obstante, puede que en tu blog utilices otro nombre para la clase que controla el cuerpo de los posts. Lo más normal es que se llame .post-body, pero si en tu caso está nombrada de otra manera sólo tendrás que cambiar .post-body por la tuya.

      Eliminar
  16. Hola, tengo una tabla que se adapta al ancho de pantalla, pero no se como puedo hacer para que al dar clik en la imagen de la tabla de imágenes (galería) cada imagen se adapte al ancho de la pantalla. Tienes alguna sugerencia?

    ResponderEliminar
    Respuestas
    1. ¿Lo que quieres es que al pinchar en una imagen de la galería, esta se haga más grande? Quizás lo que pasa es que no te funciona el LightBox de Blogger (ver punto 5).

      Eliminar