ওয়ার্ডপ্রেস চিত্র ক্যাপশন প্রতিক্রিয়াশীল করুন

Question

এই ওয়েবপৃষ্ঠায় ওয়ার্ডপ্রেস দ্বারা imagesোকানো চিত্র রয়েছে। প্রথম চিত্রটি সন্নিবেশ করানোর জন্য ব্যবহৃত কোডটি হ'ল:

[caption id="attachment_887" align="alignnone" width="604"]
    <a href="http://steven.doig.com.au/files/2013/06/Forest_Legacy_m.jpg">
        <img class="size-large wp-image-887" alt="a Forest Legacy group" src="http://steven.doig.com.au/files/2013/06/Forest_Legacy_m-1024x681.jpg" width="1024" height="681" />
    </a> a Forest Legacy group[/caption]

এই চিত্রটি সিএসএস দ্বারা নিয়ন্ত্রিত:

#content .wp-caption a img {
    width: 614px;
    height: auto;
}

আমি এই চিত্রটি প্রতিক্রিয়াশীল করতে চাই। আমি সিএসএস প্রবেশ করিয়েছি:

@media (max-width:988px) {
    #content .wp-caption a img {
        width: 99.03225806%; /* 614/620 */
        height: auto;
    }
}

তবে, ওয়ার্ডপ্রেস পোস্টের অভ্যন্তরে নির্দিষ্ট হিসাবে DIV.wp- ক্যাপশনটি 604px এ রয়ে গেছে। আমি এটিকে শতাংশ হিসাবে প্রমাণ করার চেষ্টা করেছি (97.41935483%) তবে ওয়ার্ডপ্রেস এটিকে 104px হিসাবে পুনরায় ব্যাখ্যা করেছেন।

ইনলাইন সিএসএস স্টাইলশিটে আমি theোকানো সিএসএসকে ওভাররাইড করছে।

<div id="attachment_887" class="wp-caption alignnone" style="width: 614px">

আমি কীভাবে .WP- ক্যাপশনটিকে প্রতিক্রিয়াশীল করতে পারি তার কোনও ধারণাগুলি?

Answer 1

আপনি ব্যবহার করতে চান:

@media (max-width: 988px){
  .wp-caption {
    /* Force the box to be 100% */
    width: 100% !important;
  }
  #content .wp-caption a img {
    /* Scale down if too big */
    max-width: 99.03225806%; /* 614/620 */
    height: auto;
  }
}

Answer 2

আর একটি সম্ভাবনা হ'ল শর্টকোড আউটপুট পরিবর্তন করা যাতে প্রস্থটি আর হার্ড-কোডড না হয়। কোডেক্স উদাহরণটি পরিবর্তন না করে কোনও প্রস্থ নেই:

add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);

/**
 * Filter to replace the [caption] shortcode text with HTML5 compliant code
 *
 * @return text HTML content describing embedded figure
 **/
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>';
}

http://codex.wordpress.org/Function_Reference/add_filter#Example

Answer 3

এখানে একটি আরও সহজ এবং ক্লিনার সমাধান:

function my_img_caption_shortcode_width($width, $atts, $content)
{
    return 0;
}

add_filter('img_caption_shortcode_width', 'my_img_caption_shortcode_width', 10, 3);