Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
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'); 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!
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!
Bom, eu usaria @media queries. Na minha opniao é muito melhor