Steemit Template Tips and Tutorial - Image Alignment
Would you like tips to improve the layout of your posts with some additional alignment options?
Then please continue reading. I will show you how I personally align images in my own posts on Steemit.
The two main ways of aligning images I will explain are:
Centering Images, with a Title Above
Aligning (Floating) Images Left/Right, with Text Wrapped
Centering Images, with a Title Above
Change the Title to your own. You can also change the source text to whatever you like.
Replace the src and href attribute links as appropriate for your own posts. You can replace the img tag with the one from your image upload host as well (SteemIMG, imgur, etc.).
Also change <h3> to any heading size you want.
If you want better SEO, add the alt="" attribute to the img tag, and the title="" attribute for the <a> tag. Alt is for alternative text in case the image doesn't load, and title gives the link a hover text tool-tip to indicate what the link is for.
<center>
<h3>Title</h3>
<img src="http://img.com/image.jpg" />
<br/>
<em>
<a href="http://source.com/link-to-page">source</a>
</em>
</center>
Collapsed Format
<center><h3>Title</h3><img src="http://img.com/image.jpg" /><br/><em><a href="http://source.com/link-to-page">source</a></em></center>
Ex:
Lorem Ipsum
source
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code:
<center><h3>Lorem Ipsum</h3><img src="http://www.steemimg.com/images/2016/12/09/lorem-ipsumccd2a.jpg" alt="lorem-ipsumccd2a.jpg" border="0"><br/><em><a href="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/">source</a></em></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Aligning (Floating) Images Left/Right, with Text Wrapped
Usually this is done for smaller images. I didn't include a Title. Just add one under <center> and above img if you want a Title.
Use the class "pull-right"`` or"pull-left"``` for each side you want to align, pull or float the image.
<div class="pull-right">
<center>
<img src="http://img.com/image.jpg" />
<br/>
<em><a href="http://source.com/link-to-page">source</a></em>
</center>
</div>
Collapsed Format
<div class="pull-right"><center><img src="http://img.com/image.jpg" /><br/><em><a href="http://source.com/link-to-page">source</a></em></center></div>
Ex:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code:
<div class="pull-right"><center><img src="http://www.steemimg.com/images/2016/12/09/lorem28bc4.png" alt="lorem28bc4.png" border="0"><br/><em><a href="https://twitter.com/loremipsum_wtf">source</a></em></center></div>
<h3>Lorem Ipsum</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Here are both left and right floated images in combination.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Code:
<div class="pull-left"><center><img src="http://www.steemimg.com/images/2016/12/09/lorem28bc4.png" alt="lorem28bc4.png" border="0"><br/><em><a href="https://twitter.com/loremipsum_wtf">source</a></em></center></div>
<h3>Lorem Ipsum</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="pull-right"><center><img src="http://www.steemimg.com/images/2016/12/09/lorem-ipsumccd2a.jpg" alt="lorem-ipsumccd2a.jpg" border="0"><br/><em><a href="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/">source</a></em></center></div>
<h3>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
I have created a pastebin file with the centering and floating basics if you need a quick reference to keep on your computer:
Download: pastebin file
Thank you for tuning in, and hopefully these tips are of use to you. Let me know if they are, or if you have other questions. I can possibly make another post to answer it ;)
Thank you for your time and attention! I appreciate the knowledge reaching more people. Take care. Peace.
If you appreciate and value the content, please consider:
me for more content to come!
@krnel
2016-12-10, 6:30am
This is the best description of how to do the wrapped layout that I've seen. Thanks!
For aligning images and wrapping text, what's a good width for the images? I've been using 850 pixels wide for my full-sized images. But the word wrapping around images requires smaller images, right?
Is their any way to have two columns in an article, too?
Do these layouts take longer to load, especially on a phone? Thanks!
Thank you for the feedback :)
I judge by eye. You can test out different image sizes in the preview viewer with some dummy text and html to see what size works best for you. If there is no space, the text won't fit to wrap, no.
Two columns: https://steemit.com/steemit/@movievertigo/how-to-make-2-and-3-column-layouts-for-your-posts-without-tables
Is that a good enough article?
The layouts don't make any difference. Image size does. I resize a lot of my images to keep them around ~100k or less.
Thanks a lot for answering my questions. I will definitely do some testing about the image size that works. I like the article on how to do a 2-column layout, too. I', glad to know that the layouts don't affect loadtime. I already try to keep my images small. Thanks, again!
I feel a bit silly that I didn't even realize you could use html lol - I've just been using markdown, still powerful in its simplicity, but pure html definitely gives you a whole new level of control
Same here. In part, I though raw HTML wasn't okay because of security concerns.
Thanks for this, the div classes for left / right alignment are especially great tips. Good stuff to add to my formatting toolbox. Shame it can't be done with markdown though. After getting used to basic markdown syntax, I find HTML so wordy and cumbersome.
Hehe. I used both, mix and match in the RAW HTML editor. Use HTML when you need it, like the image alignment. Otherwise, just stick to markdown that you are comfortable with.
Use the best of both world, be a markdown + html user ;P
I agree this is a good way to go. What markdown does, it does very well. And then HTML can be a fallback for the things it doesn't support. I really like how the editor allows you to mix & match as needed.
Thanks for this guide! It is really useful, and definitely something I should look into doing. But is it possible to do this with Markdown?
No, you can't do this with markdown. You need the power of HTML to use these enhanced alignment features.
In RAW HTML mode, you can still add Markdown manually, but you won't have the editor to do it for you.
I have a problem. If I use Editor and make changes in Raw HTML, I lose all editor codes.
The editor has issues switching between the two modes. I can't go back to Editor mode after I start in RAW mode. Is that what you mean?
I do commands in Raw HTML, like "< hr> or <div ...>"
If I go back to Editor and make a single command (eg Bold or Italic), I lose all the "< hr> "... insert in Raw HTML .
Yeah sorry, I don't switch. That's a bug in the editor I guess.
Alright! Thanks for answering my question :)