Imagens responsivas no Wordpress

[Chirlison 1]

Boa tarde a todos!

Pessoal estou com dificuldade para alterar a imagem do post de acordo com o tamanho da tela do usuário.

Configurei o arquivo functions.php para criar os seguintes tamanhos de thumbs:

//Tamanho para thumbs para post type corpo-clinico
add_image_size('thumb_corpo_clinico',251,251,true);

//Tamanho para thumbs para post type notícias
add_image_size('thumb_noticias',366,225,true);

O que eu preciso fazer é:

Quando o site for acessado por um Desktop, carregaria a imagem normal.

Quando o site for acessado por um tablet, carregaria a imagem de tamanho 366x366.

Quando o site for acessado por um smartphone, carregaria a imagem de tamanho 251x251.

Atualmente, independente de qual dispositivo o site é acessado ele carrega a maior imagem.

Abaixo está o código da página que mostra o post.

<?php get_header();?>

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

    <article id="single-noticias" class="container">

    <header>

        <figure>

        <?php the_post_thumbnail('thumb_servico',array(''));?>

        </figure>

        <h1><?php the_title();?></h1>

        <h2><?php the_field('subtitulo_da_noticia');?></h2>    

    </header>    

    <?php the_content(); ?>

    </article><!-- /.corpo-clinico -->   

<?php endwhile; else: ?>

<?php endif; ?>

<?php get_footer();?>

Desde já, agradeço a todos que puderem me ajudar!

[RickSilva 0]

Bom, eu usaria @media queries. Na minha opniao é muito melhor

[L. Henrique 179]

Chirlison,

O ideal é criar uma imagem e salvar ela para Web. Assim ao invés de ter 3 imagens, uma com 1Mb (PC), outra com 600Kb e outra com 200Kb, a melhor opção é ter uma única bem trabalhada que não ultrapasse 180Kb. Assim todos os dispositivos e qualquer internet consegue carregar consideravelmente rápido dependendo da quantidade de imagens a serem carregadas.

Como o Felipe citou, o certo é utilizar media queries, mas você vai se deparar com o problema de que o seu PHP não vai poder alterar as imagens dentro do CSS tão facilmente assim.

O que você vai precisar é de um jQuery ou até mesmo do próprio PHP. Você vai precisar pegar a largura da viewport da forma abaixo:

$(window).width();

E criar condições:

var window = $(window).width();
var div = $('#div');

if ( window < 500 ) {
   div.css('background', 'url("suaimagem500px.jpg") no-repeat center center');
} else if ( window < 300 ) {
   div.css('background', 'url("suaimagem300px.jpg") no-repeat center center');
} else {
   div.css('background', 'url("suaimagemnormal.jpg") no-repeat center center');
}

Veja se isso tudo te serve, senão retorne aqui no tópico.

Abraços!

[Chirlison 1]

Pessoal, pesquisando no google, acabei achando este artigo que mostra como otimizar imagens para cada contexto de uso no WordPress.

Segue o link do artigo:

http://www.designadaptavel.com.br/artigos/otimizando-imagens-para-contexto-de-uso-wordpress

 

Segui o tutorial e a imagem a ser carregada será de acordo com o dispositivo que está acessando o site.

Com isso, tenho 3 tamanhos de imagens diferentes que são carregadas de acordo com o dispositivo que acessa o site.

 

L. Henrique, concordo quando você disse que o ideal é criar uma imagem e salvar ela para Web. Assim ao invés de ter 3 imagens, uma com 1Mb (PC), outra com 600Kb e outra com 200Kb, a melhor opção é ter uma única bem trabalhada que não ultrapasse 180Kb.

 

A barreira que encontro para fazer da forma como você disse é que ao entregar o site, o cliente é quem vai alimentá-lo, não terei controle nenhum sobre a imagem que ele irá postar no artigo ou na notícia.

 

Muito obrigado Felipe Medeiross e L. Henrique pela ajuda!