Ayuda con ancho de imágenes en Tumblr
3 seguidores
Hola, a ver si alguien me puede echar una mano con esto. El tamaño real de las imágenes que pongo en mi tumblr es de 307x349px., al hacer click sobre ellas se ve el tamaño real, pero en al verlas todas juntas se reducen a 250x284px. Lo que yo quiero es que se vean en tamaño real de un primer vistazo, porque creo que tiene ancho suficiente como para que quepan 3 en cada fila a tamaño real.
He estado cambiando anchos y demás pero no hay manera. A ver si alguiensabe. Gracias :)
Saruba
Has probado ha ponerle un min-width y min-height.
No es la mejor solución, pero creo que te solucionará el problema.
marcoscabanas
Hola Saruba, gracias por contestar. ¿Cómo se ponen esos códigos y dónde?
Saruba
Esto lo tienes que añadir la web html. Viendo tu web tienes los css entre el <head> </head>.
Busca la etiqueta <style type="text/css"> y añades a continuación:
.box img {
min-height: 349px;
min-width: 307px;
}
Veras que hay mucho texto estructurado de la misma manera.
Tienes que poner .box para que solo se aplique a las imagenes que tienes en el cuerpo y no redimensionar el logo o alguna otra imagen.
Suerte y saludos.
marcoscabanas
Lo estoy probando y funciona, pero se superponen unas a otras porque el ancho del conjunto sigue siendo el mismo. Supongo que con eso no tendría problema en ajustarlo, creo... pero lo raro es que estando al tamaño natural de la imagen salgan un poco pixeladas. :S
Saruba
Eso lo explica todo. El problema no esta en el css, sino que la imagen de la pagina principal no es la misma que la del detalle.
Si te bajas una imagen de la pagina principal, su resolución es 250x284. De ahi que se pixele al cambiarle la resolución.
La miniatura hace referencia al nombre de la imagen acabado en 200, la normal termina en 400.
Por ejemplo, el Caballero con la mano en el pecho en pagina principal se llama:
tumblr_mm73ghHnFl1s8uykzo1_250.jpg
Y en el detalle:
tumblr_mm73ghHnFl1s8uykzo1_400.jpg
marcoscabanas
Sí, si eso es lo que decía en el primer post, que cuando se ven las imágenes juntas la resolución es 250x284 pero que si pinchas en cada una las ves en tamaño real. Pero yo creía que al poner el código que me has dicho no ampliaba la imagen pequeña sino que la sustituia por la original a tamaño real. No sé si me explico, vaya lío.
Ander
El problema que tienes es que en tumblr hay unas funciones predeterminadas para reducir el tamaño de las imágenes. Por defecto los tamaños son: 500px, 400px, 250px, 100px y 75px.
En tu template esto lo ves en la línea 479: {PhotoURL-250}. Si cambias ese parámetro por {PhotoURL-HighRes} te carga la imagen que has subido originalmente. Lo único que te quedaría es modificar el CSS para que no se acoplen los divs y mostrar la imagen a su tamaño.
marcoscabanas
Vaclad
No veo la línea esa por ninguna parte. :S
Ander
Esa era la línea del template original, en tu caso si lo has modificado no se en que línea estará. Haz una búsqueda en tu código modificado de: {PhotoURL-250} y ahí lo cambias.
marcoscabanas
Vaclad
¡Hecho! Funciona, muchas gracias. :D Ahora me queda retocar el ancho del tumblr para que no estén pegadas las imágenes. Vamos a ver si no la lío. xD
Ander
Perfecto! Ya veo que has modificado la anchura y va bien. Lo que veo es que tienes algún problema a la hora de cargar la función masonry, da error en la consola al cargar la página.
Lo que hace este fichero es reajustar automáticamente los divs para que no queden espacios en blanco, que es precisamente lo que te ocurre a ti. Revisa el código original con el tuyo a ver si has borrado alguna parte importante sin querer. Esta es la página del plugin: http://masonry.desandro.com/
Si la función funcioanra bien despues del div con clase post debería añadirte un div con clase masonryWrap.
marcoscabanas
Es verdad lo de los espacios en blanco queda fatal. He entrado en la página que has puesto, he descargado esto pero no tengo ni idea dónde hay que colocarlo. Lo he probado en bead y body y nada, supongo que habrá que hacerle alguna modificación, pero no tengo ni idea...
marcoscabanas
Esto es lo que hay referente a masonry en mi html, no sé si tendrá algo que ver. De todos modos yo creo que desde el principio pasaba lo de los espacios, no me acuerdo de que borrara nada parecido.
</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://static.tumblr.com/thpaaos/Oznkoyc5z/jquery.scale.js"></script>
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">
{block:IndexPage}
$(window).load(function () {
$('.posts').masonry();
});
Ander
Vale, el problema que tienes es que has cargado dos veces el fichero de jQuery y por eso te está dando conflicto. La segunda vez lo cargas debajo de las líneas que has pegado. Lo has usado para la función de volver arriba.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>Si eliminas la carga de este segundo jQuery debería funcionarte bien.
marcoscabanas
¿Entonces debo elegir entre no tener espacios en blanco y la función de "volver arriba"? ¿No pueden funcionar juntas?
De todos modos acabo de probar borrando el código de "volver arriba" y tampoco los espacios en blanco siguen ahí.
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
<a href="javascript:;" id="scrollToTop" rel="nofollow" title="Go to Top"><img src="https://www.anacom.pt/bvirtual/imgs/go_to_top.gif" title="Go to Top" alt="Go to Top"/></a>
Ander
La función de volver arriba te seguirá funcionando. Tu ahora mismo tienes esto:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://static.tumblr.com/thpaaos/Oznkoyc5z/jquery.scale.js"></script>
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('.posts').masonry();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
<a href="javascript:;" id="scrollToTop" rel="nofollow" title="Go to Top"><img src="https://www.anacom.pt/bvirtual/imgs/go_to_top.gif" title="Go to Top" alt="Go to Top"/></a>
De ahí tienes que eliminar esta línea:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>marcoscabanas
¡Hecho! !Eres un crack! Muchísimas gracias. :D
Ander
Perfecto! Mucho mejor asi! Un placer.