Como optimizar el markdown en imágenes dentro de tus publicaciones

in utopian-io •  7 years ago  (edited)
  • Title: How to optimize the markdown in images within your publications
  • Summary: This tutorial is about all the possibilities of the markdown in use of images within the publications.
  • Language: Spanish

En este tutorial me enfocaré en las imágenes dentro de una publicación, voy a incluir todas las posibilidades del markdown para el uso de imágenes basándome en mi experiencia.

Posición de imagen


📝código para imagen centrada




< center >Aquí coloca la imagen< /center >


Resultado



2.png

Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >


📝código para imagen a la derecha




< div class="pull-right" >< img src="Aquí dentro coloca la imagen" >< /div >


Resultado



Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)

Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >


📝código para imagen a la izquierda




< div class="pull-left" >< img src="Aquí dentro coloca la imagen" >< /div >


Resultado



Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)

Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >


📝código para imagen y texto en 2 columnas




< div class="pull-right" >< img src="Aquí dentro coloca la imagen" >Aquí escribe el texto< /div >< div class="pull-left" >< img src="Aquí dentro coloca la imagen" >Aquí escribe el texto< /div >


Resultado



Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)
Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)

Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >

Uso de imágenes en tablas


📝código para tabla con 2 imágenes en horizontal




|||
|---|---|
|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|


Resultado



3.png3.png

📝código para tabla con 3 imágenes en horizontal




||||
|---|---|---|
|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|


Resultado



3.png3.png3.png

📝código para tabla con 4 imágenes en horizontal




|||||
|---|---|---|---|
|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|


Resultado



3.png3.png3.png3.png

📝código para tabla con 2 imágenes en Vertical




|||
|---|---|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|


Resultado



3.png
3.png

📝código para tabla con 3 imágenes en Vertical




||||
|---|---|---|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|


Resultado



3.png
3.png
3.png

📝código para tabla con 4 imágenes en Vertical




|||||
|---|---|---|---|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|


Resultado



3.png
3.png
3.png
3.png

📝código para tabla con 2 imágenes en diagonal




|||||
|---|---|
|Aquí dentro coloca la imagen|
||Aquí dentro coloca la imagen|


Resultado



3.png
3.png

📝código para tabla con 3 imágenes en diagonal




||||
|---|---|---|
|Aquí dentro coloca la imagen|
||Aquí dentro coloca la imagen|
|||Aquí dentro coloca la imagen|


Resultado



3.png
3.png
3.png

📝código para tabla con 4 imágenes en diagonal




|||||
|---|---|---|---|
|Aquí dentro coloca la imagen|
||Aquí dentro coloca la imagen|
|||Aquí dentro coloca la imagen|
||||Aquí dentro coloca la imagen|


Resultado



3.png
3.png
3.png
3.png

📝código para tabla con 2 imágenes y texto




|||
|---|---|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|


Resultado



3.pngSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees
3.pngSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees

📝código para tabla con 3 imágenes y texto




||||
|---|---|---|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|


Resultado



3.pngSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees
3.pngSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees
3.pngSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees

📝código para tabla con 4 imágenes y texto




||||
|---|---|---|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|


Resultado



3.pngSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees
3.pngSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees
3.pngSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees
3.pngSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees



Posted on Utopian.io - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Buenísimo!!! no pude evitar votar al 100% y le voy a dar resteem y tweet! :D
Excelente, amigo!!! con todo!!!

Yaaaaaay!!! :), Muchisimas gracias por ese enorme apoyo, vamos con todo!!! ;)
Muy agradecido y me da gusto que te haya gustado!!

@luming si señor. Soy desarollador de apps a tiempo completo, aunque hace poco me he puesto mas enserio con steemit.

Muy buen post la verdad, no tenia ni idea de que se podia poner mas de una imagen en la misma fila, incluso 4 y de formas muy diferentes!

Éste post me lo guardo, seguramente le eche mas de un vistazo.

Gracias bro!

Que alegría que te pueda ser de ayuda este contenido :)
Desarrollador de apps, super genial!!, también aplicaciones web?

Si, aplicaciones web practicamente, tengo pensado algun proyecto para steemit, quizás algo de gambling con sbd, o alguna interfaz para steemit.

Gracias por los vote ups y la charla que hemos tenido, un placer conocerte la verdad.

Nos vemos bro! : )

Genial, yo también tengo una idea para un proyecto web vinculado a steemit con uso de SMT, mis conocimientos como desarrollador son muy bajos aún pero ideas me sobran, es bueno saber que eres desarrollador, quizás podamos llevar esta conversación a otro nivel más adelante, un placer también conocerte @selected ;)
Saludos!!

  ·  7 years ago (edited)

Si @luming, seguramente volvamos a tener ésta conversación pronto. Echaré un vistazo a la API de STEEM, me gustaria ver como funciona el tema antes de preparar alguna app.

Nos vemos pronto bro, saludos y de verdad que ha sido un placer conocerte!

Igualmente, saludos!! ;)

Mejor no puede estar explicando! Muchas gracias @luming!

Muchas gracias a ti por el apoyo!! :)
Saludos!!

Gracias por hacérmelo tan facil. No soy muy hábil para editar post

Excelente!!, me da gusto escuchar eso, fue mi propósito a la hora de realizar el tutorial, poder ayudar a los demás de la manera más sencilla a mejorar la calidad de sus publicaciones ;)
Muchas gracias por el apoyo @yaleal, saludos!!

que buena tuto amigo @luming Saludos :)

Muchas gracias por tu apoyo amigo @darius86, que alegría ver que te haya gustado el tutorial ;)
Saludos!!

Amigo muchas gracias, no sabía esto, mi voto a favor para ti! Te ganaste un seguidor! muchas gracias.

Un placer @cracksnews ;)
Muchas gracias por tu apoyo, saludos!!

Muy buena la info gracias por compartir, me va a ayudar a ponerle mas vida a mis posts!

Me da gusto que te haya podido ayudar @conner320 ;)
Sin duda le dará ese toque especial a la estructura de tus publicaciones si comienzas a darle formato :)
Saludos y gracias por tu apoyo!!

Contenido sustantivo, relevante y claro. Upvote y resteem.
calidad.png

Muchas gracias por compartirlo, lo aprecio mucho :)
Saludos!!

Bro @luming this tabular work is a bit confusing. They all look the same. Lolx.Still trying to wrap my head around it. Hope I do coz I love the products. That diagonal stuff is so cool. Cheers man!

#Hug-Challenge!

  ·  7 years ago (edited)

Thank you very much for your support, that's why I made this tutorial to facilitate the use of markdown in images within the publications right here you can copy and paste the code and with practice then you can make it easier :)
Greetings!!

Congratulations @luming! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of comments received
You published 4 posts in one day

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

By upvoting this notification, you can help all Steemit users. Learn how here!

naice, pliz back,will u?

Hey @luming I am @utopian-io. I have just upvoted you at 7% Power!

Achievements

  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!
  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • I introduced a competition factor. My vote is based also on how competitive the category used is.

Human Curation

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

  ·  7 years ago (edited)

Thank you for Updating Your Post.

Thank you for notifying me @gktown, I've edited it ;)

Badass formatting.

I would write a good comment if I knew what you were writing.

Anyway, upvoted!

I understand, thank you very much for your support. ;)

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]