web-dev-qa-db-fra.com

Images réactives - Ajouter des attributs de jeu à des images personnalisées

Lorsque j'utilise get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );, wordpress génère automatiquement les données srcset telles que celles-ci:

<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
">

Existe-t-il une fonction wordpress native ou un autre moyen de générer des données srcset pour les images dans ma fonction personnalisée ci-dessous?

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');
imagesresponsive
1
Joanna Mikalai

Je pense que wp_get_attachment_srcset() est ce que vous recherchez.

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

Maintenant, vous pouvez échapper au code HTML et l'utiliser dans votre code.

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

Jetez un coup d'oeil à cet article https://alexwright.net/web-design-secrets/responsive-images-wordpress/

Il explique comment les images srcset et responsive fonctionnent dans Wordpress.

0
Alfrex92