I’ve created this coding template to make image posting easier for information warriors, and fellow Steemians alike! It should help us all to up our game and become more competitive.
If you are new to Steem, you’ve probably seen some very nice looking posts. Well, half the battle in creating a post that looks good is in learning to align the images appropriately.
When I first started posting, I was content with a simple image on top with the text below. However, one comes to notice after a while, especially in the cases of multiple images, that it looks far nicer to blend the images in with the paragraphs by aligning them from time to time, either to the left or the right of the text.
Simply copy and paste the codes below as needed, and don't forget to replace the IMAGE-LINK with the url to the image that you would like to display.
Also, remember to replace the URL-LINK to the desired website address you'd like to promote. If you have any questions, sound-off in the comments below and I'll do the best I can to help you out.
P.S.
If you save this link to your favorites now,
it will make finding it later allot easier!
Kind Regards;
@thoughts-in-time
Image Alignment | Clickable Images |
|---|
image
IMAGE-LINK
image html
<img src="IMAGE-LINK" alt="description">
center image
<center>IMAGE-LINK</center>
align image to the left
<div class="pull-left"><img src="IMAGE-LINK" /></div>
align image to the right
<div class="pull-right"><img src="IMAGE-LINK" /></div>
clickable image link
<a href="URL-LINK"><img src="IMAGE-LINK"/></a>
centered clickable image link
<center><a href="URL-LINK"><img src="IMAGE-LINK"/></a></center>
clickable image link aligned left
<div class="pull-left"><a href="URL-LINK"><img src="IMAGE-LINK"/></a></div>
clickable image link aligned right
<div class="pull-right"><a href="URL-LINK"><img src="IMAGE-LINK"/></a></div>
All | work | and
----- | ----- | -----
no | play | makes
Jack | a dull | boy.
divider & line break
<hr /> <-&-> <br />
superscript
<sup>superscript is very small text</sup>
heading size ranges from 1-6
<h1>Head new sections with different sized text.</h1>
standard hyperlink
<a href="https://www.startpage.com/">World's Most Private Search Engine</a>
<div class="phishy">↑This font is red on Steemit.com↑</div>For bilingual posts you can have your English text on one side, and then put your Spanish text on the other side. - Inspired by @metalmag25
Para publicaciones bilingües puede tener su texto en Español en un lado, y luego poner su texto en Inglés en el otro lado.
Line up your text on both sides by utilizing the text justification code!
<div class=text-justify>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sed viverra ipsum nunc aliquet bibendum enim. In massa tempor nec feugiat.
</div>
<div class="pull-left">
INSERT LEFT PARAGRAPH
</div>
<div class="pull-right">
INSERT RIGHT PARAGRAPH
</div>
Images above are brought to you courtesy of Pixabay [1] [2]
Do you use this template frequently to align, or make clickable images?
If so, consider sending a one-time Steem transfer to support the author : )