web-dev-qa-db-fra.com

Implémentation de l'échange de Zurb dans Wordpress

Je me gratte vraiment la tête pour essayer de trouver la meilleure méthode pour obtenir des images réactives avec Wordpress. Zurb vient de publier un nouveau plugin javascript pour leur framework Foundation. J'utilise Foundation dans mon thème personnalisé, mais je ne suis pas sûr de savoir comment faire fonctionner les images présentées avec cela? Quelqu'un peut-il m'aider à le faire fonctionner avec WP?

http://zurb.com/playground/foundation-interchange

Ps. Je veux juste clarifier. Pas vraiment parler de rendre une image sensible. Je sais comment faire cela, mais je parle de charger les images de différentes tailles créées par WP, en fonction de la taille de l'écran ou du périphérique.

post-thumbnailsresponsive
3
Anthony Myers

Si vous n'avez pas encore activé les vignettes dans votre thème, ajoutez cet extrait à votre functions.php:

add_theme_support('post-thumbnails');

Ensuite, ajoutez ce code.

add_image_size( 'responsive-small', 300, 500 );
add_image_size( 'responsive-large', 768, 500 );

Voici comment ça fonctionne:

function( 'unique_identifier', width, height);

Maintenant la partie amusante. Pour utiliser ceci dans votre modèle:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php 
    $smallsrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'responsive-small' );
    $largesrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'responsive-large' );
?>
<img src="<?php echo $smallsrc[0]; ?>" data-interchange="[<?php echo $smallsrc[0]; ?>, (only screen and (min-width: 1px))], [<?php echo $smallsrc[0]; ?>, (only screen and (min-width: 768px))], [<?php echo $largesrc[0]; ?>, (only screen and (min-width: 1280px))]"> 
<?php endwhile; endif; ?>
2
Myk Klemme

Vieille question, mais je pensais partager ma solution, qui rend toutes les images réactives en ajoutant un filtre pour post_thumbnail_html.

add_filter('post_thumbnail_html', 'slug_responsive_img', 5, 5);
//Image sizes for Interchange
add_image_size( 'fd-lrg', 1024, 99999);
add_image_size( 'fd-med', 768, 99999);
add_image_size( 'fd-sm', 320, 9999);

function slug_responsive_img($html, $post_id, $post_thumbnail_id, $size, $attr) {
    //make image links
    $attachment_id = $post_thumbnail_id;
    $default = wp_get_attachment_image_src($attachment_id);
    $size = 'fd-sm';
    $small = wp_get_attachment_image_src($attachment_id, $size);
    $size = 'fd-med';
    $med = wp_get_attachment_image_src($attachment_id, $size);
    $size = 'fd-lrg';
    $lrg = wp_get_attachment_image_src($attachment_id, $size);
    //create image tag with queries
    $html = '<img src="'.$default[0].'"';
    $html .= 'data-interchange="['.$default[0].', (default)],';
    $html .= '['.$small[0].', (only screen and (min-width: 320px))],';
    $html .= '['.$med[0].', (only screen and (min-width: 768px))],';
    $html .= '['.$lrg[0].', (only screen and (min-width: 1024px))],';
    $html .='">';
    return $html;
}
5
JPollock