How to format to Wrap text around Images in the Steemit HTML Editor
For a while now, I have been formatting my composer birthday posts. It is a great skill to have, and I've realized that I should share how to code to wrap text around images. Here is an example:
Happy Easter! I like the Easter Bunny! I also like chocolate, my favorite food is chocolate. We used to crack eggs for Easter, now we just eat dinner and talk politics or something. What do you think the Easter Bunny will bring you?
To wrap text, you will need to type this in your Raw HTML code (Make sure to do this when all you have left to do is HTML because if you go back to the editor, it will delete what you've accomplished). (The <pre>s are to keep it from actually doing that, just ignore those).
<pre>
<p><div class="pull-right (or left)">
<img src="The Link to your Image Here I'd Recommend posting to postimage.org">
</div>
<p>Text you want to wrap here(Use </p> to end paragraph and use <p><br></p> to make blank lines so it doesn't wrap again
</pre>
It should look something like this in RAW HTML:
Hope this helped!
Thanks! Always ask me how they did this! Gradually I'm learning html and I'm discovering new ways to edit texts. This will really help me with my photos. Thank you very much for sharing this information!
@tincho
Thank you for this post, I did find it very useful. I even bookmarked it to refer to it later.
Resteemed and upvoted!
Steem on,
Mike
Same here
Thanks! Glad you found it useful.
Sweet!
the img src align right wasn't working so I've been doing a different work around but I'm definitely going to try this.
Thanks for this post! It will be very useful for me. FYI, you got me curious and I did some experimenting after you posted and observed that it also works in the markdown editor and it works with text as well as images. Very cool!
Example:
The quick brown fox jumped over the lazy dog.Example Syntax:
You can use the div tag in steem? I never knew that! I'm really interested to know to what extent of HTML does steem supports. Organically I would slowly figure it out myself, yes. Buts it's nice if there is a cheatsheet that I can just refer to.
It's really awesome as it is how steem not only use Markdown but full on HTML. As I just recently started dabbing in Html and css (33% on Code Academy if it means anything haha), it's nice to have a platform where I can practice some small coding. Even if just abit.
Quality info, it sure gives a post that polished look, thanks for sharing @cmp2020.
This is great can you share more like these?
Yes, what @pitterpatter said!
wonderful thanks. I hope I can do this.
Thanks so much for this helpful tips @cmp2020. I just completed my fourth Blog using this technique. Guys you can check on it and let me know what you think: https://steemit.com/life/@cestlag25/blog-4-cloud-of-smoke-of-a-bad-decision
Anyone that would upvote me and leaves their comment will get an auto follow from me. Thanks so much guys! Keep on steeming!
You can also do that without hard coding if you use Html editor app, but this is a good tutorial so that those who doesn’t know the html code will be able to understand it. Progrmmer’s life is not easy. Thanks for the information and keep it up!