0
189
ViewsCómo obtener los enlaces de imágenes de la galería de bloques de Gutenberg y agregarlos como atributos de datos html a un botón en wordpress
Estoy usando el bloque de galería de gutenberg dentro de una publicación y estoy tratando de crear un botón que contenga todas las identificaciones de imagen en el bloque de galería como atributos de datos html de modo que luego, cuando envíe el contenido a la página, pueda tener acceso a esas identificaciones usando javascript . Básicamente, estoy tratando de crear una función de caja de luz para un tipo de publicación personalizada.
El problema es que no puedo acceder a los datos del bloque de la galería de gutenberg.
Aquí está mi código
while ($custom_post_type->have_posts()) { $custom_post_type->the_post(); $gallery = get_post_gallery(get_the_id(), false); $ids = explode(",", $gallery['ids']); }Y aquí está ese botón con atributos de datos html
<button class="gallery" <?php for ($i = 0; $i < count($ids); $i++) { $img_link = wp_get_attachment_image_url($ids[$i], 'full'); echo "data-img-" . $i . " = " . $img_link . " "; }?> > Light-box </button> Pero no funciona, $ids está vacío. Imprime esto
<button class="gallery">Light-box</button>¡Gracias por tu ayuda!
Editar
Estoy usando bloques de wordpress en la página de publicación, no estoy muy seguro de cómo se generaron, pero funcionan de manera inmediata.
1 answers
Answer question0
"no funciona,
$idsestá vacío".
Ese bloque es uno de los bloques predeterminados de wordpress, también conocido como "bloques centrales". Para tener acceso a sus datos, necesitaría usar la función parse_blocks , no get_post_gallery . Es por eso que su variable está vacía.
Entonces, el flujo de trabajo general para obtener lo que está buscando sería:
- Verifique si su publicación tiene bloques o no, usando la función
has_block.has_blockDocumentos - Si es así, obtenga todos los bloques (incluido el bloque de la galería) usando la función
parse_blocks.parse_blocksDocumentos -
parse_blocksdevolverá una matriz de todos los bloques utilizados en su publicación, así que revíselos y vea cuál se llama"core/gallery". - El bloque
"core/gallery"tiene"attributes"e"ids"para cada imagen que ha agregado en el panel de administración. - Una vez que obtenga los
"ids", debería poder crear su botón personalizado y enlaces de imagen usando la funciónwp_get_attachment_image_url.wp_get_attachment_image_urlDocumentos
Como POC:
Por favor vea el siguiente código:
if (has_block("gallery", get_the_content())) { $post_blocks = parse_blocks(get_the_content()); foreach ($post_blocks as $post_block) { if ("core/gallery" == $post_block["blockName"]) { $ids = $post_block["attrs"]["ids"]; } } }Y este es el botón:
<button class="gallery" <?php for ($i = 0; $i < count($ids); $i++) { $img_link = wp_get_attachment_image_url($ids[$i], "full"); echo "data-img-" . $i . " = " . $img_link . " "; } ?> > Light Box </button>Que regresará:
Nota:
- Utilicé la función
get_the_content, suponiendo que está en el bucle según el código que proporcionó en su pregunta. Si no está en el ciclo o necesita usar el código fuera del ciclo, puede usarglobal $post; $post->post_content;en cambio.
Esta respuesta ha sido probada en wordpress 5.8 y funciona.