Popular tags :
-- : -- : --
 

blog post Report Post Markup on Uvumi

Bruce
Posted on Jan 26, 2010 - 10:45 by Bruce
  • Edited By Bruce on Feb 8, 2010 - 14:50
Uvumi allows you to add some dazzle to your posts. You do this by adding what is known as markup to your posts - that is you bracket your text with special tags that will then display them with bold, italic, color, and more.

This article is a guide to the basic markup supported on Uvumi. The markup is a limited set of standard HTML. If you already know HTML, this will be easy for you. If you don't, you should still be able to make some nice posts just by following the examples here.

Additional Tutorials:

This article discusses the basics of markup on Uvumi. For more discussion on some specific topics (e.g., song links), or more advanced information, you can read the following articles:


Text



Bold - <strong>Bold</strong>
Italic - <em>Italic</em>
Underline - <u>Underline</u>
Strikethrough - <strike>Strikethrough</strike>

Horizontal Line: <hr />



Use <h1>Header Title</h1> to get headers like the following:

Links



There are two ways to post links. The easiest is to simply include the link in your post, and it will show up like this:

http://uvumi.com/bruce/blog/178

You can also use full HTML markup for the link so that you can have the link appear with text of your choosing instead of just an address:

Post Markup on Uvumi - <a href="http&58;//uvumi.com/bruce/blog/178">Post Markup on Uvumi</a> (This is in fact the real address for this entry, so please share it!)

Permalinks



For many pages - your own profile page, blog entries, songs, playlists, and others, Uvumi provides an easy way to get a permanent link to that page. Whenever you see a little chain link at the end of the path description on a page, you can open the Permanenet Link dialog.

http://img.uvumi.com/photos/1013/big/permanentlink.png Click to get: http://img.uvumi.com/photos/1013/big/permalinkdialog.png


You can now copy/paste any of the links there. They are great for putting on another web site or blog, or you can use them in your posts on Uvumi. Just watch for the little link.

Note that the avatar image is a link that will go to the user or artist profile page, while the text link goes to the specific page - blog, song, etc.

Songs



This entry covers the basics of entering a song link. See Song Links for a more complete tutorial on song links.

There are three easy ways to add a song link to your posts. The first thing you have to do is get the song's address. You need to open the song's page, most easily done by clicking on a link to the song. Then you can either copy the address from your browser's address bar (usually right-click/copy), or open the song's permalink dialog box by clicking the little chain link at the end of the song path description on the black bar near the top of the page.

Then you have three choices:

1. Simply paste the link into your entry. You will get a link and a play button that looks like this:
http://uvumi.com/vanwampler/songs/2774

2. Use the link, but add the <a> link tag as described in the last section to add the artist and title:
Van Wampler - This Place We're In

3. Copy the song image link from the song permalink dialog to get this:
This Place We're In on Uvumi.com This Place We're In on Uvumi.com

The player button gets added automatically by Uvumi. You can edit the Song title if you wish.

Now go out and share some songs!

Images



uvumi-logo-128x42.png - <img src="http://img.uvumi.com/photos/uvumi-logo-128x42.png">

You can also simply give the http:// link to the image.

Note the image should be at a permanent location. One way would be to upload some images to your Uvumi photo album, and use them. To get the address of an image from your photo album, open the photo in your album, then right-click to view the photo in a new browser window or tab. You'll see just the photo and its address in the browser address bar. Uvumi hosts two version of each image - a small thumbnail shown the the album view, and a big one shown when you open that image.

Summary of what HTML tags are allowed



This section is a summary of the HTML tags Uvumi supports. This is precise (from information provided by Uvumi), but might be a bit techie for some. There are some examples on using the style attributes in the article: Post with Style


  • Here is the list of tags allowed in blog and bio posts:

    <a>, <img>, <strong>, <em>, <i>, <u>, <b>, <br>, <hr>, <ul>, <li>, <s>, <strike>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <span>, <code>


  • Posts to Comments don't give as much freedom:

    <a>, <img>, <strong>, <em>, <i>, <u>, <b>, <br>, <p>


  • Uvumi allows the <a> tag so you can make nice links as described in the Links section, but will also try to convert a url on it's own like this: http://uvumi.com

    Same thing with a link to an image, if it's not inside an anchor's href, Uvumi turns it into an <img>.

  • You can also paste embed code or links to popular video websites (youtube, vimeo, dailymotion...). Uvumi will automatically convert a direct link to a video into the video itself, when possible. So in most cases, you just need to grab the link.

  • <a> allows the "href" property obviously, <img> allows "src", "border", "alt", "width" and "height", <p> let you use "align" so you can justify or center a block of text.

  • Each tag allows "style". Yeah that sounds risky to let people mess with style but we don't allow just any style property, many are forbidden. This is mostly to let you change the font color and size, the background, padding.
    And that's only for blog post, comments don't allow style.




I would like to thank the Marshall and Olivier from Uvumi for all the help they've provided for these tutorials. The information provided here would not have been possible, nor accurate, without their help.

Newer Post: Song Links

Comments (14)

  • redemption's picture
    Left by redemption, on Feb 3, 2010 - 13:25
    Cool, the "last page - 254" migrated from t61 to uvumi!
    Good work, it's very helpful.
    Permanent LinkLink   ReplyReply   ReportReport
  • cr's picture
    Thanks
    Left by cr, on Jan 31, 2010 - 5:33
    Cool stuff...thanks for doing the research. My next mission is to play around with font sizes and colours. Its great having this all in one place.
    Permanent LinkLink   ReplyReply   ReportReport
  • digitalfare's picture
    Left by digitalfare, on Jan 28, 2010 - 18:00
    Thank you for this post! It's a great resource to have all that info in one place. :)
    Permanent LinkLink   ReplyReply   ReportReport
  • ForgottenPrince's picture
    Great post
    Left by ForgottenPrince, on Jan 28, 2010 - 9:58
    Things like this will really help develop Uvumi into something we can be proud of. Thanks again for the tools to share music!
    Permanent LinkLink   ReplyReply   ReportReport
  • olivier's picture
    Left by olivier, on Jan 28, 2010 - 0:19
    finally, (was running out of characters), <a> allows the "href" property obviously, <img> allows "src", "border", "alt", "width" and "height", <p> let you use "align" so you can justify or center a block of text.

    Each tag allows "style". Yeah that sounds risky to let people messing with style but we don't allow just any style property, many are forbidden. This is mostly to let you change the font color and size, the background, padding.
    And that's only for blog post, comments don't allow style
    Permanent LinkLink   ReplyReply   ReportReport
    • THANK!
      Left by Bruce, on Jan 28, 2010 - 21:57
      I've incorporated this information into the main post.
      Permanent LinkLink   ReplyReply   ReportReport
  • olivier's picture
    Left by olivier, on Jan 28, 2010 - 0:05
    Thank you Bruce for doing our job. Allow me to complete your nice tutorial

    Here is the list of tags allowed in blog posts:

    <a>, <img>, <strong>, <em>, <i>, <u>, <b>, <br>, <hr>, <ul>, <li>, <s>, <strike>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <span>

    Comments don't give as much freedom:

    <a>, <img>, <strong>, <em>, <i>, <u>, <b>, <br>,<p>

    we allow the <a> tag so you can make nice link like this, but will also try to convert a url on it's own like that http://www.thatguywiththeglasses.com/

    same thing with a link to an image, if it's not inside an anchor's href, we turn it into an <img>

    You can also paste embed code or links to popular video websites (youtube, vimeo, dailymotion...). We will automatically convert a direct link to a video into the video itself, when possible. So in most cases, you just need to grab the link.

    Your Bio input has the same behavior as the blog input
    Permanent LinkLink   ReplyReply   ReportReport
  • PaulNZ's picture
    Special Characters
    Left by PaulNZ, on Jan 27, 2010 - 16:38
    Because these comment boxes are HTML based, in some cases you may need to use code for special characters such as '<','>'.
    Codes for some of these chacters are:

    <     &lt;
    >   &gt;
    &   &amp;


    Hope this helps :)
    Permanent LinkLink   ReplyReply   ReportReport
    • only works once
      Left by Bruce, on Jan 27, 2010 - 17:08
      You can use the & codes, but... They get translated to the actual character, so if you need to go back and edit, they are translated. Thus, & lt; is changed to < the next time you edit. And given the nature of this entry, I've been editing it quite a bit.
      Permanent LinkLink   ReplyReply   ReportReport
      • PaulNZ's picture
        Left by PaulNZ, on Jan 27, 2010 - 17:45
        Oh, haha -- fair warning! From experience with other sites I have learnt to copy the whole message before I post it, just another Gotcha really :S
        Thanks for the helpful explanation though!
  • sandyness's picture
    Left by sandyness, on Jan 26, 2010 - 22:09
    I didn't have any issue using 'space-less' html, like <br&;gt; (and here is hoping that they support character codes: 60 for < and 62 for >).. dunno why you did :-)
    Permanent LinkLink   ReplyReply   ReportReport
    • sandyness's picture
      Left by sandyness, on Jan 26, 2010 - 22:10
      ok.. so they don't support character codes, obviously (they need a comment edit/delete option)
      Permanent LinkLink   ReplyReply   ReportReport
      • Left by Bruce, on Jan 27, 2010 - 9:14
        edit: delete / re-enter maybe.

        The img giving HTML removed warning seems to be fixed. Will have to check it out more.
  • Unregistered User's picture
    Cool!
    Left by Unregistered User, on Jan 26, 2010 - 13:42
    Thanks for taking the time to fiddle around with this.
    Permanent LinkLink   ReplyReply   ReportReport

Add a comment.

Register a new account.
Forgot your password?

Sharing box

Share this page:    

Copy/pasteable HTML: