A veces navegando por la internet nos hemos topado con blogs que en su página de inicio se muestra la imagen completa de cada entrada, me paso con unos de mis blogs y desde ahí empecé a investigar un poco más sobre esto, porque quería implementarlo en mi blog ya que le da un aspecto más bonito que tener una imagen cortada de 72px. Esto se puede hacer con CSS pero esta vez dejaremos a un lado los CSS y lo haremos solo con las tags que son las etiquetas que nos proporciona blogger.
Un ejemplo de estas etiquetas es que si queremo mostrar un fragmento del contenido de las entradas, símplemente recurriremos a la etiqueta <data:post.body/>, o tambien existen otras como por ejemplo la etiqueta que nos sirve por si necesitamos mostrar el título de ésta, añadimos <data:post.title/> a nuestro código.
Los anteriores solo fueron dos ejemplos pero como esos hay muchos más, en este tutorial lo que vamos a lograr que se muestre la imagen completa en nuestra página de inicio de blogger. En Blogger también podemos obtener la imagen en miniatura de la entrada, pero sólamente la obtendremos a un tamaño de 72 píxeles, y eso en lo personal se ve feo.
Solución para poner la imagen completa en página de inicio
Si tenemos nuestro blog donde nos aparecen imágenes cuadradas y cortadas es porque estamos usando la etiqueta de <data:post.thumbnailUrl/> para obtener la imagen en miniatura, entonces la solución es optar por utilizar <data:post.firstImageUrl/>, la cual devolverá la primera imagen de la entrada en su tamaño real y no cuadrada ni cortada.
Para utilizarla bastaría con ir la siguiente ruta: Plantilla – Editar – HTML. Aquí presiona Ctrl + F y buscar la siguiente línea <data:post.thumbnailUrl/>, nos aparecerá algo como esto:
<a expr:href=’data:post.url’>
<script type=’text/javascript’>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>El código anterior varía depende de la plantilla pero solo hay que ubicarla y la sustituimos por <data:post.firstImageUrl/> y quedaría de la siguiente manera:
<a expr:href=’data:post.url’>
<script type=’text/javascript’>
document.write(bp_thumbnail_resize("<data:post.firstImageUrl/>","<data:post.title/>"));
</script>
</a>Ahora lo que resta sera visualizar la página de inicio de nuestro blog e ir ajustando la imagen depende que tan grande la queramos. Esto lo puedes hacer yendo a tu blog posicionarte sobre la imagen, dar clic derecho y despues en inspeccionar, de lado derecho aparecerán las propiedades y solo hay que moverlas a nuestro gusto y despues aplicar los cambios en nuestra plantilla.
Espero que este tutorial haya sido de tu agrado y si te sirvio no olvides compartir que nos ayuda mucho. Visita nuestro Canal en Youtube y Suscribete!.De igual forma puedes dejar tu comentario por si tienes dudas.
No olvides seguir visitando TutoEspacio.