Blogger: Como fazer as imagens nas listagens ligarem para o artigo

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 == &quot;index&quot;'> 
 <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.

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.

Dércia Silva
Publicado por Dércia Silva em 19 dezembro, 2013

Artigos relacionados