Primeira imagem da postagem acima do título
Autor: Alan Felipe | Publicado: 2016-11-16T11:25:00-02:00





Olá! Como vossa mercê está? Faz muito tempo que eu, e diversas outras pessoas, venho procurando um tutorial sobre como colocar a primeira imagem da postagem acima do título da postagem, e hoje trago exatamente isso para vocês: o tutorial sobre como colocar a primeira imagem da postagem acima do título da postagem. Vamos ao tutorial?
1. Primeiro, vá em Modelo &gt; Editar HTML &gt; Clique na caixa de códigos &gt; Ctrl + F &gt; Procure por:

&lt;div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'&gt;
&nbsp; &nbsp; &lt;b:if cond='data:post.firstImageUrl'&gt;
&nbsp; &nbsp; &nbsp; &lt;meta expr:content='data:post.firstImageUrl' itemprop='image_url'/&gt;
&nbsp; &nbsp; &lt;/b:if&gt;
&nbsp; &nbsp; &lt;meta expr:content='data:blog.blogId' itemprop='blogId'/&gt;
&nbsp; &nbsp; &lt;meta expr:content='data:post.id' itemprop='postId'/&gt;
&nbsp; &nbsp; &lt;a expr:name='data:post.id'/&gt;
&nbsp; &nbsp; &lt;b:if cond='data:post.title'&gt;&nbsp; &nbsp; &nbsp; &lt;h3 class='post-title entry-title' itemprop='name'&gt;
Recomendo pesquisar pela aprte destacada, o restante do código é apenas para você se localizar, pois este código se repete.

2. Abaixo dele, cole:

&lt;b:if cond='data:post.firstImageUrl'&gt;
&lt;div class='container'&gt;
&nbsp; &lt;img class='fakeImg' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' height='200px' width='100%'/&gt;
&nbsp; &lt;/div&gt;
&lt;style&gt;
.container .fakeImg {
&nbsp; &nbsp; background: no-repeat center;
&nbsp; &nbsp; background-size: cover; &nbsp; 
}
.container {
 width: 100%;
&nbsp; &nbsp; display:inline-block;
}
.post-body .separator:first-child img {
 display: none;
}
&lt;/style&gt;
&lt;/b:if&gt;&nbsp;
O valor em negrito é a altura da imagem, os valores em itálico devem ser os mesmos e indicam a largura da imagem.

2.1 Nem sempre a imagem que está no corpo da mensagem irá sumir, às vezes ela irá se repetir, aparecendo acima do título da postagem e na postagem.

3. Salve.

4. Vá em Layout &gt; Adicionar um Gadget HTML/JavaScript &gt; Cole o seguinte código dentro e salve:

&lt;script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/&gt;
&lt;script type='text/javascript'&gt;//&lt;![CDATA[
$(document).ready(function(){
 // the order goes container -&gt; body -&gt; surround -&gt; image
 var body = $('.post-body').first();
 var container = $(body).parent();
 var image = $(body).find('img').first();
 var surround = $(image).parent();
 $(surround).prependTo(container);
});
//]]&gt;&lt;/script&gt;
&lt;script type='text/javascript'&gt;
$('.container img').replaceWith(function(i, v){
&nbsp; &nbsp; return $('&lt;div/&gt;', {
&nbsp; &nbsp; &nbsp; &nbsp; style: 'background-image: url(' + this.src + ');' +
&nbsp; &nbsp; &nbsp; &nbsp; 'width:' + this.width + 'px;' +
&nbsp; &nbsp; &nbsp; &nbsp; 'height:' + this.height + 'px;' ,
&nbsp; &nbsp; &nbsp; &nbsp; class: 'fakeImg'
&nbsp; &nbsp; })
})
&lt;/script&gt;

Qualquer problema com o tutorial, comente. Se utilizar, credite. Tchau :3

Créditos: x x