¿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
- Posición de la imagen
- Imagen centrada
- Imagen alineada a la derecha
- Imagen alineada a la izquierda
- Imágenes enlazadas
- Imágenes en movimiento (GIFs)
- 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á:
.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.
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á
 |  |  |  |
 |  |  |  |
- 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á:
 | |
 | |
 | |
 |
- 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)
Gracias ♡
¿Deseas darle mejor apariencia a tus posts? Tutorial Markdown para textos (Guía de aprendizaje)
Que genial te quedo la forma de explicar el tan poco conocido Markdown, que nos permite poder colocar imagenes y darle una apariencia mas llamativa a nuestras publicaciones :D sobre todo me encanto que das ejemplo utilizando fotos tuyas, para que se vea mas real y demuestras que es fácil de utilizar :D solo con entenderlo un poco basta para poder crear bonitas y llamativas publicaciones :D
Es un placer enorme que le haya gustado y ayudar a mejorar el aspecto de nuestros posts. Siempre agradecida con el equipo @reveur y @castellano
Guao muy buena información, no hace mucho había visto una cuadricula de imagen en un post y me preguntaba como lo habrían logrado hacer?, muchas gracias por tu aporte
Me encanta este tipo de comentarios. Que sea siempre de tu provecho.
Excelente iniciativa. Felicitaciones.
Gracias, siempre gracias ♡
Muy buena e interesante informacion...Gracias
Gracias a ti, espero puedas sacarle provecho a la información. Al final también está la guía para dar formato al texto.
Buenisimo gracias por compartir tus conocimientos
Estamos a la orden.
Excelente información y muy bien redactada.
Gracias a usted por el comentario.
Excelente post. Con él estás haciendo que la comunidad de Steemit mejore. Gracias.
Con esa intención fue realizado, incluso para mí.
Esto es un salvavidas. Gracias a publicaciones como esta cada día me voy sintiendo menos ignorante y más preparado para mejorar mis posts. Muchas gracias.
Gracias a ti, que sea de tu entero provecho.
Estas guías siempre son buenas para aquellos que como yo se nos complica un poco los códigos HTML
Te comprendo perfectamente. A mí me suele suceder esas complicaciones.
Excelente @ennyta, muy buena información para crecer por estos caminos. Ojalá pudieras elaborar un tutorial sobre como elaborar imagen en página web, pues me gusta como termina el tuyo. Saludos.
A tu entera disposición siempre
Excelente tutorial, @ennyta. ¡Felicitaciones!
Siempre agradecida contigo @zeleiracordero ♡
wow de verdad esto si me sera super util ami :D en mis comic santo dios... xD
Excelente. Tu haces un trabajo buenisimo, por cierto, felicidades.
Excelente información, de otra manera no lo fuera entendido, muchas gracias y saludos
Gracias a ud. Que sea su entero provecho. Nos estamos viendo.
Muuuuchisimas gracias, la verdad es que estoy nuevo y precisamente buscaba este tipo de información para darle más vistosidad a las publicaciones, ahora solo me queda practicar. Saludos, nos estamos leyendo.
Buenísimo. Me complace mucho que esta información sea aprovechada para dar ese toque coqueto a las publicaciones. Saluditos!
Me encanta! Esta guía me hacia falta! sobre todo porque voy empezando y no comprendía muy bien como colocar las imágenes de diferentes formas! GRACIAS!
Te comprendo a la perfección, me hallaba en la misma confusión en mis inicios. Al final del post está el link de otra guía para dar formato a texto, espero sea de tu ayuda. Me cuentas que tal te va. Saludos.
No se si te lo dije en tu post anterior de Markdown pero te lo repito si no fué asi, demasiado genial y útil tus post. hay otros con la misma información pero regados y no tan "didácticos" o fáciles de utilizar, muchas gracias. Saludos!
Gracias amigo. Me agrada encontrarme con comentarios tan geniales. Gracias a ti, saludos.
Justo lo que necesitaba. Lo mejor que he visto en el día.
Eres grande, eres más grande que Cristiano Ronaldo!!!
Gracias por esta publicación.
¡Jaja menuda comparación! Que sea de todo tu provecho @leomolina un placer ♡ Saludos.
jajajaja
Saludos!
Excelente aporte, Saludos.
¡Saludos amigo!
Debo guardar este post para mis futuras publicaciones!! me encanta. Muchas graciass @ennyta
Excelente, exprímele el jugo al máximo, que sean super geniales tus publicaciones. Saludos.
Tutoriales como estos hacen falta para los nuevos Steemians, tienes mi vto y mi admiración por tu trabajo, muchas gracias, saludos y bendiciones. ♥
Muchas gracias a ti por tus alentadoras palabras. Estamos para ayudar, unidos somos más fuertes
Excelente post. Gracias por la informacion
Que lo aproveche al máximo.
Imágenes enlazadas es lo mejor, gracias es de mucha ayuda este post me ayudara a mejorar mis post.
Esa es la idea. Gracias especiales para ti.
Congratulations @ennyta! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOP