Jump to content
Sign in to follow this  
Chirlison

Imagens responsivas no Wordpress

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By BelleFisio
      Olá, bom dia!
       
      As imagens do meu site ficam corretas, nas proporções definidas, quando testo localmente (inspecionado a página no navegador) , porém quando fiz um teste no servidor online e  verifiquei em outros monitores "reais"  as imagens ficam maiores que o tamanho máximo definido (e elas aumentam desproporcionalmente), em algumas resoluções.
       
      Por exemplo: eu testei em  monitores 17 e 19 polegadas (ambos com a resolução padrão 1024 X 768 px, tbm testei outras resoluções nessa telas) e as imagens ficaram "esticadas" horizontalmente e achatadas verticalmente, mas nessa mesma resolução, no computador onde fiz essas páginas (com resolução padrão de 1366 X768 px tela de 15"), as imagens ficam corretas (simulando uma tela na  resolução de 1024X768px). Em telas menores que 15" esta tudo certo tbm.
       
      Defini  um tamanho máximo para as imagens, porém quando em telas maiores elas aumentam muito e desproporcionalmente (mesmo com  resolução que já esta definida no css) :
       
      img{ width:100%; height:auto !important; max-width:400px; max-height:300px; } @media screen and (max-width: 1024px){ .img_textos{ width:100%; max-width:300px; }  
      Teria alguma forma, de quando  o site, chegar a resolução máxima definida (1366X768 px) as imagens e o site em geral não aumentar além do estabelecido para essa resolução (sendo esse o limite máximo)? 
       
      Obrigada!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.