web-dev-qa-db-ja.com

キャプション付きの画像からの高さと幅の削除

私はTwitter Bootstrap 3でWordPressを使用していますが、キャプション付きの画像に関しては問題があります。

キャプション付きの画像には高さと幅の属性が与えられているため、応答が妨げられます。

以下のコードを試してみましたが、これはキャプションのない画像に対してのみ機能します。

function change_uploaded_image_html( $html ) {
    // Removes height and width attribute from images when they
    // are uploaded.

    $classes = 'img-responsive';

    if ( preg_match( '/<img.*? class=".*?" \/>/', $html ) ) {

        $html = preg_replace( '/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . '$2', $html );
    }
    else {
        $html = preg_replace( '/(<img.*?)\/>/', '$1 class="' . $classes . '" \/>', $html );
    }


$html = preg_replace( '/(height|width)="\d*"\s/', "", $html );
return $html;

}

私はその後、このフォーラムの別の投稿からwidth属性をnoneに設定する別の方法を試しましたが、画像のwidthとheight属性が残っているので成功しませんでした。

function my_img_caption_shortcode_filter( $val, $attr, $content=null ){
    extract( shortcode_atts( array(
        'id'    => '',
        'align' => '',
        'width' => '',
        'caption' => ''
    ), $attr ) );

    if ( 1 > ( int ) $width || empty( $caption ) )
        return $val;

    $capid = '';
    if ( $id ) {
        $id = esc_attr( $id );
        $capid = 'id="figcaption_'. $id . '" ';
        $id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
    }

    return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >'
    . do_shortcode( $content ) . '<figcaption ' . $capid 
    . 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}
add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode_filter',10 ,3 );

私はPHPとWPの内蔵フィルターを使ってこれを行う方法を探しています、そして私は答えに近づいていると思いますが、どちらの方向に進むべきか正確にはわかりません。

どうもありがとう、nav

imagesresponsivecaptionstwitter-bootstrap
1
navanitachora

これは別の可能性です。エディタであなたのコンテンツに追加する画像を選択すると画像マークアップが変わります。

  add_filter( 'image_send_to_editor', 'remove_img_attribute', 10, 8 );

   function remove_img_attribute( $html, $id, $caption, $title, $align, $url, $size, $alt ) 
    {
       $imagetpl = '<figure>
            <a href="%s" title="%s"><img src="%s" alt="%s" class="img-responsive %s" /></a>
            %s
       </figure>';
       $figcaption = (!empty($caption)) ? sprintf('<figcaption>%s</figcaption>',$caption):null;
       $image = wp_get_attachment_image_src($id,'large');
       return sprintf($imagetpl,$image[0],$title,$image[0],$alt,$align,$figcaption);
    }
1
Friss

私は以下の解決策を使いました。ここで見つかりました

add_shortcode( 'wp_caption', 'fixed_img_caption_shortcode' );
add_shortcode( 'caption', 'fixed_img_caption_shortcode' );

function fixed_img_caption_shortcode($attr, $content = null) {
if ( ! isset( $attr['caption'] ) ) {
if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
     $content = $matches[1];
     $attr['caption'] = trim( $matches[2] );
     }
 }
 $output = apply_filters( 'img_caption_shortcode', '', $attr, $content );
     if ( $output != '' )
     return $output;
 extract( shortcode_atts(array(
 'id'      => '',
 'align'   => 'alignnone',
 'width'   => '',
 'caption' => ''
 ), $attr));
 if ( 1 > (int) $width || empty($caption) )
 return $content;
 if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
 return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >' 
 . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
 }
0
HanSoloShotFirst

画像の元のサイズでトリミングしたものではない場合は、多くのコードが必要です。代わりにwp_get_attachment_image_src()を使用しないでください。

あなたのコメントに返信： - >


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 ( $attr['id'] ) {
        $attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
    }
     $classes = 'img-responsive';

    if ( preg_match( '//', $content) ) {

        $content= preg_replace( '/()/', '$1 ' . $classes . '$2', $content);
    }
    else {
        $content= preg_replace( '/(/', '$1 class="' . $classes . '" \/>', $content);
    }

$content= preg_replace( '/(height|width)="\d*"\s/', "", $content);
 return ''
    . do_shortcode( $content ) . '' . $caption . '';}

これは私のために働いた、それはあなたのためではない、あなたはあなたの画像の幅を強制している他のフックを見たいと思うかもしれません

0
Digamber