Modify Embed HTML for Wordpress Images

Question

This or something similar is what Wordpress usually creates when you insert an image into a page or message:

[caption id="attachment_IMAGEID" align="ALIGNMENT" width="WIDTH"] <img src="IMAGEURL" alt="" width="WIDTH" height="HEIGHT" class="size-SIZE wp-image-IMAGEID" />IMAGECAPTION [/caption] 

What processes are processed:

 <div id="attachment_IMAGEID" style="width: WIDTH" class="wp-caption ALIGNMENT"> <img src="IMAGEURL" alt="" width="WIDTH" height="HEIGHT" class="size-SIZE wp-image-IMAGEID"> <p class="wp-caption-text">IMAGE CAPTION</p> </div> 

I want to completely change the HTML that is generated when the image is inserted. Calibration, positioning, etc. Will be executed using CSS.

This is HTML that should ideally be used:

 <figure class="figure img-small-left"> <img src="IMAGEURL" /> <figcaption class="figure-caption"> IMAGECAPTION </figcaption> </figure> 

Where he says img-small-left I want to put a class for CSS that controls the size and positioning of the image. These are the classes:

 img-small-right // small image, text wraps on the left img-small-left // small image, text wraps on the right img-medium // medium-sized image positioned in the center without wrap img-medium-float // medium-sized image positioned left, text wraps right img-large // large image, overflows the content width on both sides 

Where in the Wordpress theme or around it can I change the HTML insertion?

And: It may seem a little difficult to make this work with the standard backend input dialog box, no? Ideas? Other features offered by Wordpress may return to the closest treatment that I intend.

For reference, here is a CSS image (in SASS syntax)

 figure display: table img outline: 1px solid rgba(0,0,0,0.15) outline-offset: -1px &.img-small-right float: right margin: 0.2rem -3.5rem 1rem 1rem img width: auto max-width: 250px height: auto &.img-small-left float: left margin: 0.2rem 1rem 1rem -3.5rem img width: auto max-width: 250px height: auto &.img-medium margin: 1rem 0 1rem 2rem img width: auto max-width: 100% height: auto &.img-medium-float float: left margin: 0.2rem 1rem 1rem -10rem img width: auto max-width: 450px height: auto &.img-large margin: 1rem -6rem img width: 100% height: auto figcaption +FontSans font-size: 0.8rem line-height: 1.35 display: table-caption caption-side: bottom color: lighten($Black,30%) margin: 0.4rem auto 0.1rem 0 

To make the images and captions look beautiful, it was a good part of the hard work, so I don’t want to miss this when I convert a static design into a working Wordpress Theme.

Answer 1

This is the right filter that you should use:

 /** * Filters the image HTML markup including the caption shortcode. * * @since 2.6.0 * * @param string $shcode The image HTML markup with caption shortcode. * @param string $html The image HTML markup. */ return apply_filters( 'image_add_caption_shortcode', $shcode, $html ); 

For instance:

 function my_custom_markup( $shcode, $html ) { return str_replace( "caption", "something_new" , $shcode ); } add_filter( 'image_add_caption_shortcode','my_custom_markup', 10, 2 ); 

Answer 2

You can use the following filter:

 add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode', 10, 3 ); function my_img_caption_shortcode( $empty, $attr, $content ){ $attr = shortcode_atts( array( 'id' => '', 'align' => 'alignnone', 'width' => '', 'caption' => '' ), $attr ); if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) { return ''; } if ( $attr['id'] ) { $attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" '; } return '<figure ' . $attr['id'] . 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" ' . 'style="max-width: ' . ( 10 + (int) $attr['width'] ) . 'px;">' . do_shortcode( $content ) . '<figcaption class="figure-caption">' . $attr['caption'] . '</figcaption>' . '</figure>'; } 

Source: Plugin API / Filter Link / Img Title Short Header "WordPress Codex