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)
[](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
B- PULL-LEFT
- SEE CODE HERE:
<div class="pull-left"> IMAGE + TEXT </div>
C- PULL-CENTER
- SEE CODE HERE:
<div class="pull-center"> IMAGE + TEXT </div>
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
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
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