Agrandar foto al hacer clic, ¿de qué manera?

  • Resuelto Salcedo

    (@salcedo)


    hace 5 años

    Conozco plugins de tipo lightbox, pero quisiera hacerlo yo mismo añadiendo un snippet de código. Los visores automáticos privilegian las fotos en formato panorámico y el resto las agrandan menos, yo quiero añadir la función según mis necesidades.
    Aclaro que nunca reduzco la imagen original mediante CSS para viñetas y miniaturas, sino que subo los dos tamaños respectivos de cada foto.

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • Moderador almendron

    (@almendron)

    hace 5 años

    Comienzo por lo segundo: ¿qué sentido tiene que subas dos tamaños de cada foto cuando WordPress lo hace de forma automática?
    De hecho, y dependiendo de lo que tengas puesto en Ajustes > medios, podrías estar creando hasta 8 imágenes por cada foto.

    En cuanto a los plugins de tipo lightbox, éstos no privilegian a unas en detrimento de otras. Muestran todas a un tamaño igual con el límite máximo del propio tamaño de la imagen y de las dimensiones del navegador. Prueba https://es.wordpress.org/plugins/easy-fancybox/

    Iniciador del debate Salcedo

    (@salcedo)

    hace 5 años

    ¡Gracias por tu ayuda! Se desaconseja modificar el tamaño de las imágenes con CSS, porque siempre la aplicación carga la foto original. Es un ahorro de espacio y de tráfico mostrar viñetas reducidas, y que sólo se carguen las imágenes grandes si el usuario lo pide.

    Y yo he utilizado lightboxes (si no mal recuerdo incluso el Easy Fancybox) y es como te digo (soy fotógrafo). Si pones una imagen en formato 16:9, al ampliarla se mostrará a mayor tamaño que una de 3 x 4. En algunos casos la diferencia es muy llamativa. Por ese motivo en alguna web puse fotos marcadamente panorámicas.

    • Esta respuesta fue modificada hace 5 años por Salcedo.
    • Esta respuesta fue modificada hace 5 años por Salcedo.
    Moderador almendron

    (@almendron)

    hace 5 años

    Estás equivocado. WordPress no modifica el tamaño por CSS y no carga la foto original. Lo que hace WordPress es crear varias imágenes de acuerdo a lo establecido en la configuración.
    Comportamiento: si subes una imagen, WordPress generará tres más (miniatura, medio y grande). Son tres imágenes distintas y cada una con su respectivo tamaño que puedes usar luego donde quieras.
    Si usas the_post_thumbnail en combinación con un tamaño ajustado en la configuración, WordPress cargará dicha imagen que habrá creado al subirla y cuya URL será la original + anchura x altura
    Por ejemplo: http://www.tusitio.com/wp-content/uploads/2019/04/care-about-gaza-blame-hamas-200x133.jpg

    Por tanto, si en algún sitio usas una miniatura, lo adecuado es lo siguiente:

    1) En página principal y páginas de archivos: usa the_post_thumbnail
    2) En entradas individuales: usa la miniatura enlazada al archivo de medios y luego utiliza un plugin para abrirla en grande.

    Nota: Algunas plantillas si que cargan la original pero es porque están mal diseñadas.

    • Esta respuesta fue modificada hace 5 años por almendron.
    Moderador almendron

    (@almendron)

    hace 5 años

    En cuanto al tamaño también estás equivocado. No las muestra a distinto tamaño según la proporción sino en función de la anchura y altura de la ventana del navegador.

    Solo tienes que hacer una prueba: cargar una imagen cuyo tamaño original sea inferior (tanto en altura como anchura) a la ventana del navegador. Podrás comprobar que la imagen se carga por completo con independencia de la proporción de la foto.

    El problema no es, por tanto, la proporción de la imagen sino el «hueco» que tienes para mostrarlo. Y eso no lo puedes cambiar. El «hueco» siempre tendrá más anchura que altura. Da lo mismo si usas un plugin o código personalizado.

    Solamente modificando la proporción podrías hacer que la anchura mostrada en grande fuera la misma para las dos fotografías.

    Iniciador del debate Salcedo

    (@salcedo)

    hace 5 años

    Vaya, eso no lo sabía. Yo nunca había utilizado WordPress para mis páginas de fotografía, sino (rudimentarios) diseños propios con html y CSS. ¡Muchas gracias!

    Moderador almendron

    (@almendron)

    hace 5 años

    Aquí tienes temas que pueden servir para sitios de fotografías: https://es.wordpress.org/themes/tags/photography/

    Iniciador del debate Salcedo

    (@salcedo)

    hace 5 años

    Gracias de nuevo, un saludo.

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • El debate ‘Agrandar foto al hacer clic, ¿de qué manera?’ está cerrado a nuevas respuestas.