As imagens no Blogger, por omissão, estão envolvidas por uma âncora. Esta âncora abre a imagem nova janela (em tamanho original) ou numa lightbox (se esta opção estiver activada). Este é o comportamento normal das imagens, quer estejamos na página do post quer estejamos numa listagem de posts.
Em termos de usabilidade isto deixa muito a desejar. Os utilizadores esperam que a imagem ligue para a página do artigo quando estão numa listagem, mas não é isto que acontece. Não queremos que os utilizadores fiquem irritados porque o site não funciona como seria expectável.
Eis o que deve fazer para que as imagens liguem para o artigo em questão.
Inclua este código na secção <head> do seu post, ou se tem um ficheiro de scripts dedicado pode colocar lá a função linkListImagesToPosts(). Pode hospedar os seus scripts na sua conta do Google Drive.
A chamada à função deve ser colocada na secção <head> porque assim podemos usar uma condição que irá chamar a função apenas nas páginas de listagens (linha 2).
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>
//<![CDATA[
function linkListImagesToPosts() {
$(".blog-posts .post-outer").each(function(index) {
// get the post url from the title anchor
var newhref = $(this).find("h3.post-title a").attr("href");
// find the image anchor and clone it
var a = $(this).find("img").first().parent("a");
var aclone = a.clone();
// change the link in the image anchor
aclone.attr("href", newhref);
// replace the old anchor with the new one
a.replaceWith(aclone);
});
}
$(document).ready(function() {
linkListImagesToPosts();
});
//]]>
</script>
</b:if>
A função linkListImagesToPosts(), é muito simples. Fazemos um ciclo por todos os posts e para cada post copiamos o URL da âncora do titulo e usamos esse URL na âncora da imagem.
Nota Importante: Se alterou o HTML no seu template terá que reflectir as alterações nos selectores da função.
Uso da função clone()
Há um problema em simplesmente substituírmos o href na âncora da imagem. Se o blog usar um lightbox para as imagens, o seu script vai atribuir um evento à âncora que vai preveni-la de disparar o redirecionamento de href.
Por isso, mesmo que o href seja alterado, clickar na imagem vai continuar a mostrar o lightbox.
Resolvemos este problema usando a função jQuery clone(). A cópia do elemento criada pelo clone() não leva consigo os mesmos eventos que estavam aplicados ao elemento original. Por isso só temos que alterar o href da cópia e substituir o elemento original pela cópia.