Rewrite inline image markup

Question

Is there a way of writing a function that will replace the standard markup of an inline image within the_content, with a way that moves the size class to a parent container, and a series of data attributes for different sizes of the image?

I've tried using a preg_match function, originally written to remove the autop around the image, but unable to extrapolate the ID of the image and write a new output from that (when I do, it works, but only does so for the first image - all other content from the_content vanishes).

I want this:

<p>
  <img class="alignnone size-medium wp-image-2093" src="http://website.com/wp-content/uploads/image-600x400.jpg" alt="image" width="600" height="400" />
</p>

To become:

<figure id="image-2093" class="size-medium">
  <img src="http://website.com/wp-content/uploads/image-300x200.jpg"
       data-medium="http://website.com/wp-content/uploads/image-600x400.jpg"
       data-large="http://website.com/wp-content/uploads/image-1200x800.jpg"
  />
</figure>

I want to avoid anything using image_send_to_editor, and just use something that will work across the board rather than only on new image embeds.

Thanks in advance.

Edit:

This wass the mangled version of the remove autop preg_match function I had. It generates the output, but without any of the variables (so no value for the id, src or data attributes), and it only does it for the first image while removing all other content. A whole bunch of failure really.

function s7g_img_unautop($img) {

    $img = preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '<figure><div class="media-wrap">$1</div></figure>', $img);

    preg_match('~wp-image-(.*?)"~', $img, $output);
    $imgID = $output[1];
    $imgL = wp_get_attachment_image_src($imgID, 'thumbnail');
    $imgM = wp_get_attachment_image_src($imgID, 'medium');
    $imgH = wp_get_attachment_image_src($imgID, 'large');

    $image = '<figure id="image-'.$imgID.'"><img src="'.$imgL[0].'"  data-medium="'.$imgM[0].'" data-large="'.$imgL[0].'" /></figure>';     

    return $image;

}
add_filter( 'the_content', 's7g_img_unautop', 30 );

Answer 1

Most of the code is taken from Core files, also you might have to modify it a bit as per your own requirement.

Here is the core file link, where I got the idea from: https://developer.wordpress.org/reference/functions/wp_make_content_images_responsive/

You need to take care of the open p tag just before the image.

Was in hurry, so instead of waiting to check what you've tried, and modifying that, I ended up creating this snippet quickly.

add_filter( 'the_content', 'wpse_220739_modify_images', 100 );

/**
 * Get all the image tags from content and modify them
 *
 * @param $content
 *
 * @return mixed
 */
function wpse_220739_modify_images( $content ) {
    if ( ! preg_match_all( '/<img [^>]+>/', $content, $matches ) ) {
        return $content;
    }

    $selected_images = $attachment_ids = array();

    foreach ( $matches[0] as $image ) {
        if ( preg_match( '/size-([a-z]+)/i', $image, $class_size ) && preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) && $image_size = $class_size[1] && $attachment_id = absint( $class_id[1] ) ) {
            /*
             * If exactly the same image tag is used more than once, overwrite it.
             * All identical tags will be replaced later with 'str_replace()'.
             */
            $selected_images[ $image ] = $attachment_id;
            // Overwrite the ID when the same image is included more than once.
            $attachment_ids[ $attachment_id ] = true;
        }
    }
    foreach ( $selected_images as $image => $attachment_id ) {
        $content = str_replace( $image, wpse_220739_modify_image_tag( $image, $attachment_id, $image_size ), $content );
    }

    return $content;
}

/**
 * Modifies the image tag, by prepending a figure tag and adding necessary classes
 *
 * @param $image
 * @param $attachment_id
 * @param $image_size
 *
 * @return mixed|string
 */
function wpse_220739_modify_image_tag( $image, $attachment_id, $image_size ) {
    $image_src = preg_match( '/src="([^"]+)"/', $image, $match_src ) ? $match_src[1] : '';
    list( $image_src ) = explode( '?', $image_src );

    // Return early if we couldn't get the image source.
    if ( ! $image_src ) {
        return $image;
    }
    //Get attachment meta for sizes
    $size_large  = wp_get_attachment_image_src( $attachment_id, 'large' );
    $size_medium = wp_get_attachment_image_src( $attachment_id, 'medium' );

    $size_large  = $size_large ? $size_large[0] : '';
    $size_medium = $size_medium ? $size_medium[0] : '';

    //Check if the image already have a respective attribute
    if ( ! strpos( $image, 'data-large' ) && ! empty( $size_large ) ) {
        $attr = sprintf( ' data-large="%s"', esc_attr( $size_large ) );
    }

    if ( ! strpos( $image, 'data-medium' ) && ! empty( $size_medium ) ) {
        $attr .= sprintf( ' data-medium="%s"', esc_attr( $size_medium ) );
    }

    // Add 'data' attributes
    $image = preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );
    //Append figure tag
    $r_image = sprintf( '<figure id="image-%d" class="size-%s">', $image_size, $attachment_id );
    $r_image .= $image . '</figure>';

    return $r_image;

}

You'd need to add another check, if a Image tag already have a surrounding <figure> tag or not, but your main issue of not being able to modify all the images in content should be fixed by this.

Updated: The second foreach loop needs to be outside (Of course, silly me for not noticing that), that should help.