wake-up-neo.com

Responsive Images - Fügen Sie der benutzerdefinierten Images-Funktion srcset-Attribute hinzu

Wenn ich get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL ); verwende, gibt wordpress die srcset automatisch so aus:

<img 
    width="1000" 
    height="625" 
    src="https://x.cloudfront.net/wp-content/uploads/2017/08/photo.jpg" 
    class="attachment-entry-fullwidth size-entry-fullwidth wp-post-image" 
    alt="" 
    srcset="
        https://x.cloudfront.net/wp-content/uploads/2017/08/photo.jpg 1000w, 
        https://x.cloudfront.net/wp-content/uploads/2017/08/photo-768x480.jpg 768w" 
    sizes="
        (max-width: 767px) 95vw, 
        (max-width: 979px) 80vw, 1200px
">

Gibt es eine native WordPress-Funktion oder eine andere Möglichkeit, in meiner benutzerdefinierten Funktion unten srcset-Daten für Bilder auszugeben?

function photo_shortcode($atts){
   extract(shortcode_atts(array(
      'no' => 1,
   ), $atts));

   $no     = ( $no       != ''     ) ? $no : 1;
   $images = get_field('fl_gallery');
   $image  = $images[$no];

if ($image) {
   $credit = get_field('fl_credit', $image['id']);
   return '<div class="kalim"><img title="' . esc_attr( sprintf( the_title_attribute( 'echo=0' ) ) ) . '" alt="' . esc_attr( sprintf( the_title_attribute( 'echo=0' ) ) ) . '" src="' . $image['url'] . '" /><div class="kalca">' . $image['caption'] . '</div>' . (!empty($credit) ? '<div class="kalcr">Credit:' . $credit . '</div></div>': '' ) ;
 }

}

add_shortcode('photo', 'photo_shortcode');
1
Joanna Mikalai

Ich denke, wp_get_attachment_srcset() ist das, wonach Sie suchen.

$srcset = wp_get_attachment_image_srcset( $image['id'], array( 100, 100 ) );

Jetzt können Sie den HTML-Code umgehen und in Ihrem Code verwenden.

<img src="PATH HERE" srcset="<?php echo esc_attr( $srcset ); ?>">
1
Jack Johansson

Schauen Sie sich diesen Artikel an https://alexwright.net/web-design-secrets/responsive-images-wordpress/

Es wird erklärt, wie srcset und responsive Images in Wordpress funktionieren.

0
Alfrex92