How to add links, italics, videos, and other cool things to your comments and diaries at OpenLeft

by: essaywhuman

Tue May 25, 2010 at 17:01

(A lot of you have been asking for this for some time, so we asked David Poms, our new intern and an OpenLefter himself, to put it together. He did a great job. If you have any useful tips to add, feel free to leave a comment.

I also added a link to this in the red header at the top of the page, next to "about & contact". If you're ever working on a new diary/comment and need some help, click on it and it will open in a new tab so you can use it as a reference without closing your diary/comment window. - promoted by Adam Bink)

You asked. We answered. A user's guide to commenting at Open Left using HTML commands!

Open Left is powered by Soapblox, a blog platform that allows community members to easily participate and publish on the site. Anyone familiar with blogs, especially of the lefty variety, should find the layout of the site fairly intuitive. However, not everyone is quite as familiar with creating content as reading it. A simple block of text is fine for getting a point across, but Soapblox provides an array of extras that allow you to communicate with highly readable posts or comments. The best way to learn how to do this is to learn basic HTML commands. To help everyone learn the basic tricks of the trade for creating excellent posts, I have provided a list of HTML commands that are commonly found in posts. If anyone can think of other commands that work in Soapblox and are useful for posting, please leave them in comments below.

Full list of useful commands in the extended entry.

essaywhuman :: How to add links, italics, videos, and other cool things to your comments and diaries at OpenLeft
Posting text

To put words in italics, put the words between the following brackets (but without the spaces between the open carat and the letter): < i >like this< /i  >
To put words in bold, use these brackets: < b >like this< / b >
To underline words, use the following brackets: < u > like this < / u >

To put words into a block quote, put the quote in between the following brackets (again without the spaces): < blockquote > like this < / blockquote >

To strike a line through words, put the words in between these brackets: < strike > words < / strike >

To put a hyperlink into your comment, you need the following (no spaces except between the "a" and the "href": < a href="URL" >words that will appear as a blue hyperlink< / a >

To create bullet points, there are three codes you may need, two of which you will have to use each time, depending on whether you want numbered or unnumbered bullet points. There is < ul >, or unordered lists, < ol >, or ordered lists, and < li >, or list item.
For unnumbered bullet points, you want the following code:
< ul >
 < li >Bullet 1< /li >
 < li >Bullet 2< /li >
 < li >Bullet 3< /li >
< /ul >
which will display like this:

  • Bullet 1
  • Bullet 2
  • Bullet 3

For numbered bullet points, simply change the < ul > to < ol >, which will appear like this:

  1. List Item 1
  2. List Item 2
  3. List Item 3

Posting Pictures

To put an image into your comment, you first need to verify that you can link to the picture you want to use. The code is as follows: < img src="image URL here">  The URL in question should come either from a photo hosting website built explicitly for this purpose, such as Flickr, or from your own hosting. The practice of using an image that links to someone elses website is known as hotlinking and is frequently frowned upon due to the fact that it saps bandwidth from other sites without recognition or advertising hits.

To use an image, you must also make sure it does not break the formatting of the site. To set an image's height and width, put the following commands in the image code: < img  src="" width="400" height="350">

To make it smaller or bigger, simply change to the numbers. Keeping them below 500 generally will make sure the formatting doesn't get messed up- you don't want to make a picture too wide or tall or it will be difficult for people to read your comment or diary.

You can also put text directly next to pictures, known as wrapping. To do so, simply put your text directly next to the image code. For example, to put text next to the previous image, without breaking the format, I can decrease the size of the picture and then start typing. The code would be this, without spaces: < img  src="" height="200" width="150" >

Presenting your text next to images like this can be a powerful presentation tool when posting comments on Open Left.

Posting Videos

If you want to embed a video to your comment, diary, or quick hit, the host website of the video will usually provide the code necessary to do that. For example, YouTube will give you the code necessary to embed a video. Simply click the button underneath the video that says Embed, copy the code from the text box, and paste it into your post with no changes.

The code should look like this, without spaces:
< object width="480" height="385">< param name="movie" value="">< param>< param name="allowFullScreen" value="true">< param>< param name="allowscriptaccess" value="always">< param>< embed src="http:/" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385">< embed>< object>

And it will appear like this:

You can also resize it by changing the width and height values in the code - just make sure to change both width and height values, at the beginning and the end of the code.

If you have any other useful HTML, be sure to leave a comment, or if there's something you want to know how to do but it's not here, ask for help in the comments.

Happy posting!

Tags: , , , , , , (All Tags)
Print Friendly View Send As Email

How to post HTML code (3.75 / 4)
To post HTML code, use &gt for > and &lt for <.  You can avoid needed to say "without the spaces" by backslashing any characters immediately following the &gt or &lt.  Not all characters must be backslashed, but letters and periods do; it doesn't hurt to always use them.

For example, to make this:

   <a href="">blah blah</a>

Type this:

   &lt\a href=""&gt\blah blah&lt\/a&gt

or (since you don't need to backslash a slash) this:

   &lt\a href=""&gt\blah blah&lt/a&gt

To make the above I had to add more backslashes, like this:

   \&lt\\a href=""\&gt\\blah blah\&lt\\/a\&gt

To make that I had to...  you get the idea.

re: link (0.00 / 0)
To put a hyperlink into your comment, you need the following (no spaces except between the "a" and the "href": < a href="URL" >words that will appear as a blue hyperlink< / a >

the bracket way is easier: [link linkname]

When posting images! [And do not put video code on the same line as a sentence, as above] (0.00 / 0)
Do Not put both the width and height in. Just the width will do fine. Browsers will scale correctly. If you put both in, you have to be careful to make sure the image scale (the ratio between the height and width) stays the same ie:
<img src="" width="200">

but<img src="" width="200" height="150"> gets you this;

Which can be really ugly for faces. Even better, you can use a percent size for the width, so it fills the space the amoubnt you want, but won't go over the space available.
Like this:<img src="" width="90%">
Will get this:

you may notice there is a slight deformity of the layout, essaywhuman made a slight error putting the <object> code on the same line as "And it will appear like this:" which meant the video is moved to the end of the line after "this:"


The government has a defect: it's potentially democratic. Corporations have no defect: they're pure tyrannies. -Chomsky

oops the video code is fixed... (0.00 / 0)
Ok the example above doesn't help explain, but the video code placement advice is still correct.


The government has a defect: it's potentially democratic. Corporations have no defect: they're pure tyrannies. -Chomsky

[ Parent ]
Hope you will peg this diary or the (4.00 / 3)
codes somewhere so we can always find them.  

This diary (4.00 / 2)
Is pegged in the red banner at the top of OpenLeft titled "HTML cheat sheet".

Me on Facebook
Me on Twitter

[ Parent ]
posting videos (4.00 / 1)
I often find the provided cut and paste text from whatever video site doesn't work here, the reason is that Soapblox hates the "style" tag and many video sites' provided HTML code includes it.

You can fix it by going through the bloc of code they provide and stripping out all style="blah blah blah [...]" elements - just them and whatever follows them in quotation marks, not the angle brackets around them.

It's a pain, but eventually it works.

Thanks Mark, TBH, HoP, and Daniel (4.00 / 1)
I had to learn some of this myself for the post so I appreciate the help.  

em and strong (0.00 / 0)
I believe <i> and <b> are deprecated HTML and not future-proof. <em> for italics and <strong> for bold are the modern equivalents, I believe, and have been for years, like this: <em>some italics</em> and <strong>some bold</strong>.

Another tweak to links is the target="_blank" which opens a new browser window, like this: <a href="" target="_blank">a link</a>. However, I also believe this may be deprecated.

A very helpful post. Thanks!

Nope, <i> and <b> still supported (0.00 / 0)
I've had this site bookmarked forever, but it appears to be up to date.  (Mentions Opera among supported/unsupported browsers for various tags, for example.)  It claims bold and italic are fully supported and not depreciated.

Strikethroughs and underlines appear to be depreciated, though.  I hadn't realized that until now.  A quick way to do strikes, by the way btw, is to use -dashes-.

[ Parent ]
Sorry to Be Unclear (4.00 / 1)
I didn't mean unsupported, only deprecated. While I and B will be supported indefinitely, one presumes, the standard is to use EM and STRONG instead. That was my only point.

[ Parent ]
Good (0.00 / 0)
Excellent article about HTMl.
Start you travel career with Pro Travel Network as host Travel agency making the dream of owning your own home-based travel agency a reality

protravel network


Open Left Campaigns



Advanced Search

Powered by: SoapBlox