Micro guías: Lecciones prácticas de Markdown en Steemit #1 - Imágenes

Imágenes en Markdown. Las múltiples maneras.

A continuación iré detallando, de manera muy práctica, las diferentes alineaciones que puedes realizar para el tratamiento de las imágenes en tu artículos cuando utilices Markdown.

• Imagen centrada a tamaño original, sin fuente:
  <center> link</center>. En el caso del ejemplo estoy utilizando como "link", el siguiente enlace. El resultado sería la imagen centrada, en su tamaño original:

• Centrada / Tamaño original / Con enlace a fuente:
  <center> link<br>[Fuente](link)</center>. Como puedes notar, link es el enlace directo a la imagen y Fuente es el texto que le colocas que se convertirá en "cliqueable" de color azul. Utilizando el mismo enlace, anteriormente mencionado, tenemos:
  
  Fuente

• Alineada a la derecha tamaño original (se reducirá automáticamente):

<div class="pull-right">

<center> link</center>
</div>

Puedes ver la imagen a un lado derecho. Cuando veas espacios en blanco, debes respetarlos para no tener errores cuando utilices este código en tus artículos.

Venga @theghost1980, una imagen un poco mas "seisi" y atrevida. Esos cachorros me producen un ataque ternuro-agresivo-post-traumático...

Fuente | Source

• Alineada a la derecha / Con enlace de fuente:

<div class="pull-right">

<center> link<br>[Fuente | Source](link)</center>
</div>

Puedes notar la misma imagen "traumática" del canino pero con su enlace de fuente.
Nota: Dicho enlace de fuente puede ser anidado, es decir, en vez de Fuente, colocas una imagen pequeña tipo icono. Os pido que utilicen otras imágenes y no "mis iconos". Revisen una fuente de iconos gratuitos aquí.

• Alineada a la derecha / Con imagen de icono como enlace de fuente:

<div class="pull-right">

<center> link<br>[![](link-icono)](link)</center>
</div>

Puedes notar la misma imagen con su fuente, pero esta vez, el enlace de fuente es un icono "cliqueable".

Fuente | Source

<div class="pull-left">

<center> link<br>[Fuente](link)</center>
</div>

Fuente | Source

---

Fuente | Source

• Varias imágenes con alineación a la derecha y fuente de imagen, separadas por un <hr>:

<div class="pull-right">
 
<center> link<br>[Fuente | Source](link)</center></div>
<hr>
 
<center> link<br>[Fuente | Source](link)</center></div>                 
</div>

Puedes utilizar diversas cantidades de imágenes y hacer galerías de fotos o gifs animados. Os recomiendo utilizar imágenes en buena resolución para óptimos resultados.

• Ahora bien, ¿qué sucede si jugamos un poco con las divisiones o <div>?.
  Para finalizar les dejaré dos imágenes dentro de un <div>. Dichas imágenes están "renderizadas" dentro de otros dos <div>. Uno alineado a la derecha y otro a la izquierda. Dicha fuente de imagen esta aquí.

<div class="pull-right">
<div class="pull-right">
<center> link</center></div>
<div class="pull-left">
<center> link</center></div>
</div>

Espero que este artículo te sea de mucha ayuda. En las próximas entregas continuaré profundizando en otras areas dentro del lenguaje Markdown. STEEM ON, muchachON.

Saturno Mangieri - Asesor de Tecnologías Blockchain
. .

iconos tomados de icons8.com