MANAGING IMAGES: EASY WAYS FOR NEWBIES TO USE MARKDOWN SYNTAX FOR IMAGES ON STEEMIT

in utopian-io •  7 years ago  (edited)

HERE's a joke:

  • QUES: What's the easiest way to mark a steemit newbie?
  • ANS: Poor Markdown!
    Lolx. As simple as this looks, its a very true statement. Newbies are usually totally lost for ways to edit their written words to match the appropriate professional standard works that would get curated. Well, unless they have some previous experience in blog-editing.

So what is MARKDOWN?

Markdown Syntax is a tool that allows for easy formatting of text, images, gifs, etc such that it would be appealling to the eyes. Its much easier than cramming HTML codes.

Our focus for today would be on managing images.

5 SIMPLE IMAGE MANEOUVRES:


1- UPLOAD IMAGES

First of all, its pertinent to stress that many people don't even know how to upload images to Steemit. Apart from how to upload, they don't even know where to get images that are in keeping with creative commons copyright form. I will outline some simple methods below:

  • Visit www.pixabay.com and use the search box to find free images based on your keyword
    Screenshot_2017-12-12-15-14-29.png

  • Download the image by right-clicking (or pressing and holding on handheld devices)


  • You can even select whether you want the image resized to thumbnail, website view or retain the original size
    Screenshot_2017-12-12-15-20-56.png

  • Assume the image below was downloaded from Pixabay & I have uploaded it to postimages. Here are the links generated :
    Screenshot_2017-12-12-15-18-01.png

  • I copied the 2nd link for MARKDOWN (not the reddit logo but the one with Github logo)
    [![DQmb_PNHTzqn_Nm8_Zh_Qs_Yq62_Uwv_Rg9_KWr_Ab_XGN7s38_GXNy5_TF_1680x8400.png](https://s17.postimg.org/83o4koz1b/DQmb_PNHTzqn_Nm8_Zh_Qs_Yq62_Uwv_Rg9_KWr_Ab_XGN7s38_GXNy5_TF_1680x8400.png)](https://postimg.org/image/71dy25g7v/)
  • Paste the code above into your Editing screen to give you this image below
    DQmb_PNHTzqn_Nm8_Zh_Qs_Yq62_Uwv_Rg9_KWr_Ab_XGN7s38_GXNy5_TF_1680x8400.png

  • The next step will be to state your source (FOR REFERENCES SAKE).
  • Commonly we just use this code: [source](url) where url is the link to the source of the image.
  • See how the image will then appear with the source under.
    DQmb_PNHTzqn_Nm8_Zh_Qs_Yq62_Uwv_Rg9_KWr_Ab_XGN7s38_GXNy5_TF_1680x8400.png
    source

If you got this right then you are ready for the next step; what to do with the images uploaded...



2- WRAP TEXT AROUND IT

  • The default position of images is LEFT-placed and without text-wrapping.
  • You can choose to pull images to the left, right or center and include text-wrapping like it usually appears in top newspapers and magazines.
  • EXAMPLE: newspaper-154444_960_720.png
    source

HOW TO WRAP TEXT USING THE "DIV-CLASS COMMAND"

A- PULL-RIGHT
  • SEE CODE HERE: <div class="pull-right"> IMAGE + TEXT </div>

  • Say I want to wrap the already uploaded image above. I'll have to use a thumbnail version of it for easier management


Can you believe that this is that same image? No way you are believing that but you just have to believe for peace to reign on your markdown world. Lolx.

B- PULL-LEFT
  • SEE CODE HERE: <div class="pull-left"> IMAGE + TEXT </div>

Can you believe that this is that same image? No way you are believing that but you just have to believe for peace to reign on your markdown world. Lolx.


C- PULL-CENTER
  • SEE CODE HERE: <div class="pull-center"> IMAGE + TEXT </div>

Can you believe that this is that same image? No way you are believing that but you just have to believe for peace to reign on your markdown world. Lolx.


D- PULL-LEFT & PULL-RIGHT (2 COLUMNS)
  • SEE CODE HERE: <div class="pull-left"> IMAGE + TEXT </div><br><div class="pull-right"> IMAGE + TEXT </div>
    NOTE: <br> separates the left from the right

Can you believe that this is that same image? No way you are believing that but you just have to believe for peace to reign on your markdown world. Lolx.


Can you believe that this is that same image? No way you are believing that but you just have to believe for peace to reign on your markdown world. Lolx.

There are 3-COLUMN commands but I don't want to make this writeup more complex.



3- IMAGE & TABLE MANAGEMENT

  • This is one of the most complex aspects of using images especially when you have things that need tabulation. Examples include, lists, numbers, calculations etc
  • Lets demonstrate below
FIRST WITH ORDINARY TABLE

SEE CODE:
Screenshot_2017-12-12-16-56-26.png

SuperSimpleTable
Easynicelooks
123

NOW LET'S SEE WITH OUR PREVIOUS IMAGE

SEE CODE TIPS: Put image link in the appropriate boxes

MinnowDolphinWhale
Screenshot_2017-12-12-17-00-35.png/Screenshot_2017-12-12-17-00-27.pngScreenshot_2017-12-12-17-00-17.png
123


With these, I believe I have given you a good start on using images on Steemit via the markdown syntax. ENJOY!


I remain me, my mouth & eye @nairadaddy aka SteemDaddy. My aim is to leave you better than I find you everyday.


WANNA CONNECT?

JOIN ME & MY TEAM ON #AIR-CLINIC DISCORD

SEE LINK: https://discord.gg/rqded5m



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:  

awesome post

You are welcome bro. Cheers!

An eye for an eye only ends up making the whole world blind.

- Mahatma Gandhi

I can see you've been flagged.. Stop pasting quotes on unrelated posts.

@nariadaddy markdown always give more beauty on blog page

Yeah. It does make everything much more fancy...
If you use it right, you can earn an upvote just for that.
Cheers!

#AIR-CLINIC

I am still working on the markdown. I am trying to concentrate on good content right now. I have a steep learning curve since I am not familiar with social media platforms.

Hey @cecicastor,
Its good to learn everything all at once...quality content-making as well as editing etc.
You are already an awesome connector.

Here's one of my writeup's to give you a headstart for basics: https://steemit.com/steemit/@nairadaddy/how-to-write-easily-on-steemit-using-markdown-syntax

Cheers!

#AIR-CLINIC

But I think I am suffering from information overload! My brain is leaking! (Flight of the Navigator)...lol

Thanks Dr. George.

Found it! Thank you.Will use in Future!

That's very candid.. You sure have done a lot of work on yourself to know you to that extent... I'm not so sure about myself. Lol...

See ya at the clinic. 😎

It comes with age and experience! Learn as you go or fly by the seat of your pants!

Do you know, why there is with the

D- PULL-LEFT & PULL-RIGHT (2 COLUMNS)

the right image a bit more down as the left one?

I tried a lot, but not easy to fix

Hey @detlev,
I just noticed that now. It wasn't like that when I was editing...
I'll research on that.

Cheers!

#AIR-CLINIC

  ·  7 years ago (edited)

Thanks bro.. This be the third time I'm learning this shi*... Lol.. It's just refused to stick in there.. I probably would have to copy and save to my clipboard so I could pull it out whenever I need it.. Lol.

Thanks...

That's a surefire way to go about it bro. Copy & Save! lolx

#AIR-CLINIC

😉

Your contribution cannot be approved yet. See the Utopian Rules. Please edit your contribution to reapply for approval.

I have several issues with your tutorial:

  • Wrong repo, it should be Steemit/condenser
  • Not formal enough - you start with a joke!
  • You tell people to upload their images to a third party website instead of using the native Steemit upload function - why?

You may edit your post here, as shown below:

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

I think I can approve your post when you just correct the repository to Steemit/condenser. The fact that you suggest the external website for image upload is not point of the tutorial anyways and the Markdown part is really good!

Okay. Thanks. I have updated the Github repository. Cheers!

Thank you for the contribution. It has been approved.

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

That is very thoughtful of you and I am so glad I came by this post. Thank you

Hey @nairadaddy I am @utopian-io. I have just upvoted you!

Achievements

  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

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