问题
I'm trying to modify the html output of the gallery that is provided by gutemberg via function php ... but I can't.
How do you intercept and modify yourself?
this is the original:
<ul="wp-block-gallery columns-2 is-cropped">
<li class="blocks-gallery-item">....</li>
<li class="blocks-gallery-item">....</li>
</ul>
and I would like to change it based on the number of columns to adapt it to my development framework ...
<div class="grid-x">
<div class="box-50">...</div>
<div class="box-50">...</div>
</div>
exists how to change it via function.php ??
回答1:
Solution:
Exemple of Wp gutenberg html output override via function php:
add_filter( 'render_block', 'GutenGallery' , 10, 2 );
function GutenGallery( $block_content, $block )
{
if ( 'core/gallery' !== $block['blockName'] || ! isset( $block['attrs']['ids'] ) )
{
return $block_content;
}
$li = '';
$col = $block['attrs']['columns'];
foreach( (array) $block['attrs']['ids'] as $id ) {
if( $col == "1" || !$col)
{
$li .= sprintf( '<div class="box-[50-50-100]"><div class="autocrop radius-medium" style="height:300px;">%s</div></div>', wp_get_attachment_image( $id, 'large' ) );
}
elseif ($col == "2" )
{
$li .= sprintf( '<div class="box-[50-50-100]"><div class="autocrop radius-medium" style="height:300px;">%s</div></div>', wp_get_attachment_image( $id, 'large' ) );
}
elseif ($col == "3" )
{
$li .= sprintf( '<div class="box-[33-33-100]"><div class="autocrop radius-medium" style="height:300px;">%s</div></div>', wp_get_attachment_image( $id, 'large' ) );
}
elseif ($col >= "4" )
{
$li .= sprintf( '<div class="box-[25-25-50]"><div class="autocrop radius-medium" style="height:300px;">%s</div></div>', wp_get_attachment_image( $id, 'large' ) );
}
}
return sprintf( '<div class="grid-x gap-20">%s</div>', $li );
}
(box are the grid in use on my framewok kimera)
thank you all ;)
来源:https://stackoverflow.com/questions/55402138/edit-via-function-php-the-gallery-in-posts-created-with-gutenberg