CODEWITHSUNDEEP
htmlwordpressimageinsert
Thomas Maier
Thomas Maier

Reputation: 301

Change inserted HTML for Wordpress images

This or something similar is what Wordpress usually produces when you insert an image in a page or post:

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

Which processes to:

<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 being created when an image is inserted. Sizing, positioning and so on will be done with CSS.

This is the HTML that should ideally be used:

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

Where it says img-small-left I want to place the class for the CSS that controls the sizing 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 insertion HTML?

And: It might get a little tricky to make that work with the standard backend image insertion dialog, no? Ideas? Other possibilities Wordpress wants to offer can fall back to either closest way of treatment that I intend.

For reference, here is the image CSS (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 images and captions look beautiful was a good piece of hard work, so I don't want to miss that when I convert the static design into a working Wordpress Theme.

Upvotes: 5

Views: 1949

Answers (2)

Rajkumar Gour
Rajkumar Gour

Reputation: 1159

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 Reference/img caption shortcode « WordPress Codex

Upvotes: 2

Vuk Vukovic
Vuk Vukovic

Reputation: 118

This is the correct filter 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 example:

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

Upvotes: 1

Related Questions