How to obtain the first image of the post in Blogger without Javascript

Hiển thị hình ảnh từ link url khác

Blogger there is an infinity of tags for the platform, among which are called <data> .These tags allow us to show certain elements within our blog, and our advantage can relocate at will.

For example, if we want to display the contents of the input, simply recurrirmos to<data: post.body /> , or if we need to show the title of this, we add <data: post.title /> to our code. Not to deviate from the main objective of this entry, we will enter no details on the use of these labels. In Blogger we can also get the thumbnail from the entrance, but only get to a size of 72 pixels. The label takes care of it is <data: post.thumbnailUrl />, and returns a URL in the following format:

  

1	http://X.bp.blogspot.com/-XXXXXXXXXXXXXXXXXX/s72-C/nombre-imagen.png

The value s72 in the URL indicates that the image will have a size of 72 pixels, while the value C indicates that the image is cut into a square. Here comes the problem, if we try to increase the size of the image using CSS because of its low resolution pixelated look.the solution:If you are using the combination <data: post.snippet /> and <data: post.thumbnailUrl />(for the summary and the corresponding thumbnail image), you can choose then to use <data: post.firstImageUrl /> , which will return the first input image in its actual size. to use it would suffice to include the following code in your template:

< Img  alt = 'some keyword'  expr: src = 'data: post.firstImageUrl' />

For example, if you want the index entries look like a card:

<b:if cond='data:blog.pageType == &quot;index&quot;'>    
<div class="entrada-indice">        
<a class="titulo-indice-post" expr:href="data:post.url">         
  <data:post.title/>       </a>          
 <p class="resumen-post">               
 <data:post.snippet/>               
 <div style="clear:both" />           </p>     
<img alt='thumb' class="miniatura" expr:src='data:post.firstImageUrl'/> 

</div><b:else/>        
<!-- Código original de la entrada, el cual se mostrará normalmente
dentro de ellas y páginas estáticas --></b:if>

What would return the following:

<div class="entrada-indice">        
<a class="titulo-indice-post"
href="http://www.tublog.blogspot.com/2013/04/entrada.html">        
  Soy el título de alguna entrada.       </a>         
  <p class="resumen-post">               
 Soy un breve resúmen de la entrada que se muestra debajo de
la imagen en miniatura.              
  <div style="clear:both" />           </p>                
<img alt='thumb' class="miniatura" src='URL-PRIMERA-IMAGEN'/>    
 </div>

.entrada-indice {/*Atributos para cada entrada dentro del índice*/}
.titulo-indice-post {/*Atributos para el título de cada título*/ 

display:block; /*Para pasar el enlace de inline a block*/}
.resumen-post {/*Atributos para el contenedor del resumen*/}
.miniatura {/*Atributos para la imagen*/}

Within each selector you must add the properties that you think suitable for your template.

Note: It is not necessary to rebuild the entire section, suffice to look something like this if you already use the system that is in Oloblogger :

<img expr:src='data:post.thumbnailUrl'/>

For this:

<img alt='alguna keyword' expr:src='data:post.firstImageUrl'/>

Bạn đang đọc bài viết How to obtain the first image of the post in Blogger without Javascript tại Website: Học Lập Trình

• Tweet
• Share
• Share
• Share
• Share