Cum să faci subtitrările imaginilor în Wordpress responsive

Question

Cum să faci subtitrările imaginilor în Wordpress responsive

22 iul. 2013, 05:25:52

Vizualizări: 13.8K

Voturi: 10

Această pagină web conține imagini inserate prin Wordpress. Codul folosit pentru a insera prima imagine este:

[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="Un grup Forest Legacy" src="http://steven.doig.com.au/files/2013/06/Forest_Legacy_m-1024x681.jpg" width="1024" height="681" />
    </a> un grup Forest Legacy[/caption]

Această imagine este controlată de CSS:

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

Vreau să fac această imagine responsive. Am inserat următorul CSS:

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

Totuși, DIV.wp-caption rămâne la 604px, așa cum este specificat în postarea Wordpress. Am încercat să specific acest lucru ca procent (97.41935483%), dar Wordpress l-a reinterpretat ca 104px.

CSS-ul inline suprascrie CSS-ul pe care îl inserez în fișierul de stiluri.

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

Ai idei despre cum pot face .wp-caption responsive?

Steve

1.75K

responsive subtitrări

Toate răspunsurile la întrebare

O altă posibilitate este să modificăm output-ul shortcode-ului astfel încât lățimea să nu mai fie hard-codată. Modificând exemplul din Codex pentru a nu avea lățime fixă:

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

/**
 * Filtru pentru înlocuirea shortcode-ului [caption] cu cod compatibil HTML5
 *
 * @return text Conținut HTML care descrie figura embedded
 **/
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

helgatheviking

14.5K

22 iul. 2013 06:43:59

Iată o soluție mult mai simplă și mai curată:

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

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

Alexey Kosov

165

2 aug. 2018 17:18:56

funcționează ;) mulțumesc

.wp-caption {
/* Forțează caseta să fie 100% */
width: 100% !important;
}

#content .wp-caption a img {
/* Micșorează dacă este prea mare */
max-width: 99.03225806%; /* 614/620 */
height: auto;
}

Iza

1

12 mai 2020 17:40:31

David Kryzaniak 548 · Accepted Answer · 2013-07-22T05:47:07Z

Vei dori să folosești:

@media (max-width: 988px){
  .wp-caption {
    /* Forțează cutia să fie 100% */
    width: 100% !important;
  }
  #content .wp-caption a img {
    /* Redimensionează dacă este prea mare */
    max-width: 99.03225806%; /* 614/620 */
    height: auto;
  }
}

David Kryzaniak

548

22 iul. 2013 05:47:07