0Mostrar imagen ampliada al desplazar el mouse en wordpress

Como parte de las mejoras recientes que he realizado en varios sitios web, quería que las imágenes de las galerías mostraran versiones ampliadas al pasar el cursor sobre. Haciendo esto con básico CSS es bastante trivial, pero no solo quería expandir la imagen original, Quería que el navegador tomara un nuevo (mas grande) imagen también ...

Todas las imágenes ya proporcionan un conjunto de src completo, así que todo lo que tenía que hacer era usar un poco de jQuery (que ya está cargado por wordpress de todos modos) para cambiar el tamaño de la pantalla de destino para que el navegador extraiga una imagen más grande. Lo bueno es que el CSS funciona instantáneamente para que obtenga una imagen más grande con el archivo original, y luego la calidad mejora una fracción de segundo más tarde a medida que se carga el archivo de mayor resolución.

los CSS

los CSS Que utilicé es el siguiente. Simplemente agregué esto al style.css de mi tema (o más bien tema infantil: siempre es una buena idea usar uno)

dt.gallery-icon a img.size-thumbnail:flotar
{
transformar: escala(3.0);
}

Nota (1) - lo anterior CSS se aplica solo a las imágenes de la galería. Es poco probable que alguien quiera esta funcionalidad para todas las imágenes que se muestran en cualquier lugar de la página., pero es posible que lo desee para la sección de contenido principal. Debería comprobar cómo su tema estructura esto, pero en mi caso, el área de contenido principal es una "sección", por lo que el siguiente código haría el trabajo

section.entry-content p a img.size-thumbnail:flotar
{
transformar: escala(3.0);
}

Nota (2) - Este código se aplica solo a imágenes en miniatura.. Para imágenes medianas, debe reemplazar "tamaño-miniatura" por "tamaño-mediano", y para grandes con "tamaño grande".

Nota (3) - Debido a que mis miniaturas miden 120x80px, quiero aumentarlas a 3 veces su tamaño original.. Ya tengo un tamaño de imagen personalizado de 360 ​​× 240 que wordpress crea para mí que está incluido en el src-set. Para pantallas de alta resolución, también hay tamaños de imagen aún más grandes que tengo (e.g. 720× 480). Crear tamaños de imagen adicionales en wordpress es fácil: hay muchas buenas guías en línea si necesita hacer esto.

Si desea escalar a 1.5x o 2.0x, simplemente cambie el 3.0 como se desee

El jQuery

Agregue lo siguiente a su (niño) archivo de script del tema (asumiendo que tiene uno). Si no tiene uno, crea el tuyo, y "ponerlo en cola" con una función personalizada en el (niño) functions.php del tema

jQuery(documento).Listo(función(){

  jQuery("dt.gallery-icon a img.size-thumbnail").flotar(función(){
    jQuery(este).attr("tamaños","(anchura máxima: 360px) 100vw, 360px");
    }, función(){
    jQuery(este).attr("tamaños","(anchura máxima: 120px) 100vw, 120px");
  });

  //repite lo anterior 5 líneas aquí para cada tamaño de imagen diferente que desee modificar

});

El código anterior se aplica a imágenes con miniatura de clase que se encuentran dentro de cualquier dt con una clase de icono de galería, es decir, en otras palabras, solo a imágenes dentro de la estructura de galería incorporada de wordpress.. Al pasar el mouse, el ancho máximo aumenta de 120 a 360 (un aumento de 3 veces para igualar mi CSS!), y luego la segunda parte de la función restaura el original 120 ancho cuando el hover se detiene.

Como con el CSS arriba, puede ajustar los números para cambiar cuánto se agranda la imagen, y puedes cambiar el dt.gallery-icon a img.size-thumbnail sección para apuntar a un elemento o clase diferente según las imágenes a las que desee apuntar.

Ponga en cola su propio guión

Si su tema no tiene un archivo de secuencia de comandos y necesita poner el suyo en cola, agregue lo siguiente a su (niño) functions.php del tema (asumiendo que llamó a su archivo de script image-zoom.js y lo guardó en la carpeta raíz del tema)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', colección( 'jquery' ), '', cierto);
wp_enqueue_script( 'img-zoom' );

Lo anterior registrará su script, en el pie de página, asegurándose de que se coloque después de jquery (por lo que jquery ya debería estar disponible cuando se ejecuta)

Agregar tamaños de imagen

Para mayor información, le mostramos cómo agregar tamaños de imagen personalizados a wordpress.. De nuevo, agrega esto a tu (niño) functions.php del tema

add_image_size( 'un cuarto de ancho', 192, 144, falso );

Arriba, agregué un nuevo tamaño de imagen llamado "un cuarto de ancho" con un ancho máximo de 192 px y una altura máxima de 144 px.. La imagen no se recortará (de ahí lo falso al final).

WordPress ahora creará imágenes de este tamaño automáticamente cuando cargue imágenes (deberá utilizar un complemento de reconstrucción de miniaturas para recrear las miniaturas de las imágenes ya cargadas).

Sin embargo, este nuevo tamaño de imagen NO aparecerá para su inserción en el editor. Para que esté disponible también agregue el siguiente código a su functions.php

función my_custom_image_sizes( $tamaños ) {
    return array_merge( $tamaños, colección(
        'cuarto de ancho' => __('Cuarto de ancho'),
    ) );
}

Respetando la configuración existente

Una cosa más que quizás quieras hacer (para garantizar que las imágenes receptivas funcionen bien) es crear más grande (es decir. alta resolución) tamaños de miniatura que respetan el GUI de si recortar miniaturas o no. Para hacer eso, use el código a continuación que, como verá, está ligeramente modificado del más básico anterior

add_image_size( 'resp-thumb-2x', (get_option( 'thumbnail_size_w' ) == 0 ? 0 : '240'), 160, get_option( 'thumbnail_crop' ) );

El código anterior comprueba 2 cosas: en primer lugar, comprueba si la opción de recorte está configurada, y si es, lo refleja para nuestro nuevo tamaño de respuesta. También comprueba si el ancho está configurado en 0 (es decir. sin máximo) en cuyo caso nuestra nueva imagen tampoco tendrá un máximo. Llamé al nuevo tamaño de la imagen "resp-thumb-2x" porque es una copia "receptiva" de la miniatura que es dos veces más grande. (para pantallas de alta resolución con el doble de densidad de píxeles normal). También he creado varios otros tamaños para hacer un conjunto bastante completo..

Nota: dado que mis miniaturas originales eran 120 × 80, quiero que las nuevas sean 240 × 160, por lo que esos son los tamaños que he especificado (codificado). Sería posible obtener tanto la altura como el ancho especificados para la miniatura original y multiplicar ambos por 2 para hacer esta función completamente genérica, pero no lo hice cuando lo estaba desarrollando, así que te lo dejo para que lo averigües!

Un último consejo

Si, como yo, usted crea su propio conjunto completo de nuevos tamaños de imagen, es posible que no desee que WordPress cree sus propios tamaños ocultos adicionales. Además de la imagen original, y la miniatura, el medio, y la imagen grande, wordpress también crea una "post-miniatura", un "mediano-grande", un 1536 × 1536 y un 2048 × 2048. Estos están deshabilitados en 2 diferentes formas ...

Para quitar el 1536 y 2048 las imágenes son sencillas

remove_image_size( "1536x1536" ); //eliminar el 1536 no lo necesitamos
remove_image_size( "2048x2048" ); //eliminar el 2048 no lo necesitamos

El post-pulgar y el mediano-grande son un poco más complicados.

//quitar el incorporado mediano-grande
Añadir filtro('tamaños_de_imagen_intermedios', función($tamaños) {
    return array_diff($tamaños, ['mediano grande']);
});

//eliminar la miniatura posterior incorporada
Añadir filtro('tamaños_de_imagen_intermedios', función($tamaños) {
    return array_diff($tamaños, ['post-miniatura']);
});

Tenga en cuenta que, a veces, la eliminación de la miniatura de la publicación parece tener efectos extraños en la biblioteca de imágenes del editor..

Una nota final final

Al decidir los tamaños de las imágenes (para imágenes más grandes, menos miniaturas) lo ideal es que desee un tamaño en el que las imágenes de relación de aspecto comunes siempre se redimensionen bien para. Por eso recomiendo los siguientes tamaños

Observe cómo los anchos especificados producen alturas de números enteros para todos 3 de las relaciones de aspecto más comunes. No lo conseguirás con anchos como 150 o 200.

También tenga en cuenta el patrón en aumentos. Saltar 2 filas en la tabla y el tamaño se duplica! Las filas pares (288,576,1152 y 1535) también son 1,5 veces el tamaño anterior, por lo que funcionan bien en pantallas de semi-alta resolución con un 50% aumento de ppp. Al usar este conjunto de 7 tamaños, tiene una buena variedad de opciones utilizables para la mayoría de las ventanas gráficas Y un buen conjunto de imágenes receptivas que wordpress agregará automáticamente al src-set, ya que tendrán relaciones de aspecto consistentes sin fracciones que conducirían a la pérdida de calidad o al recorte.

Actualmente, para las miniaturas, tiendo a tener un ancho ilimitado permitido O recorto duro a un fijo 3:2 proporción, por lo que uso tamaños de números enteros para las miniaturas, pero eventualmente puedo modificar mi tema y extender el sistema anterior hacia atrás al tener opciones de 48px y 96px de ancho (tenga en cuenta que no hay ningún valor entre estos 2 Lamentablemente, eso funcionaría y, dado que utilizo miniaturas de 60 píxeles de ancho, no he optado por extenderlas hacia atrás.). 72px funcionaría para ambos 4:3 y 3:2 (y 64px funcionaría con 4:3 y 16:9). Dado que la mayoría de mis imágenes se toman con mi dSLR, normalmente son 3:2 (igual que la relación de aspecto de la película tradicional de 35 mm) así que podría usar este tamaño también, que luego funcionaría con los tamaños grandes hasta arriba, pero los tamaños más grandes no se recortan, mientras que mis miniaturas sí. Me complace que las imágenes más grandes sean tanto horizontales como verticales., pero quiero que las miniaturas sean típicamente apaisadas solo para que se ajusten a mi diseño, por eso no me he extendido hacia atrás. Con suerte, a medida que haya más y más logotipos disponibles SVG'S, y una vez JPEG-XL llegará al navegador en un futuro próximo, mucho de esto se resolverá.