Blogging Tip: How to Insert Images Without Breaking Text in Steemit?

Because I started yesterday with some tips about text dividers, I'll continue on the same tutoring note and offer some tips on how to insert images within a text, without breaking it.

The text will simply flow around the image, and the image will be either on the left side or the right side, at your own choice.

As you probably know if you have been on Steemit for more than a few days, this platform uses a simplified language called markdown for writing our blogs. There is also support for a limited number of HTML tags, which can offer more flexibility for those who want it.

I'll use a HTML tag called <div> here to accomplish our goal for today.

I'll start by inserting our sample image at the left of the text, and you can see the end result for yourself.

As you can see, the image "floats" on the left side, while our text surrounds it. One thing you should know is you need an image of the exact size you want it after you insert it.

Now, here's the exact code I used to include the above image and make it float to the left of the text:

<div class="pull-left">https://ipfs.busy.org/ipfs/QmaE95LeGW6GPwC2KTPfLSchgWRUmtUsg7XzgJ75yEXVmH</div>


Note the pull-left class applied to the <div> tag. Also pay attention that between <div> and </div> there's only the exact link of the image, not the markdown code for inserting it, so if you upload an image to IPFS, remove anything from the given markdown language that is not the link itself.

Same thing goes if we want to insert the image at the right of the text, except this time we change the div's class from pull-left to pull-right. Not so complicated, right? It's actually more you can do by using floating divs here on Steemit.

Do you know or guess what else you can do with them?

Counter-example

In the end, I want to remark that someone might say it's easier to simply add the link to the image, like I did here (without the <div>). But please compare this with my first example and you will see the difference. There, we have more lines of text next to the image, until the entire height of the image is "filled". Here, after one line, the text breaks and continues after the image.

Maybe it's time to practice yourself!

Steem on!