HTML Thumb com qualidade horrível - Blogger

Júnior Kirchoff · 17 de julho de 2020

Pessoal estou com um problema que já estou para arrancar os cabelos..
Tenho um site de notícias na plataforma do blogger, onde as thumbnail's do home ou da categoria estão numa resolução muito baixa, como nas fotos anexadas...
já revirei a linha de código tentando solucionar o problema porém sem nenhum sucesso, como sou leigo no assunto estou pedindo ajuda de vocês.
Eu acho que o problema está nesse intrinsic 72x72 que ao meu ver tá exibindo a imagem nessa resolução baixa, porém não acho a linha de código que corresponde a isso no html do blogger.
Alguém poderia me ajudar?

Júnior Kirchoff · 17 de julho de 2020

Alguém???

ArThDsL · 17 de julho de 2020

Boa noite @Júnior Kirchoff,

O tema que você utiliza no seu blog é um "Oficial Google Theme" ou um "Third-Party Theme"?

Fico no aguardo, grande abraço.

Júnior Kirchoff · 18 de julho de 2020

21 horas atrás, ArThDsL disse:

Boa noite @Júnior Kirchoff,

O tema que você utiliza no seu blog é um "Oficial Google Theme" ou um "Third-Party Theme"?

Fico no aguardo, grande abraço.

Boa tarde, não sei te dizer.
o tema que utilizo nele é um tema pago que baixei da internet, acredito que não seja oficial google theme

ArThDsL · 19 de julho de 2020

Bom dia @Júnior Kirchoff,

Geralmente o Google seta as propriedades da imagem direto na URL, abdicando assim o CSS direto do Blogger de agir.

Como seria isso?

Bom, você tem o seu link de imagem:

https://2.bp.blogspot.com/-DVIQzeflTJY/UU8p1nssheI/AAAAAAAADoI/2vBPMeIUDrY/s72/a+POR+DO+SOL.jpg

Imagem random pega na net só para exemplo (Créditos: Gláucia Santana)

Nesse link tem uma propriedade s72: 2.bp.blogspot.com/.../.../.../.../s72/...

Essa propriedade define o tamanho da imagem, que seria de 72x72, o máximo permitido pelo Google, se não me engano, é de 2048x2048, mas tem outras propriedades na qual você pode encaixar, tais como w(wight) e h(height), nesse caso a divisão das mesmas pode ser feita utilizando um traço(-).
Ex do W e H: 2.bp.blogspot.com/.../.../.../.../w800-h600/...

Caso editemos o link acima para a qualidade 2048px ficaria:

https://2.bp.blogspot.com/-DVIQzeflTJY/UU8p1nssheI/AAAAAAAADoI/2vBPMeIUDrY/s2048/a+POR+DO+SOL.jpg

Alterando o W para 800 e o H para 600:

https://2.bp.blogspot.com/-DVIQzeflTJY/UU8p1nssheI/AAAAAAAADoI/2vBPMeIUDrY/w800-h600/a+POR+DO+SOL.jpg

Espero ter ajudado!

Grande abraço.

Júnior Kirchoff · 20 de julho de 2020

Show ArThDsL, acredito que achei o caminho, encontrei a seguinte função seguindo a linha do s72 no html do blogger:

//<![CDATA[
function bp_thumbnail_resize(e,t){var n=260;var r=170;image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c/","/w"+n+"-h"+r+"-c/")+'" alt="'+t.replace(/"/g,"")+'" title="'+t.replace(/"/g,"")+'"/>';if(t!="")return image_tag;else return""}
//]]>

Pode observar a frente do código que possui o s72 na mesma linha do resize, Porém quando alterei para por ex s240 as thumbs continuaram com a qualidade ruim, como eu não entendo nada de códigos gostaria de saber se tenho que alterar mais algo nessa linha, ou se segui o caminho certo?

ArThDsL · 21 de julho de 2020

Boa tarde @Júnior Kirchoff,

Peço desculpas pela demora na resposta, as coisas aqui estão corridas kkkkkk.

Tenta substituir o código acima por esse:

//<![CDATA[
function bp_thumbnail_resize(e,t){var n=240;var r=240;image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s240/","-c/")+'" alt="'+t.replace(/"/g,"")+'" title="'+t.replace(/"/g,"")+'"/>';if(t!="")return image_tag;else return""}
//]]>

Fico no aguardo para saber se obteve exito, não se esqueça de dar um CTRL+F5 na primeira vez que for carregar as páginas, isso serve pra dar uma limpada no cache do navegador!

Grande abraço.