Внедрение взаимосвязи Zurb в WordPress

Я действительно почесываю голову, пытаясь найти лучший способ для отклика изображений с помощью WordPress. Zurb только что выпустил новый плагин javascript для своей основы Foundation. Я использую Foundation в своей настраиваемой теме, но я просто не уверен, как сделать изображение с изображением работать с этим? Может ли кто-нибудь помочь мне с его работой с WP?

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

Ps. Просто хочу уточнить. Не совсем говорить о том, как реагировать на изображения. Я знаю, как это сделать, но я говорю о загрузке изображений разных размеров, которые создает WP, на основе размера экрана или устройства.

Если вы еще не включили миниатюры в своей теме, добавьте этот снипп в свой файл functions.php:

add_theme_support('post-thumbnails'); 

Затем добавьте этот код.

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

Вот как это работает:

 function( 'unique_identifier', width, height); 

Теперь самое интересное. Чтобы использовать это в своем шаблоне:

 <?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; ?> 

Старый вопрос, но я думал, что поделюсь своим решением, которое заставит все изображения реагировать, добавив фильтр для 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; }