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

@ennyta · 2018-03-10 21:22 · spanish

marbhs.jpg

¿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:

`

IMAGEN

`

Así se verá:

DQmdVi9tGH54mqjPQH1NWfUf5ACKBxJzci2jsMgweCRYZ2r.jpg

  • 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:

IMAGEN

Así se verá:

![DQmdVi9tGH54mqjPQH1NWfUf5ACKBxJzci2jsMgweCRYZ2r.jpg](https://steemitimages.com/DQmdo5Gzaio6tMkTvafPcFmokhZ8oL8LzRRvbJgfHEgKo15/DQmdVi9tGH54mqjPQH1NWfUf5ACKBxJzci2jsMgweCRYZ2r.jpg)
Lugar especial guardado en un distinguido espacio de mi hipocampo. Todo un paraíso bañado en aguas saladas. Diría el gran Cervantes, palabras más, palabras menos: "mi lugar de la Mancha cuyo nombre llevaré tatuado en mis recuerdos". En sus aguas disfruté los mejores momentos. Cada summer, cada semana santa, cada hueco en el tiempo donde la rutina nos daba un respiro, escapábamos para aceptar la seductora invitación de la naturaleza.

  • 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):

IMAGEN

Así se verá:

![DQmdVi9tGH54mqjPQH1NWfUf5ACKBxJzci2jsMgweCRYZ2r.jpg](https://steemitimages.com/DQmdo5Gzaio6tMkTvafPcFmokhZ8oL8LzRRvbJgfHEgKo15/DQmdVi9tGH54mqjPQH1NWfUf5ACKBxJzci2jsMgweCRYZ2r.jpg)
Lugar especial guardado en un distinguido espacio de mi hipocampo. Todo un paraíso bañado en aguas saladas. Diría el gran Cervantes, palabras más, palabras menos: "mi lugar de la Mancha cuyo nombre llevaré tatuado en mis recuerdos". En sus aguas disfruté los mejores momentos. Cada summer, cada semana santa, cada hueco en el tiempo donde la rutina nos daba un respiro, escapábamos para aceptar la seductora invitación de la naturaleza.

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á:

hermosa (1).jpg


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.

hsk.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á:

14088970_10209713852940158_521377590_n.jpg 14054742_10209713847980034_2109526499_n.jpg 14054667_10209713849260066_21557707_n.jpg

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

| |---|---|---|---| |banderas-21.png|banderas-1.png|banderas-8.png|banderas-14.png| |

Perú

|

Colombia

|

Chile

|

Puerto Rico

| |banderas-18.png|banderas-9.png|banderas-3.png|banderas-19.png| 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á:

|

20161227_155404.jpg

20161227_155408.jpg

20161227_155410.jpg

|

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

| |---|---| |

pt.png

|

Portugal

es.png

|

España

ma.png

|

Marruecos

ir.png

|

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á:

|

14055733_10209713839219815_715351512_n.jpg

|

14054795_10209713830739603_942297723_n.jpg

|

14081270_10209713835939733_347291154_n.jpg

| |---|---|---| |

14081397_10209713841179864_2018368369_n.jpg

|

14089571_10209713835739728_429568329_n.jpg

|

14101560_10209713847900032_1641822973_n.jpg

14101613_10209713836819755_152013745_n.jpg

|

14101777_10209713837499772_837937600_n.jpg

|

14089571_10209713835739728_429568329_n.jpg

|

DQmcu2ZiV1iLJhzGhY2JKFBPkabW5nu8CnygytxfbgvgLxE.png

Espero sea de su provecho esta información. Gracias ♡

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

#spanish #cervantes #castellano #steemit #tutorial
Payout: 0.000 HBD
Votes: 63
More interactions (upvote, reblog, reply) coming soon.