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, sensible o como demonios se llame...), de ...

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.

Compartir
Copy URL

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

follow us in feedly

60 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
  17. Olo, aquí en confianza...
    Que ya te sigo aunque no comente desde hace mucho y primero darte las gracias (offtopic)
    Y segundo, como puedo hacer para que una inserción de google maps sea responsive? y como no sé si me he explicado bien, te dejo el link.

    http://www.kes-kia.fr/2014/04/san-juan-de-gaztelugatxe.html

    Gracias

    ResponderEliminar
    Respuestas
    1. Gracias Kes Kia ;)

      Como el código de Google Maps es un iframe, bastará con que uses el código que doy para vídeos; ese que aparece en el último apartado del post.

      Eliminar
  18. Oloman esto esta muy bueno, pero me hace falta algo aparte de esto, ya en mi pagina todo se adapta a cualquier pantalla excepto el slider que tengo en la pantalla de inicio, sera que hay una forma de adaptar los sliders?

    ResponderEliminar
    Respuestas
    1. Para los sliders no hay una forma genérica Kehu. Simplemente o son adaptables o no lo son. Depende de cómo fueron programados, así que si te interesa uno con esta característica deberás buscar otro que sea RWD.

      Eliminar
  19. tu codigo funciona y hace elasticos los videos en los dispositivos, pero ojo que tu codigo no lleva el centrar los videos y salen a la izquierda en los blogs, para centrarlos añadir en el codigo seguido de 560px esto: display:block;margin:0 auto;

    Imagino que lo sabias porque los tuyos estan centrados, pero me he vuelto loca para centrarlos yo en mi blog, los detallitos cuentan...

    ResponderEliminar
  20. 560px no, perdon 600px en el comentario de arriba.

    ahh!! y otra cosa si los videos dentro de un post del blog no tiene como medida width: 600px que es lo que tú Oloman has puesto en el codigo css, y tiene otro width: diferente no funciona, tienes que poner en el width: medida que cada uno le hemos dado en los post para insertarlos, en mi caso yo siempre los pongo a 480px, y claro con 600px no funcionaba, solo hice que cambiar esa medida y voila! funciono. Gracias por cierto por toda tu ayuda siempre saludos cariñosos

    ResponderEliminar
    Respuestas
    1. Es como dices en-rHed-ando.
      Sólo pretendía explicar cómo hacerlos adaptables y por eso no incluí más detalles (que podrían haber sido muchos), pero muchas gracias por dejar constancia en los comentarios para otros que puedan venir detrás ;)

      Eliminar
  21. Muy buenas Oloman!
    haber si me puedes ayudar ya que hace poco le puse a mi web una plantilla responsive, concretamente una llamada FAST EDITION pero si bien hay partes como las imagenes y algunos textos que en pantallas de moviles no se adaptan como debería al ser responsive.

    He seguido algunos consejos tuyos como poner "ax-width: 100%;
    width: auto;
    height: auto;" después de POST-BODY pero nada sigue el texto viendose ancho y las imágenes....


    estoy bloqueado... mi web es www.pluginsxbmc.com

    gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Ahora mismo lo he comprobado y las imágenes veo que se adaptan perfectamente.

      Eliminar
  22. Hola, buenas tardes. Lo primero de todo agredecer la grandisima ayuda que ofreces y despues comentarte un problema que me surge y es que cuando entro a la pagina principal si funciona el video responsive pero cuando le doy a entradas antiguas no funciona. ¿ Porque? ¿ Tiene soluccion? Por favor ayuda

    ResponderEliminar
    Respuestas
    1. ¿Me indicas la dirección dónde puedo ver eso? Tienes muchos blogs en tu perfil y en los 4 ó 5 que miré no vi nada de vídeos adaptables. De todas formas quizás te interese este otro post.

      Eliminar
  23. Muy importante, si quieres que tu plantilla sea 100% responsive. Me ha servido un montón los códigos, muchas gracias me has solucionado otra de las tantas dudas que no era capaz de solucionar. :D

    ResponderEliminar
  24. Hola: Tengo una plantilla cuya versión para móvil no permite hacer zoom con los dedos para ampliar el contenido. ¿Es alguna característica que tocar en la misma? Gracias de antemano. http://clasespatinajemadrid.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Bueno, en un principio no observo que tu blog sea adaptable, pero puedes probar a poner tras el <head> una línea como esta:
      <meta content='width=device-width,initial-scale=1.0,user-scalable=yes' name='viewport'/>

      Eliminar
  25. Saludos Oloman,

    No se si sea esta la entrada pero igual te comento: en mi blog ganaconwally.com tengo autorizado o predefinido que solo se muestren 5 post o entradas, igual lo hice para los mas leidos. Al final de las entradas(5) predefinidas queda un espacio en blanco sin usar antes del final de la pagina, cosa que no veo bien esteticamente. ¿hay alguna forma de solucionar esto? Intente aumentando el numero de entradas permitidas pero aunque le doy mas de 5, me sigue mostrando las 5.

    Bendiciones

    ResponderEliminar
    Respuestas
    1. Walberto, tras las entradas (Lo más leído) no hay ningún espacio en blanco, sino un anuncio y después Etiquetas y Archivo del blog. No entiendo cuál es el problema.

      Eliminar
  26. Hola gracias por responder, es que miraste la parte derecha, me refiero a las entradas que están en la parte izquierda de la pantalla, debajo de esas entradas hay un espacio en blanco grande. Si bajas hasta archivo del blog, es el espacio en blanco que esta justo al lado izquierdo de los archivos.

    ResponderEliminar
    Respuestas
    1. Ahora sé a qué te refieres, pero eso es simplemente una "nada". No hay nada ahí y es lógico que se muestre en blanco. Programa una entrada más o dos y se rellenará.

      Eliminar
    2. Ya lo hice, programe dos entradas mas pero me sigue mostrando solo cinco.

      Por otro lado, tu que eres el hombre de los trucos, ¿hay alguna forma de compartir mis entradas a todas mis comunidades con un solo click? y así evitar compartir de una en una.

      Eliminar
    3. No digo que publiques dos entradas más, sino que edites el gadget "Entradas del blog" desde Diseño y que programes que se vean 2 entradas más de las que tienes ahora mismo. Debes tener 6 y para que se llene más ese hueco deberías poner al menos 8. Otra solución es quitar algún gadget de la barra de la derecha.

      Con respecto a lo de compartir masivamente tendrás que recurrir a aplicaciones de otros, como Hootsuite y similares.

      Eliminar
    4. Que pena insistir, pero fue lo que hice desde un principio, editar el gadget de entradas del blog, actualmente solo se ven seis, pero en la edicion desde el gadget de entradas programe para que se vean 8 y solo se ven 6. Se podra hacer algo por html? La otera opcion de quitar gadget no la veo pues preciso no tengo casi, los que tengo son los que necesito.

      Eliminar
    5. ¿Usas esto? Fíjate en el apartado "Añadir un enlace 'Más información'"

      Eliminar
    6. Pues añádelo. Y por si acaso, echa un vistazo también a lo que dice en-rHed- ando

      Eliminar
  27. Con el permiso de Oloman, Walberto, a mi me paso lo mismo una epoca, lo de que no me permitia activar mas post que seis. Suele pasar mucho puede ser por que las imagenes son grandes, por la extension del post, o incluso a la hora de hacer el blog en sus inicios se bloqueo el numero de entradas con seis en esta ocasion... etc
    Pero a mi me paso por el calendario que tienes de archivos, yo tambien lo tuve al eliminarlo se arreglo el problema pon el widget de archivos normal no con un calendario, aunque yo ya no lo tengo, prefiero las etiquetas es mas comodo, y no ralentiza tanto el blog como los widgets de ultimos post, archivo, y algunos mas, mejor no ponerlos.
    Saludos

    ResponderEliminar
    Respuestas
    1. Muchas gracias en-rHead-ando y Olo, probare sus sugerencias.
      Bendiciones y sigan avanzando.

      Eliminar
  28. Che OLO, tenes alguna idea de como colocar una imagen con fondo transparente sobre la tabla pero que tape a todos los "td" con una sola, no una para cada una, osea que flote sobre la tabla, ¿entendes o te hago un dibujo?

    ResponderEliminar
    Respuestas
    1. ¿Quizás añadiendo un background con una imagen a TABLE?

      Eliminar
  29. Gracias por el post Olo.

    He creado una cuadro para resumir el post, en la versión web sale bien, pero no en el móvil. Cómo puedo resolverlo?.

    ResponderEliminar
    Respuestas
    1. Hola. Veo que lo has hecho con una tabla, así que lo que necesitarías sería aplicar al CSS lo que aquí explico sobre tablas para convertirlas en adaptables.

      Eliminar