1

Adding images to a post with the block editor:

enter image description here

produces the code figure of:

<figure class="wp-block-image">
    <img src="http://localhost:8888/time.png" alt="alt text" class="wp-image-1391"/>
    <figcaption>This is an image test.</figcaption>
</figure>

but I'm using Bootstrap 4 and would like to add Spacing (such as mt-2) and to remove the image class wp-image-1391, result:

<figure class="mt-2">
    <img src="http://localhost:8888/time.png" alt="alt text" class="img-fluid"/>
    <figcaption>This is an image test.</figcaption>
</figure>

or be able to modify it to a div:

<div class="mt-2">
    <img src="http://localhost:8888/time.png" alt="alt text" class="img-fluid"/>
    <figcaption>This is an image test.</figcaption>
</div>

Researching I've found get_image_tag_class but testing:

function example_add_img_class($class) {
    return $class . ' img-fluid';    
}
add_filter('get_image_tag_class','example_add_img_class');

doesn't work. Reading "How can I prevent WordPress from adding extra classes to element in the WYSIWYG editor" I tested:

add_filter('get_image_tag_class','__return_empty_string');

but doesn't work. I can modify the <img> with a preg_replace using the_content add_filter:

function add_image_fluid_class($content) {
    global $post;
    $pattern        = "/<img(.*?)class=\"(.*?)\"(.*?)>/i";
    $replacement    = '<img$1class="$2 img-fluid"$3>';
    $content        = preg_replace($pattern,$replacement,$content);
    return $content;
 }
 add_filter('the_content','add_image_fluid_class');

function img_responsive($content){
    return str_replace('<img class="','<img class="img-responsive ',$content);
}
add_filter('the_content','img_responsive');

but I've read that targeting the_content with regex can yield mixed results. I could solve the issue with a simple CSS:

figure img {
    width:100%;
    height:auto;
}
figure figcaption {
    text-align:center;
    font-size:80%;
}

but I'd like to understand more of what filters I can use to modify WordPress. How can I add and remove classes and change figure to a div?

  • 1
    I'd like to know this as well, I have a workaround but going forward I'd like to know how to customize these default blocks. – RiddleMeThis Jan 18 at 4:58
3

The following answer is a solution for Bootstrap 4 and centering images in a <figure> tag.

WordPress generated default:

<figure class="wp-block-image">
    <img src="http://localhost:8888/time.png" alt="alt text" class="wp-image-1391"/>
    <figcaption>This is an image test.</figcaption>
</figure>

Using the preg_replace() and the_content:

function add_image_fluid_class($content) {
    global $post;
    $pattern        = "/<figure class=\"[A-Za-z-]*\"><img (.*?)class=\".*?\"(.*?)><figcaption>(.*?)<\/figcaption><\/figure>/i";
    $replacement    = '<figure class="text-center my-3"><img class="figure-img img-fluid" $1$2><figcaption class="text-muted">$3</figcaption></figure>';
    $content        = preg_replace($pattern,$replacement,$content);
    return $content;
 }
 add_filter('the_content','add_image_fluid_class');

will produce:

<figure class="text-center my-3">
    <img class="figure-img img-fluid" src="http://localhost:8888/time.png" alt="alt text" />
    <figcaption class="text-muted">This is an image test.</figcaption>
</figure>

The code could be shortened to:

function add_image_fluid_class($content) {
    global $post;
    $pattern        = "/<figure class=\"[A-Za-z-]*\"><img (.*?)class=\".*?\"(.*?)><figcaption>/i";
    $replacement    = '<figure class="text-center my-3"><img class="figure-img img-fluid" $1$2><figcaption class="text-muted">';
    $content        = preg_replace($pattern,$replacement,$content);
    return $content;
 }
 add_filter('the_content','add_image_fluid_class');

if you wanted to add <small> you could do it as:

function add_image_fluid_class($content) {
    global $post;
    $pattern       = "/<figure class=\"[A-Za-z-]*\"><img (.*?)class=\".*?\"(.*?)><figcaption>(.*?)<\/figcaption><\/figure>/i";
    $replacement   = '<figure class="text-center my-3"><img class="figure-img img-fluid" $1$2><figcaption class="text-muted"><small>$3</small></figcaption></figure>';
    $content       = preg_replace($pattern,$replacement,$content);
    return $content;
 }
 add_filter('the_content','add_image_fluid_class');

the backend result is the image block with no align selection:

enter image description here

post rendered:

enter image description here

3

After some digging and trial/error I have came up with a couple solutions. I was looking for a "Gutenberg" solution so I could avoid using str_replace.

First, we need to enqueue our JS and include the wp.blocks package

// Add to functions.php

function gutenberg_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        // get_template_directory_uri() . '/js/gutenberg.js', // For Parent Themes
        get_stylesheet_directory_uri() . '/js/gutenberg.js', // For Child Themes
        array('wp-blocks') // Include wp.blocks Package             
    );
}

add_action('enqueue_block_editor_assets', 'gutenberg_enqueue');

Next, I found a couple solutions, the first is probably the best for your specific use-case.

Method #1

Use a filter function to override the default class. Well, in this case we are going to keep the "wp-block-image" class and just add the needed bootstrap class mt-2. But you could easily add whatever class you wanted. Add the code below and create a new image block, inspect it to see the figure tag now has the new class.

// Add to your JS file

function setBlockCustomClassName(className, blockName) {
    return blockName === 'core/image' ?
        'wp-block-image mt-2' :
        className;
}

wp.hooks.addFilter(
    'blocks.getBlockDefaultClassName',
    'my-plugin/set-block-custom-class-name',
    setBlockCustomClassName
);

Method #2

Add a setting in the block styles settings in the sidebar to add a class to the image.

// Add to your JS file

wp.blocks.registerBlockStyle('core/image', {
    name: 'test-image-class',
    label: 'Test Class'
});

enter image description here

This will add your class but unfortunately Gutenberg appends is-style- before the class, so it results in is-style-test-image-class. You would have to adjust your CSS accordingly.


Method #3

Manually adding the class via the Block > Advanced > Additional CSS Class option. Obviously, the class would need to be added for each image block.

enter image description here


Note: When adding or editing any of the JS above I needed to delete the block, refresh the page and then re-add the block to avoid getting a block validation error.

References:

Block Style Variations

blocks.getBlockDefaultClassName

  • Nice, couldn't we also add the 3. method by using the Advanced settings of the image block to manually append a CSS class to the corresponding image :-) – birgire Jan 18 at 20:52
  • 1
    haha yes! I overlooked adding that :) I will update the answer – RiddleMeThis Jan 18 at 20:54
0

The best way to deal with core block frontend issues are "override core blocks rendering"

example :

<?php
function foo_gallery_render( $attributes, $content ) {
    /**
     * Here you find an array with the ids of all 
     * the images that are in your gallery.
     * 
     * for example: 
     * $attributes = [
     *     "ids" => [ 12, 34, 56, 78 ]
     * ]
     *
     * Now have fun querying them,
     * arrangin them and returning your constructed markup!
    */
    return '<h1>Custom rendered gallery</h1>';
}
function foo_register_gallery() {
    register_block_type( 'core/gallery', array(
        'render_callback' => 'foo_gallery_render',
    ) );
}
add_action( 'init', 'foo_register_gallery' );

This works for all core gutenberg blocks, which means you can take advantage of the great blocks already developped, and arrange their output as you wish.

Reference : https://antistatique.net/en/we/blog/2019/01/29/gutenberg-override-core-blocks-rendering

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.