[wp-trac] [WordPress Trac] #30201: img_caption_shortcode_width should support percentage widths

[WordPress Trac]

#30201: img_caption_shortcode_width should support percentage widths
----------------------------------------+-----------------------------
 Reporter:  danielbachhuber             |       Owner:
     Type:  enhancement                 |      Status:  new
 Priority:  normal                      |   Milestone:  Future Release
Component:  Media                       |     Version:
 Severity:  normal                      |  Resolution:
 Keywords:  needs-patch good-first-bug  |     Focuses:
----------------------------------------+-----------------------------

Comment (by hiwhatsup):

 If we do it for the "image_caption_shortcude_width" filter we'll probably
 have to do it for the entire "img_caption_shortcode" function.

 Maybe something like this might work?  Thoughts?
 {{{
         if ( strpos ( $atts['width'], '%' ) !== false ) {
                 $caption_width_um = "%";
         } else {
                 $caption_width_um = "px";
         }
         $atts['width'] = (int) $atts['width'];
 }}}

 {{{
         if ( current_theme_supports( 'html5', 'caption' ) ) {
                 return '<figure ' . $atts['id'] . 'style="width: ' . (int)
 $atts['width'] . $caption_width_um .  ';" class="' . esc_attr( $class ) .
 '">'
                 . do_shortcode( $content ) . '<figcaption class="wp-
 caption-text">' . $atts['caption'] . '</figcaption></figure>';
         }
 }}}

 Since by default, the caption is 10 pixels greater than the width of the
 image.  We'll need to add those 10px using CSS3 function calc().  I'm not
 how well this will work on older browsers.  Another option is to add a
 margin or padding.
 {{{
         if ( $caption_width ) {
                 if ($caption_width_um == "%") {
                         $style = 'style="width: calc('. (int)
 $caption_width .'% + 10px); width: -moz-calc('. (int) $caption_width .'% +
 10px); -webkit-calc('. (int) $caption_width .'% + 10px);  -o-calc('. (int)
 $caption_width .'% + 10px); " ';
                         }
                 else {
                         $style = 'style="width: ' . (int) $caption_width .
 'px" ';
                         }


         return '<div ' . $atts['id'] . $style . 'class="' . esc_attr(
 $class ) . '">'
         . do_shortcode( $content ) . '<p class="wp-caption-text">' .
 $atts['caption'] . '</p></div>';
         }
 }}}

 This is my first time here after attending @wcsf14.  I wanted to make ask
 before committing a diff and get some feedback for veteran committers and
 contributors.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30201#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform