lunes, 19 de septiembre de 2016

[HTML] Redimensionar imágenes y/o vídeos desde la misma entrada


¡Buenas noches a todos/as!

Traigo un tutorial que creo que será de bastante utilidad.

¿ No os a pasado muchas veces, que al poner una imagen o vídeo en cualquier entrada y/o página, al ser más grande , sobrepasa el límite del post quedando cortada? Pues os traigo la solución ^^.

Nota: Este tutorial funciona al darle en la medida Extra Grande, en otra medida no dará el mismo resultado.

Lo primero es ir a nuestra entrada o página y poner aquella imagen o vídeo que queramos:


Blogger siempre la reducirá al mínimo para que no sobresalga. Pero claro, también nos da las opciones de ampliarla a grande ,extra grande o tamaño original:


En mi caso, al darle a extra grande, al darle a previsualizar, me quedaría así:


A mucha gente le dará igual, pero aquellos que le demos importancia al diseño de las entradas nos molestará. La primera solución en la que pensaríamos es utilizar un editor de imágenes ( como Adobe Photoshop) y si, nos quitaría el problema, pero al reducir perderíamos calidad de imagen o algunos elementos quedarían reducidos.

Os doy una solución más sencilla. 

Volvemos a editar nuestra entrada, y le daremos a la opción Editar HTML. Aquí nos aparecerá el código de todo lo que hay en nuestra entrada: espacios, texto, color de fuente, imágenes etc. Como en mi caso quiero redimensionar una imagen, tendré que buscar este código o uno similar:


No tendremos que modificar toooodo el código, si no solo 2 partes. Primero modificaremos el Ancho de la imagen, buscando el apartado :

"width=xxx"


Modificaremos el valor que hay, en mi caso 640 (px) por el ancho de la columna de posts de nuestro blog. Este valor lo encontraremos en Plantilla/ Editar HTML y buscando la sección:

.post { 

Nota: Aunque ponga un valor de por ejemplo, 600, si tenemos márgenes, deberemos restar la suma de los margenes de ancho.

Una vez tengamos el valor del ancho, lo escribimos. Ahora modificamos el valor de:

" height= XXX" 


Este valor equivale a la altura de nuestra imagen. Aquí deberemos de calcular el valor aproximado mirando la Vista previa de la entrada e ir aumentando o reduciendo el valor. En mi caso lo dejaré en 326 (px).

Al darle de nuevo a Redactar, veremos que se ha ajustado la imagen:


Y si le damos a vista previa veremos que la imagen ya no se sobresale del borde del post.



Resultado Final



Si en lugar de una imagen, quisiéramos modificar el tamaño de un vídeo, deberíamos seguir los mismos pasos que en este tutorial, pero el código del vídeo incluiría la palabra Iframe.

¿ Os ha resultado útil? Es una manera de evitar tener que editar una a una cada imagen y de perder calidad al mismo tiempo ¿ No creéis? ^^. Dejad vuestra opinión en comentarios ^3^/


2 comentarios :

  1. Muchas gracias por el tutorial, nunca esta de mas saber estas cositas!
    pd: gracias también por tus comentarios en mi blog voy a revisar el link que me dejaste a ver si puedo solucionar el problema de los seguidores.
    Te mando un abrazo muy grande y que estés super bien♥

    ResponderEliminar
    Respuestas
    1. Me alegro que te guste el tutorial, son de esas cositas que como tu dices, no esta de más saberlas ^^.

      Si te sigue sin funcionar el gadget de seguidores dímelo e intentaré buscar otra solución. ¡Un besazo ^3^/!

      Eliminar

Related Posts Plugin for WordPress, Blogger...