Qual é a melhor maneira de usar a Imagem em destaque para design web responsivo?

8

Eu tenho uma ideia brilhante e como o WordPress já cuida de alguns dos trabalhos, eu só preciso encontrar um bom método para fazer isso funcionar.

Estou trabalhando em um projeto que precisa ser responsivo a todos os dispositivos, seja um PC de mesa ou um dispositivo móvel. Assim, quero que as imagens também sejam responsivas, o que significa que os dispositivos móveis não devem carregar imagens de 50 KB +.

Para cada página ou postagem, posso adicionar uma imagem em destaque usando o recurso Post Miniaturas, que, em tamanho real, tem uma imagem de cerca de 950 x 250 a ~ 60 KB. Se eu carregar o site em um iPhone / Android, não quero que a imagem de ~ 60 KB seja carregada, mas prefiro que a pequena miniatura seja carregada em seu lugar.

O método padrão para imagens responsivas é tornar a largura da imagem 100% do contêiner pai, portanto, ela será redimensionada automaticamente se o contêiner pai também for redimensionado. Não é o melhor método para imagens maiores.

Eu pensei em testar script de imagem responsivo do Filament Group , mas eu tentei e não funcionou direito. Uma forma de conseguir isso é por meio da detecção do agente do usuário, mas prefiro não fazer esse método, já que os agentes do usuário podem ser falsificados.

Aqui está outro método para redimensionar imagens na hora , mas isso parece estar duplicando o que o WordPress já fez.

Se houver uma maneira de fazer isso com as imagens da Galeria de Mídia que o WordPress tem como padrão, com todas as miniaturas redimensionadas já criadas, isso seria preferível.

    
por micah 31.08.2011 / 20:51

4 respostas

9

Etapa 1:

Defina dois tamanhos de imagem personalizados, por exemplo:

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Etapa 2:

Implemente seus meios escolhidos para determinar o cliente. Existem várias maneiras e o método que você usa está fora do escopo desta questão. Mas, supondo que você tenha um método que funcione para você, envie o resultado para alguma variável, como $mobile_device = true;

Etapa 3:

Nos seus arquivos de modelo, exiba a imagem condicionalmente, com base no cliente.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Observação: você pode repetir o if/else (ou fazer um switch ) para vários formatos (por exemplo, tamanhos de tela). Basta adicionar vários tamanhos de imagem personalizados e testar condicionalmente para cada tamanho de tela que você deseja oferecer suporte.

    
por Chip Bennett 31.08.2011 / 21:58
1

A melhor maneira é usar uma grade fluida para criar o tema WordPress e remover os valores de largura e altura das imagens em destaque por meio de uma função para dimensionamento proporcional. Um tutorial sobre como tornar as imagens do WordPress responsivas :

  

Método 1: o CSS

     

Adicione o seguinte código ao seu arquivo CSS. Isso fará com que as imagens   escalonável de acordo com o tamanho da tela.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }
     

Remover altura e largura automáticas no WordPress <img> tags

     

Agora arraste a janela para ver o dimensionamento da imagem em ação. Você notará   que as imagens em sua escala do blog WordPress esquisitamente. Eles horizontal   dimensionamento fino, mas escala vertical em imagens do WordPress estão erradas.

     

Para tornar as imagens redimensionáveis proporcionalmente no WordPress, temos que   remova os valores automáticos de largura e altura WordPress add para    < img > tags.

     

Como exemplo, temos que mudar isso:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />
     

Para isso:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />
     

Para as imagens que estão em uma postagem ou em uma página de página / modelo estática, todas   você tem que fazer é, adicionar o CSS acima ao arquivo style.css , e então   remova as propriedades ‘width’ e ‘height’ da tag < img >   no seu editor do WordPress. É isso!

     

Mas para as imagens exibidas dinamicamente pelo WordPress, como   postar miniaturas, a largura e a altura precisam ser removidas dinamicamente   usando uma função.

     

Adicione a seguinte função ao seu arquivo functions.php .

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}
     

Então, quando você ligar para essas imagens em miniatura em seu template.php   página, substitua:

the_post_thumbnail();
     

Com isto:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );
     

É isso. Arraste e redimensione o navegador para ver sua resposta   Imagens do WordPress em ação!

     

Método 2:

     

O acima não funcionará para alguns temas.

     

Se você é um dos poucos que não funcionou, você ainda pode obter seu   problema de imagem resolvido usando a função abaixo.

     

Adicione a seguinte função ao seu arquivo functions.php .

     

Isso remove os atributos de largura e altura inline das imagens recuperadas   com the_post_thumbnail() e impede que esses atributos sejam   adicionado a novas imagens adicionadas ao editor.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}
    
por Thanushka 22.11.2011 / 22:47
0
  

Uma forma de conseguir isso é através da detecção do agente do usuário,   mas eu prefiro não fazer este método, uma vez que os user-agents podem ser   falsificado.

Este não é um método ruim e é realmente o padrão da indústria, um bom WURFL tem uma classificação de precisão muito alta, os que eu usei e testei sempre retornaram resultados sólidos e testes independentes (acima do que eu me incomodaria em fazer) tê-los na faixa de 98% +. Quem se importa se algum bot fracassado está falsificando um user-agent, eles não estão lá por um bom motivo de qualquer forma.

Para o passo 2, acho que ou o método se resume ao que é realmente mais rápido, uma consulta de mídia WURFL ou CSS com suporte a PHP.

    
por Wyck 01.09.2011 / 07:58
0

Primeiro você tem que definir "melhor". Minha definição seria: Processa a imagem com o efeito pretendido pelo designer em qualquer dispositivo ou tela Renderiza a imagem com qualidade igual à original Consome a quantidade mínima absoluta de recursos humanos e do sistema (por exemplo, largura de banda, CPU, tempo do designer / programador)

Aqui estão as abordagens que vi até agora:

  1. Carregue o tamanho total da imagem e faça com que o navegador a reduza para ajustar o layout. Defina a imagem max-width como 100% e diminua a largura do seu contêiner.

Prós: exige quase nenhum esforço para implementar, compatível com vários navegadores e suportado por navegadores mais antigos.

Contras: geralmente faz o download de mais dados do que o necessário e, em seguida, gasta ciclos de CPU no cliente reduzindo-o (lento). Você pode acabar com imagens de baixa qualidade, dependendo do algoritmo de dimensionamento do navegador. Não há possibilidade de direção artística e não é possível adaptar a imagem para exibições do tipo retina.

  1. Use as consultas de mídia para ler as propriedades do cliente e buscar uma das várias imagens personalizadas para diferentes pontos de interrupção em seu design. (A proposta Responsive da extensão de imagens em HTML e as tags de atributo srcset estão trabalhando para associar essa abordagem às especificações HTML) .

Prós: download mais rápido em dispositivos móveis. Pode lidar com displays do tipo retina. Melhor qualidade de imagem desde que as imagens foram processadas usando algum método de alta qualidade. Direção artística torna-se possível.

Contras: alguém precisa gastar tempo processando, cortando e gerenciando várias versões da mesma imagem. Mais codificação: agora você tem que soletrar toda e qualquer versão da imagem de alguma forma e criar consultas de mídia para todos os layouts desejados. Repita o procedimento acima para cada imagem que você servir. Funcionará somente para navegadores que suportam consultas de mídia CSS3 ou novas tags.

  1. Faça o backend Otimizar imagens para qualquer tela ou layout usando uma única imagem de origem em tempo real. Na minha opinião, isso equivale a tratar imagens responsivas como uma tarefa de negociação de conteúdo, muito parecida com HTTP.

Prós: o Designer não precisa gastar tempo para processar imagens e gerenciar várias versões. A imagem com o tamanho ideal é enviada todas as vezes. Pode lidar com displays de tipo retina e ajustar dinamicamente para direção artística (embora com algum esforço extra - tem que saber onde focar). Nenhuma marcação especial ou extra é necessária (advertência abaixo). Compatível com vários navegadores e funcionará para navegadores mais antigos.

Contras: tem que capturar e transmitir informações sobre o navegador do cliente e as propriedades da tela. A primeira vez que uma imagem é carregada pode ser mais lenta do que em qualquer outra abordagem, já que a imagem precisa ser processada (normalmente é armazenada em cache para solicitações posteriores).

    
por learnweb 15.06.2017 / 13:03