¿Qué sería de la vida sin colores? La misma analogía para Steemit, ¿qué sería de los posts sin imágenes?

En mi corto recorrido por estas aguas steemianas me he dado cuenta que una imagen impactante y un título atractivo es la clave para que tu post sea considerado por otro usuario, ¡ya eso es un paso ganado! el resto queda en las manos sugestivas de un buen contenido que mantenga seducido al lector. En fin, me dediqué a recopilar información relacionada a la inserción de imágenes en Steemit y este fue el resultado de la búsqueda.

Vamos a dar inicio a este maravilloso mundo. ¡Sea bienvenido, una vez más!

Markdown para imágenes

1. Posición de la imagen
   • Imagen centrada
   • Imagen alineada a la derecha
   • Imagen alineada a la izquierda
2. Imágenes enlazadas
3. Imágenes en movimiento (GIFs)
4. Serie de imágenes
   • Horizontal
   • Vertical
   • Cuadrícula

1. Posición de la imagen

Según lo que deseemos plantear, la posición de la imagen será importante para mostrar de mejor forma nuestra publicación, ya sea que la insertemos de manera centrada o paralela al texto con el mismo estilo que utilizan las revistas y periódicos. Para lograr eso sólo necesitamos algunos códigos.

• Imagen centrada
  Para centrar la imagen debemos usar el siguiente código:

<center> IMAGEN </center>

Así se verá:

• Imagen alineada a la derecha
  Si queremos que nuestra imagen se vea a la derecha del texto sólo debe usar el código a continuación (es importante dar 2 espacios después del código para empezar a escribir el texto), por ejemplo:

<div class="pull-right">
IMAGEN
</div>

Así se verá:

• Imagen alineada a la izquierda
  Si queremos que nuestra imagen se vea a la izquierda del texto sólo debe usar el código a continuación (es importante dar 2 espacios después del código para empezar a escribir el texto):

<div class="pull-left">
IMAGEN
</div>

Así se verá:

2. Imágenes enlazadas

Cada vez que insertemos una imagen en Steemit que no sea de nuestra autoría es importante señalar la fuente. Una de las maneras de hacerlo es a través de un enlace ubicado en la parte inferior de la imagen que al hacerle click redireccione a la página web de origen [Fuente](Enlace web) y otra forma que me ha fascinado (confieso) es haciendo click en la propia imagen.

Si eres de las personas que no les agrada ver la palabra “Fuente” debajo de sus imágenes porque cree que rompe con la estética de su redacción, les tengo la solución y se llama “imágenes enlazadas”. Así es, su imagen es el enlace y al dar click sobre ella lo redireccionará a la página web de origen.

Es similar a como creamos un enlace (link) en Steemit. Entre [ ] insertamos la imagen y entre () copiamos el link de la página web.

Así se escribe:

[Imagen](Enlace de la imagen)

Así se verá:

3. Imágenes en movimiento (GIFs)

Las imágenes en movimiento, en el argot informático, se conocen como GIFs. El hecho de que sean imágenes animadas no añade complejidad a la hora de insertarlas en Steemit, incluso es el mismo procedimiento que las imágenes sin movimiento. Sólo debe insertar el link de la imagen que descargó en el editor de Steemit y listo, podrá ver su GIF.

4. Serie de imágenes

Les voy a confesar el secreto de insertar varias imágenes dispuestas en orden en Steemit: saber hacer una tabla y tener mucha imaginación.

• Horizontal
  Si deseamos mostrar imágenes dispuestas en forma horizontal sólo debemos crear una tabla de una sola fila y con el número de columnas igual a cuantas imágenes deseemos mostrar.

Por ejemplo, para una serie de 3 imágenes en horizontal usamos el siguiente código:

||||
|---|---|---|
| IMAGEN | IMAGEN | IMAGEN |

Así se verá:

Incluso si deseamos añadir texto o algún título lo hacemos de esta manera:

|TEXTO|TEXTO|TEXTO|TEXTO|
|---|---|---|---|
|IMAGEN|IMAGEN|IMAGEN|IMAGEN|
|TEXTO|TEXTO|TEXTO| TEXTO|
|IMAGEN|IMAGEN|IMAGEN|IMAGEN|

Así se verá

Venezuela	Argentina	Brasil	México
Perú	Colombia	Chile	Puerto Rico

Fuente

• Vertical
  Para esto aplicamos la lógica anterior, sólo que como deseamos las imágenes dispuestas en forma vertical, el número de filas aumenta tantas imágenes queremos mostrar y el número de columnas es igual a uno.

Por ejemplo, para una serie de 3 imágenes en vertical usamos el siguiente código:

|IMAGEN|
|---|
|IMAGEN|
|IMAGEN|

Así se verá:

Si deseamos añadir texto hacemos lo siguiente:

|IMAGEN|TEXTO|
|---|---|
|IMAGEN|TEXTO|
|IMAGEN|TEXTO|
|IMAGEN|TEXTO|
|IMAGEN|TEXTO|

Así se verá:

Mundial de fútbol 2018	GRUPO B
	Portugal
	España
	Marruecos
	Irán

Fuente

• Cuadrícula
  Podemos mostrar imágenes en una cuadrícula y esto se sigue haciendo gracias al número de celdas que deseemos modificar con el formato de tabla, por ejemplo, para mostrar 9 fotos de manera ordenada podemos hacer lo siguiente:

|IMAGEN|IMAGEN|IMAGEN|
|---|---|---|
|IMAGEN|IMAGEN|IMAGEN|
|IMAGEN|IMAGEN|IMAGEN|

Así se verá:

Espero sea de su provecho esta información.

Gracias ♡

¿Deseas darle mejor apariencia a tus posts? Tutorial Markdown para textos (Guía de aprendizaje)