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
- Download the image by right-clicking (or pressing and holding on handheld devices)
- Visit www.postimages.org to upload the image from your gallery
- You can even select whether you want the image resized to thumbnail, website view or retain the original size
- Assume the image below was downloaded from Pixabay & I have uploaded it to postimages. Here are the links generated :
- 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
- 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.
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:
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
![](https://steemitimages.com/640x0/https://s17.postimg.org/kv6w5fb73/DQmb_PNHTzqn_Nm8_Zh_Qs_Yq62_Uwv_Rg9_KWr_Ab_XGN7s38_GXNy5_TF_1680x8400.png)
B- PULL-LEFT
- SEE CODE HERE:
<div class="pull-left"> IMAGE + TEXT </div>
![](https://steemitimages.com/640x0/https://s17.postimg.org/kv6w5fb73/DQmb_PNHTzqn_Nm8_Zh_Qs_Yq62_Uwv_Rg9_KWr_Ab_XGN7s38_GXNy5_TF_1680x8400.png)
C- PULL-CENTER
- SEE CODE HERE:
<div class="pull-center"> IMAGE + TEXT </div>
![](https://steemitimages.com/640x0/https://s17.postimg.org/kv6w5fb73/DQmb_PNHTzqn_Nm8_Zh_Qs_Yq62_Uwv_Rg9_KWr_Ab_XGN7s38_GXNy5_TF_1680x8400.png)
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
![](https://steemitimages.com/640x0/https://s17.postimg.org/kv6w5fb73/DQmb_PNHTzqn_Nm8_Zh_Qs_Yq62_Uwv_Rg9_KWr_Ab_XGN7s38_GXNy5_TF_1680x8400.png)
![](https://steemitimages.com/640x0/https://s17.postimg.org/kv6w5fb73/DQmb_PNHTzqn_Nm8_Zh_Qs_Yq62_Uwv_Rg9_KWr_Ab_XGN7s38_GXNy5_TF_1680x8400.png)
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:
Super | Simple | Table |
---|---|---|
Easy | nice | looks |
1 | 2 | 3 |
NOW LET'S SEE WITH OUR PREVIOUS IMAGE
SEE CODE TIPS: Put image link in the appropriate boxes
Minnow | Dolphin | Whale |
---|---|---|
![]() | ![]() | ![]() |
1 | 2 | 3 |
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
awesome post
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
You are welcome bro. Cheers!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
An eye for an eye only ends up making the whole world blind.
- Mahatma Gandhi
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
I can see you've been flagged.. Stop pasting quotes on unrelated posts.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
@nariadaddy markdown always give more beauty on blog page
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Yeah. It does make everything much more fancy...
If you use it right, you can earn an upvote just for that.
Cheers!
#AIR-CLINIC
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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. 😎
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
It comes with age and experience! Learn as you go or fly by the seat of your pants!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hey @detlev,
I just noticed that now. It wasn't like that when I was editing...
I'll research on that.
Cheers!
#AIR-CLINIC
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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...
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
That's a surefire way to go about it bro. Copy & Save! lolx
#AIR-CLINIC
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
😉
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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:
You may edit your post here, as shown below:
![](https://steemitimages.com/640x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1509788371/nbgbomithszxs3nxq6gx.png)
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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!Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Okay. Thanks. I have updated the Github repository. Cheers!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
That is very thoughtful of you and I am so glad I came by this post. Thank you
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hey @nairadaddy I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
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
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit