Mostrando entradas con la etiqueta tutorial html. Mostrar todas las entradas
Mostrando entradas con la etiqueta tutorial html. Mostrar todas las entradas

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^/


Related Posts Plugin for WordPress, Blogger...