Quantcast

Putting more than just text in your posts

kylie's picture
Posts
3476
Member
1445 days
started by kylie on December 4, 2007

A couple people have been asking about putting images, etc. into their posts. There is information on the supported HTML tags at the More information about formatting options link at the bottom of the text box as you enter a post.

While I know Paul is working a more user-friendly solution, I just thought I'd highlight a few of the common things and how to do them in a post as well:

  1. Putting in a link: Links to websites and email addresses will automatically be turned into links when you post. If you'd like to turn text into a link, you'll need to do that using the "a" html tag. Enter the following in your post:
    <a href="http://kyillee.trifuel.net">My Blog</a>

    and it will display:
    My Blog

  2. Italicizing to your text: To make your text italic you must now put the "em" (emphasis) html tag around the words you'd like italic. Enter the following in your post:
    <em>make this italic<em>

    and it will display:
    make this italic

  3. Bolding your text: To make your text bold you must now put the "strong" html tag around the words you'd like bold. Enter the following in your post:
    <strong>make this bold<strong>

    and it will display:
    make this bold

  4. Adding a bullet list: Bullet lists require using the "ul" (unordered list) html tag, as well as the "li" (list item) html tag. Enter the following in your post:
    <ul>
    <li>first item in list</li>
    <li>next item in list</li>
    </ul>

    and it will display:

    • first item in list
    • next item in list
  5. Adding a numbered list: Getting a number list is much like a bullet list, only now use the "ol" (ordered list) html tag along with the "li" (list item) html tag. Enter the following in your post:
    <ol>
    <li>first item in list</li>
    <li>next item in list</li>
    </ol>

    and it will display:

    1. first item in list
    2. next item in list
  6. Adding an image: As in the old forum, to add an image it must already exists somewhere on the web. If you have a great endurance sport picture you'd like to share, I'd recommend getting an account over at endurable.us, adding your image, and then using a link to it there to post it. For example, if the image you'd like to link to is at http://endurable.us/files/imagecache/Display/files/photos/PA130268.JPG enter the following in your post:
    <img src="http://endurable.us/files/imagecache/Display/files/photos/PA130268.JPG" width="320" height="auto"/>

    and it will display:

    The "width" and "height" settings will help you get your image to fit well in a page. I recommend always having at least one set to auto so that your image doesn't get distorted. The number 320 entered there is in pixels, or screen dots, and not an easily pictured measurement like inches.

  7. Adding a blockquote: If you'd like to quote something another user said in your reply, you'll want to use the "blockquote" html tag. Enter the following in your post:
    <blockquote>this is what someone said in an earlier comment</blockquote>

    and it will display:

    this is what someone said in an earlier comment

    Another helpful tip for making quotes is to know how to copy and paste from another post into your own.

    To copy text from another post, highlight it with your mouse. Then hold down the control key and press the "c" key.

    Then click in the box where you are entering your text and put the mouse at the location you wish the text to appear. Hold down the control key and press the "v" key for it to be pasted in.

Tags: Site Tips
Tribro's picture
Posts
2195
Member
2227 days
Tribro posted 23 weeks ago.

Wow! Awesome. I learned a few things :)
thanks!

kylie's picture
Posts
3476
Member
1445 days
kylie posted 23 weeks ago.

Thanks! Much of it is the same as in your doc, but since that was missing the images part I figured some people here would find this info useful.

Riverbrady's picture
Posts
551
Member
1400 days
Riverbrady posted 23 weeks ago.

Quick addition

If you want a small image that points to the full-size one, just make a link with an image source instead of text, ala

[a href="http://endurable.us/files/imagecache/Display/files/photos/PA130268.JPG"][img src="http://endurable.us/files/imagecache/Display/files/photos/PA130268.JPG" width="320" height="auto"/][/a]

Just replace the [ and ] with < and > ...it's late and for some reason my brain isn't recalling posting text of html code in the message :/

"Care more than others think is wise, risk more than others think is safe, dream more than others think is practical, expect more than others think is possible."

tri-ac's picture
Posts
1168
Member
891 days
tri-ac posted 23 weeks ago.

kylie, this is great! thanks for helping teach us!

paul, these tutorial threads are very helpful...would it be worth locating them in a dedicated forum category?

Tribro's picture
Posts
2195
Member
2227 days
Tribro posted 23 weeks ago.

Actually that's what I'm trying to get rid of. I felt the last setup was too forums heavy and left many posts unread or unanswered. So the ultimate objective is to move posts to 2-3 forum categories and use tags to categorize posts. so I've tagged these as 'site tips': http://www.trifuel.com/tags/site-tips

kylie's picture
Posts
3476
Member
1445 days
kylie posted 23 weeks ago.

Thanks Jer -- I almost included a note about that :)

As for html brackets in posts, you have to use ampersands to escape them. So < is "& lt = less than) without the space, and > is "& gt;" (gt = greater than) without the space.

CarlyBoy's picture
Posts
57
Member
332 days
CarlyBoy posted 23 weeks ago.

Paul, I love the edit option that appears after a post of your own message. Allows error prone folks such as myself one last chance at redemption.

CarlyBoy's picture
Posts
57
Member
332 days
CarlyBoy posted 23 weeks ago.

imageshack.us is another image hosting site. It's offered, but you don't need to register. You also don't need to know anything about HTML. The steps:

  1. At the imageshack.us site, hit the Browse button.
  2. Navigate to the location (on your computer) of the image file you want to upload.
  3. Don't bother supplying your email address - you don't need to.
  4. If you have a really large picture, check the resize image checkbox. This will present a clickable thumbnail image on the post. Those who aren't interested won't have to scroll as much to get past a large picture.
  5. I would always leave the size/resolution bar from the thumbnail checkbox unchecked, but no harm if you don't. It will just add a title strip to your image indicating its size in pixels.
  6. Click the host it! button.
  7. On the subsequently presented page, copy the code in the Thumbnail for Websites textbox to your message.
  8. Preview/modify/post your comment as usual.

Cheers.

PrinceofClydes's picture
Posts
1458
Member
1341 days
PrinceofClydes posted 23 weeks ago.

Nice html tutorial, Kylie.

- and customers ask me why building them a web page costs so much.

PoC

"Pain heals, chicks dig scars, glory is forever." - Shane Falco.

Gary3's picture
Posts
152
Member
254 days
Gary3 posted 22 weeks ago.

Kylie,

What happened to the number of one's posts?

kylie's picture
Posts
3476
Member
1445 days
kylie posted 22 weeks ago.

Dunno... that's all in Tribro's hands :) I just post a lot... I don't actually have any "official" association with Trifuel other than thinking it's awesome.