Реализация Wordpress и рисунков

Я пытаюсь реализовать адаптивное изображение в своей теме WordPress. Доступно несколько плагинов, но те, которые я пробовал, испортили мой макет.

Что я в основном хотел бы сделать, так это заменить все существующие изображения (не только избранные изображения или миниатюры) адаптивными изображениями, либо с помощью srcset, либо

Моя тема WordPress создает изображения следующих размеров:

add_image_size( "maximal", "1900" );
add_image_size( "desktop", "1405" );
add_image_size( "tablet", "981" );
add_image_size( "smalltablet", "768" );
add_image_size( "mobile", "479" );

Я пытался заменить теги img функцией preg_replace, но мне никогда не удавалось захватить все изображения, и я не уверен, что это лучший способ сделать это. У некоторых моих изображений есть классы, у некоторых нет.

В конце концов, я хотел бы заменить простое изображение следующим образом:

<img src="<destination"> id="<id>" class="<class">

примерно так:

<picture>
<source srcset="<img src for mobile" media="(max-width: 500px)">
<source srcset="<img src for small tablets" media="(min-width: 700px)">
<source srcset="<img src for tablets" media="(min-width: 950px)">
<source srcset="<img src for desktop" media="(min-width: 1200px)">
<source srcset="<img src for big screens" media="(min-width: 1600px)">
</picture>

Эквивалент srcset также подходит.

Спасибо! Лоран


wordpress picturefill
person Laurent    schedule 14.07.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

я думаю, что фильтр post_thumbnail_html справится с задачей, код должен выглядеть так..

add_filter('post_thumbnail_html', 'picturefill_html', 99, 5);
function picturefill_html(){
    $id = get_post_thumbnail_id(); // get attachment id
    $src_small = wp_get_attachment_image_src($id, 'smalltablet'); // your new image size url
    $src_large = wp_get_attachment_image_src($id, 'maximal'); // your another new image size url
    $class = $attr['class'];

    $html = '
    <picture>
        <source srcset="'.$src_small[0].'" media="(max-width: 500px)">
        <source srcset="'.$src_large[0].'" media="(min-width: 1200px)">
    </picture>
    ';

    return $html;
}
person Lafif Astahdziq    schedule 11.11.2015

arrow_upward
0
arrow_downward

Picturefill теперь интегрирован в Wordpress, вы можете получить источник изображения и набор исходников, используя следующее:

wp_get_attachment_image_url( get_post_thumbnail_id( [PUT POST ID HERE]), 'medium' );

Получить исходный набор изображений:

wp_get_attachment_image_srcset( get_post_thumbnail_id([PUT POST ID HERE] ), 'medium' );

Так намного проще!

Спасибо, Лоран.

person Laurent    schedule 04.01.2016