Atributo srcset en gallery blocks de Gutenberg

  • Resuelto Aitor Méndez

    (@aitormendez)


    hace 5 años, 2 meses

    El gallery block es muy util para maquetar thumbnails de galerías. Sin embargo, cuando elijo un layout con columnas (por ejemplo, el layout de cuatro columnas), el srcset para las miniaturas es igual que para una imagen grande.

    En otras palabras, para el layout de cuatro columnas, el scrset de las miniaturas viene con:

    sizes="(max-width: 768px) 100vw, 768px"

    Por tanto, todas las miniaturas se construyen con una imágen grande (innecesaria para la miniatura y que genera muchísimo tráfico). Por ejemlo, en esta página:
    https://stage.margenesdelarte.org/productions/relato-de-salida-al-albergue-2018/

    ¿Es posible obtener algo así?:

    sizes="(max-width: 768px) 100vw, 200px"

    Más aún, ¿es posible cambiar el atributo sizes en función del número de columnas elegido en el layout del bloque?

    • Este debate fue modificado hace 5 años, 2 meses por Aitor Méndez. Razón: typo

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • Moderador kallookoo

    (@kallookoo)

    hace 5 años, 2 meses

    Hola,

    Echale un vistazo a https://developer.wordpress.org/reference/functions/wp_calculate_image_srcset/ y su filtro.

    Lamentablemente ese filtro interactua en diferentes sitios asi que deberas tener cuidado. por ejemplo asi sin pensar usaria el filtro the_content y dentro usaria el filtro del srcset para x post/page/etc…

    Iniciador del debate Aitor Méndez

    (@aitormendez)

    hace 5 años, 1 mes

    Gracias Sergio. Según he podido saber gracias a un issue que he abierto en el repo de github, es un bug conocido sobre el que se está trabajando. Bueno, más que un bug es que han hecho un gallery block que es una basura, con perdón:

    https://github.com/WordPress/gutenberg/issues/13963

    Esta referencia a un issue anterior parece ser la principal, aunque hay más:

    https://github.com/WordPress/gutenberg/issues/9620

    Por lo demás, hay una función y un hook (más util que wp_calculate_image_srcset) para modificar los atributos sizes:
    https://developer.wordpress.org/reference/functions/wp_calculate_image_sizes/

    No obstante, cualquier solución deberá implicar necesariamente la modificación del gallery block, ya que es éste el que establece el layout (el número de columnas) y eso hay que comunicarlo al servidor para aplicar el filtro que corresponda. Me costaba creer que el gallery block por defecto de Gutenberg fuera tan malo, pero parece ser que es así. Tal como están las cosas ahora, para poder tener una galería de imágenes verdaderamente responsive tengo que ser un ninja del código y programar mi propio bloque con una funcianalidad sofisticada, y mucho me temo que no soy tan bueno como para eso ni de lejos.

    • Esta respuesta fue modificada hace 5 años, 1 mes por Aitor Méndez.
    • Esta respuesta fue modificada hace 5 años, 1 mes por Aitor Méndez.
    • Esta respuesta fue modificada hace 5 años, 1 mes por Aitor Méndez.
    Moderador kallookoo

    (@kallookoo)

    hace 5 años, 1 mes

    Hola,
    Yo me decante por ese ya que puedes editar directamente el scrset, sobre le block creo recordar que en el twitter de nilo o jose conti puso un enlace de un repo de bloques.

    Suerte y paciencia.

    Iniciador del debate Aitor Méndez

    (@aitormendez)

    hace 5 años, 1 mes

    Voy a ver si hay algo que se adapte, gracias de nuevo!

    Cierro el hilo como resuelto (aunque realmente no lo está). Si encuentro alguna solución lo vuelvo a abrir.

    Abrazos.

    Moderador kallookoo

    (@kallookoo)

    hace 5 años, 1 mes

    Perfecto,
    Y otra en semanawp hicieron unos compañeros un package de npm para crear bloques y te explican como lo basico de como hacerlos.

    Iniciador del debate Aitor Méndez

    (@aitormendez)

    hace 5 años, 1 mes

    Sí, justo me lo vi ayer! es la caña esa herramienta 😉

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • El debate ‘Atributo srcset en gallery blocks de Gutenberg’ está cerrado a nuevas respuestas.