jueves, 15 de diciembre de 2011

Xirarei e xirarei (como girar imágenes o vídeos con CSS)

¿Harto de que cuando intentas publicar una foto en tu blog, esta aparezca girada, y tener que pelearte con todos los programas de edición que conoces para rotarla y que realmente aparezca como tiene que aparecer? Yo lo estaba, y cuando por fin me molesté en buscar en Google cómo resolverlo, vi que era tan fácil, que me dio hasta vergüenza: ser informática y no haberlo averiguado antes. Como redención, comparto mi sabiduría con "todos" vosotros.

Siento no poder poner la referencia de dónde me informé, pero es que hace ya bastante tiempo de eso, ahora hago el post basándome en lo que yo tengo ahora mismo en el blog.



Paso 1: Preparar la plantilla

Desde el panel de control del blog, hacer clic en la pestaña "Diseño".
A continuación, hacer clic en el enlace al "diseñador de plantillas"
En el diseñador de plantillas, ir a la sección "Avanzado" (el último de la columna de la izquierda)
Desde ahí, ir al último subapartado (la lista aparecerá justo a la derecha), "Añadir CSS"

Y, por fin, en el cuadro para añadir CSS, pegar las siguientes líneas:

.rot90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    rotation: 90deg;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rot180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    rotation: 180deg;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Para guardar los cambios, hacer clic en "Aplicar al Blog".


Paso 2: Crear la entrada con la imagen

Este paso no hará falta ni que lo explique: es hacerlo como de costumbre; si la imagen ya queda como la quieres, perfecto, y si queda girada es cuando entra el paso 3.


Paso 3: Girar la imagen

Esto es lo realmente bonito de este método, por lo sencillo que es. Todo lo que hay que hacer es editar el HTML de la entrada, buscar dónde está el código referente a la imagen en cuestión, y añadir al tag que la contiene la clase correspondiente: rot180 si está patas arriba, o rot90 o rot270 para según este girada a un lado u otro.

Vale, soy consciente de que el párrafo anterior, para alguien que no sepa HTML y CSS ha quedado poco más o menos como si lo escribiese en klingon, pero tengo que suponer que algo de idea tienes que tener, si llevas un blog con blogger... más que nada porque llevo un buen rato intentando redactar una explicación para quien no sepa nada de nada y no soy capaz...

Veámoslo desde la práctica. Has subido una imagen con Blogger y te ha quedado girada. Fíjate en lo que haya escrito de texto antes y después, ve a Edición de HTML y busca el código HTML correspondiente a la imagen, localizándolo entre los trozos de texto que te he dicho que te fijaras antes de cambiar de pestaña. El trozo de código en cuestión tendrá una pinta del estilo de este:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA5JR8AekHNrHgAUj08fkt0xEtJhCSgmlZ5WlQgzMa5LwJMO8pTYqW28g6YmnUy6z7roXxZF3iDRjUXVVvTDhreJZUkFneT9PhRxMe94LnsuNH-4t9erIXXfDvmJfUsTBcFlw4Gw7LqzjD/s1600/2011-12-08+14.04.36.jpg"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA5JR8AekHNrHgAUj08fkt0xEtJhCSgmlZ5WlQgzMa5LwJMO8pTYqW28g6YmnUy6z7roXxZF3iDRjUXVVvTDhreJZUkFneT9PhRxMe94LnsuNH-4t9erIXXfDvmJfUsTBcFlw4Gw7LqzjD/s640/2011-12-08+14.04.36.jpg" width="480" /></a></div>

Lo único que hay que hacer es sustituir envolverlo con las siguientes dos líneas:
<div class="rotXX">
antes y
</div>
después.
Donde rotXX es la rotación que quieras poner: rot90 para 90 grados, rot180 para 180 grados, o rot270 para 270grados.

Muchas de las imágenes de este blog están rotadas de esta manera. El único inconveniente que tiene este método es que si se hace clic sobre la imagen para agrandarla, se mostrará girada de nuevo, porque esto sólo afecta a cómo se ve la imagen, no a cómo se guarda.


Esta solución es también válida para vídeos, o para cualquier otra cosa que quieras que se vea girada, pero para saber dónde tienes que poner lo de rotXX en el HTML en esos casos, tendrás que aprender HTML por tu cuenta (o preguntarme en los comentarios), porque para un post de un blog de carácter generalista sería un ladrillo explicarlo todo.




Y también sirve para aplicar ángulos de giro diferentes de los explicados!

5 comentarios:

  1. Toma, voy a probarlo, y si me funciona, me hago seguidora tuya...

    ResponderEliminar
  2. Hola, no acabo de entender dónde debo insertar las líneas, lo he estado intentando y no me sale :-(

    ResponderEliminar
  3. muy buena la ayuda, agradezco tu publicación

    ResponderEliminar
  4. muy bien, pero la verdad es que no explicas donde poner el código exactamente...

    ResponderEliminar
  5. Muchas gracias te lo agradezco bastante, me a sido de muchísima ayuda. saludos

    ResponderEliminar

¿Y tú, qué opinas?