0Logo WordpressMostrar imagem ampliada ao passar o mouse no wordpress

Como parte das melhorias recentes que tenho feito em vários sites, eu queria fazer imagens em galerias mostrarem versões ampliadas quando pairava sobre. Fazendo isso com o básico CSS é bastante trivial, mas eu não queria apenas expandir a imagem original, Eu queria que o navegador pegasse um novo (maior) imagem também…

Todas as imagens já estão fornecendo um conjunto src completo, então tudo que eu precisei fazer foi usar um pouco de jQuery (que já está carregado pelo wordpress de qualquer maneira) para alterar o tamanho de exibição alvo para fazer o navegador puxar uma imagem maior. O bom é que o CSS funciona instantaneamente para que você obtenha uma imagem maior usando o arquivo original, e então a qualidade melhora uma fração de segundo depois, conforme o arquivo de alta resolução é carregado.

o CSS

o CSS Eu usei é o seguinte. Eu simplesmente adicionei isso ao style.css do meu tema (ou melhor, tema infantil – sempre uma boa ideia usar um)

dt.gallery-icon a img.size-thumbnail:flutuar
{
transformar: escala(3.0);
}

Nota (1) – o de cima CSS aplica-se apenas a imagens da galeria. É improvável que alguém queira esta funcionalidade para todas as imagens exibidas em qualquer lugar da página, mas você pode querer para a seção de conteúdo principal. Você precisaria verificar como o seu tema estrutura este, mas, no meu caso, a área de conteúdo principal é um “seção” então o código a seguir faria o trabalho

section.entry-content p a img.size-thumbnail:flutuar
{
transformar: escala(3.0);
}

Nota (2) – Este código se aplica apenas a imagens em miniatura. Para imagens médias você substituiria “tamanho-miniatura” com “tamanho médio”, e para grande com “tamanho grande”.

Nota (3) – Como minhas miniaturas têm 120x80px, quero aumentá-las para 3x seu tamanho original. Já tenho um tamanho de imagem personalizado de 360×240 que o wordpress cria para mim que está incluído no conjunto src. Para telas de alta resolução, também há tamanhos de imagem ainda maiores que eu tenho (por exemplo. 720×480). Criar tamanhos de imagem adicionais no wordpress é fácil – existem muitos bons guias online se você precisar fazer isso.

Se você quiser dimensionar para 1,5x ou 2,0x, altere simplesmente o 3.0 como desejado

O jQuery

Adicione o seguinte ao seu (filho) arquivo de script do tema (assumindo que tem um). Se não houver um, crie seu próprio, e 'enfileirar’ com uma função personalizada no (filho) theme’s functions.php

jQuery(documento).pronto(função(){

  jQuery("dt.gallery-icon a img.size-thumbnail").flutuar(função(){
    jQuery(este).atr("tamanhos","(largura máxima: 360px) 100vw, 360px");
    }, função(){
    jQuery(este).atr("tamanhos","(largura máxima: 120px) 100vw, 120px");
  });

  //repita o acima 5 linhas aqui para cada tamanho de imagem diferente que você deseja modificar

});

O código acima se aplica a imagens com miniatura de classe que são encontradas dentro de qualquer dt com uma classe de ícone de galeria – então em outras palavras – apenas para imagens dentro da estrutura de galeria embutida do wordpress. Ao passar o mouse, a largura máxima é aumentada de 120 para 360 (um aumento de 3x para corresponder ao meu CSS!), e então a segunda parte da função restaura o original 120 largura quando o foco para.

Tal como acontece com o CSS acima, você pode ajustar os números para mudar o quanto a imagem aumenta, e você pode mudar o dt.gallery-icon a img.size-thumbnail seção para direcionar um elemento ou classe diferente, dependendo de quais imagens você deseja direcionar.

Coloque seu próprio script na fila

Se o seu tema não tinha um arquivo de script e você precisa enfileirar o seu, adicione o seguinte ao seu (filho) theme’s functions.php (presumindo que você chamou seu arquivo de script de imagem-zoom.js e o salvou na pasta raiz do tema)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', ordem( 'jquery' ), '', verdadeiro);
wp_enqueue_script( 'img-zoom' );

O acima irá registrar o seu script, no rodapé, certificando-se de que é colocado após jquery (então jquery já deve estar disponível quando ele executa)

Adicionando tamanhos de imagem

Para completar, veja como adicionar tamanhos de imagem personalizados ao wordpress. Novamente, adicione isso ao seu (filho) theme’s functions.php

add_image_size( 'um quarto de largura', 192, 144, falso );

Acima, adicionei um novo tamanho de imagem chamado “um quarto de largura” com largura máxima de 192px e altura máxima de 144px. A imagem não será cortada (daí o falso no final).

O WordPress agora criará imagens desse tamanho automaticamente quando você fizer upload de imagens (você precisará usar um plugin de reconstrução de miniaturas para recriar as miniaturas de imagens já enviadas).

No entanto, este novo tamanho de imagem NÃO aparecerá para inserção no editor. Para torná-lo disponível, também adicione o seguinte código ao seu functions.php

function my_custom_image_sizes( $tamanhos ) {
    return array_merge( $tamanhos, ordem(
        'um quarto de largura' => __('Quarter Width'),
    ) );
}

Respeitando as configurações existentes

Mais uma coisa que você pode querer fazer (para garantir que as imagens responsivas funcionem bem) é criar maior (i.. oi-dpi) tamanhos de miniatura que respeitam o GUI de recortar miniaturas ou não. Para fazer isso, use o código abaixo que, como você verá, foi ligeiramente modificado do mais básico acima

add_image_size( 'resp-thumb-2x', (get_Option( 'thumbnail_size_w' ) == 0 ? 0 : '240'), 160, get_Option( 'thumbnail_crop' ) );

O código acima verifica 2 coisas – em primeiro lugar, verifica se a opção de recorte está definida, e se for, é um espelho para nosso novo tamanho responsivo. Ele também verifica se a largura está definida para 0 (i.. sem máximo) nesse caso, nossa nova imagem também não terá máximo. Eu chamei o novo tamanho da imagem “resp-thumb-2x” pois é um 'responsivo’ cópia da miniatura que é duas vezes maior (para telas de alta resolução com o dobro da densidade de pixels normal). Também criei vários outros tamanhos para fazer um conjunto bastante completo.

Nota – Já que minhas miniaturas originais eram 120×80 Eu quero que meus novos sejam 240×160 então esses são os tamanhos que eu especifiquei (codificado). Seria possível obter a altura e largura especificadas para a miniatura original e multiplicar por 2 para tornar esta função totalmente genérica, mas eu não fiz isso quando estava desenvolvendo, então vou deixar isso para você descobrir!

Uma dica final

Se, como eu, você cria seu próprio conjunto completo de novos tamanhos de imagem, você pode não querer que o wordpress crie seus próprios tamanhos ocultos extras. Além da imagem original, e a miniatura, o médio, e a imagem grande, wordpress também cria um “pós-miniatura”, uma “médio Grande”, a 1536×1536 e um 2048×2048. Estes estão desabilitados em 2 jeitos diferentes…

Para remover o 1536 e 2048 imagens são diretas

remove_image_size( '1536x1536' ); //remova o 1536 we dont need it
remove_image_size( '2048x2048' ); //remova o 2048 nós não precisamos disso

O post-thumb e o médio-grande são ligeiramente mais complicados

//remove the built-in medium-large
add_filter('intermediário_imagem_sizes', função($tamanhos) {
    return array_diff($tamanhos, ['médio Grande']);
});

//remove the built-in post-thumbnail
add_filter('intermediário_imagem_sizes', função($tamanhos) {
    return array_diff($tamanhos, ['pós-miniatura']);
});

Observe que a remoção da pós-miniatura parece, às vezes, ter efeitos estranhos na biblioteca de imagens do editor.

Uma nota final final

Ao decidir o tamanho da imagem (para imagens maiores, menos miniaturas) você idealmente deseja um tamanho em que as imagens de proporção comum sempre redimensionem bem para. Por esse motivo, recomendo os seguintes tamanhos

TamanhoLarguraAltura (4:3)Altura (16:9)Altura (3:2)
Trimestre192144108128
Terceiro288216162192
Metade384288216256
Médio576432324384
Cheio768576432512
Grande1152864648768
XL153611528641024

Observe como as larguras especificadas produzem alturas de números inteiros para todos 3 das relações de aspecto mais comuns. Você não vai conseguir isso com larguras como 150 ou 200.

Observe também o padrão de aumento. Pular 2 linhas na tabela e o tamanho dobra! As linhas pares (288,576,1152 e 1535) também têm 1,5x o tamanho anterior, portanto funcionam bem em telas de semi-hi-dpi usando um 50% aumento de dpi. Usando este conjunto de 7 tamanhos você tem uma boa variedade de opções utilizáveis ​​para a maioria das janelas de visualização E um bom conjunto de imagens responsivas que o wordpress adicionará automaticamente ao conjunto src, uma vez que terão proporções consistentes sem frações que levariam à perda de qualidade ou corte.

Atualmente, para miniaturas, eu tendo a permitir largura ilimitada OU cortei para 3:2 razão, então eu uso tamanhos de números inteiros para miniaturas, mas posso eventualmente ajustar meu tema e estender o sistema acima para trás, tendo opções de 48px e 96px de largura (note que não há valor entre estes 2 isso funcionaria infelizmente – e como eu uso miniaturas de 60px de largura, não optei por estender para trás). 72px funcionaria para ambos 4:3 e 3:2 (e 64px funcionaria com 4:3 e 16:9). Uma vez que a maioria das minhas imagens são tiradas em minha dSLR, elas são tipicamente 3:2 (o mesmo que a proporção do filme tradicional de 35 mm) então eu poderia usar este tamanho também, que funcionaria com os tamanhos grandes em todo o caminho, mas os tamanhos maiores não são cortados, enquanto minhas miniaturas são – Fico feliz que as imagens maiores sejam tanto paisagem quanto retrato, mas quero que as miniaturas sejam tipicamente paisagem apenas para caber no meu design, então é por isso que eu não estendi para trás. Esperançosamente, quanto mais e mais logotipos estiverem disponíveis, SVG'S, e uma vez JPEG-XL chega no navegador em um futuro próximo, muito disso será resolvido.

O que você acha? Deixe-nos cair um comentário abaixo! Se você deseja se inscrever, use o link de inscrição no menu no canto superior direito. Você também pode compartilhar isso com seus amigos usando os links sociais abaixo. Felicidades.

Deixe uma resposta