08/07/2017

Postagens populares com imagens embaçadas? Como resolver


Ohayoo queridos bunnie's, peço desculpas mais uma vez por ter deixado o blog fechado tanto tempo. Prometo que agora o blog ficará aberto por um longo e bom tempo! Nessa temporada de criar o layout, percebi como as imagens do gadget de "Postagens Populares" estavam realmente horríveis e embaçadas. Desde a atualização de 2016 no Blogger, o blog vem apresentando problemas com as imagens, tanto os avatares dos comentários, como o gadget de postagens populares e recentes, inclusive as próprias imagens que uplamos para postagem. Porém hoje darei dicas do que fazer para melhorar a qualidade das imagens dos gadget's "Postagens Populares". 

Quando o é que as imagens ficam embaçadas?

Esse erro é notado, quando implantamos algum estilo diversificado do Wordpress ou do próprio Blogger. Geralmente esses código deixam as imagens maiores, como 120px; 200px; 300px; enquanto dentro do blog o tamanho padrão é 72px;. Então quando estalamos um código que as imagens são maiores do que 72px ela se estica e o resultando é ficar embaçada/desfocada. 


Verificando o erro!

O caso das imagens embaçadas pode ser causado por duas razões e é bom detectá-lo antes de tomar alguma providencia, que pode acabar não funcionando. A primeira razão e geralmente a mais correta de ser, é a citada acima. O tamanho padrão das imagens do gadget "Postagem populares". A segunda causa pode ser o sub domínio. O que é isso? O blogger onde postamos é um domínio, e onde uplamos nossas imagens é um sub domino do blogger. Sempre que você upar uma imagem pelo Blogger a URL dela será algo similar a: https://2.bp.blogspot.com/  entre outras variações do blogger.  Se você utiliza serviços de outros serviços como: Google Sites, TinyPic, Flickr ou em quaisquer outro serviço disponíveis na Web, o problema de imagem embaçada irá acontece. Por alguma razão que eu desconheço em gadgets como Postagens populares ou Postagens similares, as imagens fora do domínio do blogger ficam embaçadas. 

Corrigindo o problema 

Agora que provavelmente já saiba qual é o problema das suas imagens embaçadas vamos resolve-lo. Vá ao Blogger e selecione o blog que está querendo corrigir o problema, em seguida no HTML do blog. Dentro do HTML ative Ctrl+F e procure por:
 post.featuredImage, 72,
Vai aparecer algo similar a isso:


  <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>

# O 72 é o tamanho das imagens, eu costumo deixar em 300. 
# O 1:1 é a proporção, é só trocar  para 3:2 ou 2:3 ou 1:5, ao seu agrado.  

Ainda não deu certo?

Tem outro método que possa lhe ajudar. Que é utilizando script. Vamos precisar do ID do gadget para isso vá outra vez em seu HTML e pesquise pelo gadget que está com a imagem embaçada, é muito fácil detectar o gadgte, mas procurar pelo nome que deu a ele no Layout. Exemplo você deixou "Postagens Populares" basta dentro do HTML procurar por ele. Agora você vai achar algo similar a :

<b:widget id='PopularPosts1' locked ='false' title='Mais Vistos' type='PopularPosts' visible='true'>

A parte marcada em azul é o ID, então basta verificar o que esta no seu, guarde o nome em um bloco de notas, pois vamos precisar dele. 

Agora procure por : </body>

Quando achar o código acima dele cole:
<script type='text/javascript'>              
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/w72-h72-p-nu/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("PopularPosts1",310);              
</script>
Onde está marcado em vermelho, cole o ID do seu gadget, salve! E veja o resultado.

Outra forma também de arrumar isso é também colar sobe o </body> cole o seguinte código: 
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {  
    $('.PopularPosts ul li img').attr('src', function(i, src) {
        return src.replace('/default.jpg', '/mqdefault.jpg');
    });
    $('.PopularPosts ul li img').attr('src', function(i, src) {
        return src.replace('s72-c', 'w770-h505');
    });
    $('.PopularPosts ul li img').attr('src', function(i, src) {
        return src.replace('w72-h72-p-nu', 'w770-h505');
    });
 });
//]]>
</script>

2 comentários:

  1. Anônimo15/7/17

    Tenho muitos problemas com isso... muito obrigada por me ajudar

    ResponderExcluir
    Respostas
    1. Não foi nada. Eu que agradeço pela vista e o cometário. =)

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345