How to markup images (etc) in forum posts and comments

From Nexus Mods Wiki
Jump to: navigation, search

Overview

"In computer text processing, a markup language is a system for annotating a document in a way that is syntactically distinguishable from the text." - Wikipedia.

The Nexus Forums software does not use Hyper Text Markup Language (HTML) for formatting things in a post, nor that used on the Wiki (which uses the MediaWiki engine). Instead it uses a different markup language called BBCode. This article merely points you to the markup features you will be interested in using for the most common specific purposes. While very similar to HTML, it is simplified to be more "human readable". It does follow the same basic convention of "tags" surrounded by "[square brackets]" to mark the beginning and end of the markup command. For example: "[b]text[/b]" or '[quote="Author"]quoted text[/quote]'.

The thread How to add links and images to comments in the "Nexus Skyrim" forum was an earlier "trial and error" discovery process which illustrates many of the following.

Please see the BBCode Reference page for the details regarding the markup syntax if you want to embed it in the text you write "offline". There are also online converter programs to help with translating between those different markup formats. There is no official standard for BBCode, so implementation may vary by site.

Programs and Tools

Details

The wiki article Formating and BBCode in Descriptions provides a more extensive list of BBCodes and examples common to the Nexus site. The focus of this article is explaining the Editor Toolbar.

File attachments in both the Forum and Mods comments are severely limited, not only the size of individual files but also the total size of all files ever attached by your account. So you are advised to upload such to third-party online hosting sites, and copy the URL (represented here as "{link.url}") of your upload the hosting site provides in the appropriate BBCode to the Forum post or Mod comments. See also the wiki article List of online hosting sites. These sites come and go over time, so consider this to be a list of starting points.

  • It's better to use the BBCode "img" tag to embed images into your posts.
  • On the Forum's side this is easily supported by a menu bar of buttons (see below) to achieve everything you want.
  • On the Mod's file comments side though you will need to memorize the actual code, or just prepare your post here on the forums side, just never "post" it, then copy&paste it into the comment on the file site.


ForumReplyToolbar_Fig
When you post a new topic or a reply to an existing topic thread, the "Editor" windows opens. At the top of the window where you will enter the body of your text, you will find "Forum Reply Toolbar" (Figure above). The icons highlighted by "red boxes" (with white numbers in their lower right corner) correspond to the BBCodes described below.

ForumReplyToolbar_Fig-01
1. The "Special BBCode" icon. The "picklist" displayed when you "<Left-Click>" on the downward pointing triangle to the right of the "BBCode" field (showing the text "Please select"), is a list of lesser used BBCodes that will enclose the currently selected (highlighted) text in your reply or post. Not all BBCode options listed are permitted in the forums, but this is where you find the "spoiler" and "YouTube video" tags.
The Spoiler tag is used to hide by default text that is lengthy or of limited interest (such as "load orders" and "log files") to most readers of the posting, beneath a "Spoiler" button. When "<Left-Clicked>" upon, the hidden text is revealed until the button is clicked again.
  • BBCode: [spoiler]text[/spoiler]
The YouTube tag only needs the {video.id} (the letters and numbers after the v= in the URL), not the whole address (e.g. i2YkKJfoz3c instead of http://www.youtube.com/watch?


v=i2YkKJfoz3c&feature=player_embedded).

Paste the YouTube {video.id}, highlight it, and select from the "Special BBCode" "YouTube" or "YouTube 600px" (thumbnail) options.
  • BBCode: [youtube]{video.id}[/youtube]

(See ForumReplyToolbar_Fig-01. Click the link/thumbnail to see the enlarged image. Use your browser "<back page>" control to return to this page.)

ForumReplyToolbar_Fig-02
2. The "URL Link" icon. This is one of the most commonly used BBCode features: turning a selected block of text in the body into a "hyperlink". A "hyperlink" is highlighted (usually by a colored "underline") text in a post which, when "<Left-Clicked>" upon, will open another web browser page or tab with content from another page or site replacing of the current page. (Most browsers will open the link in a new page or tab if you use "<Right-Click>" instead.) You will have to copy the target URL exactly into the BBCode, so the use of the "Copy Link Location" command of your browser is recommended.
  • BBCode: "[url={link.url}]hyper-link text[/url]"

(See ForumReplyToolbar_Fig-02. Click the link/thumbnail to see the enlarged image. Use your browser "<back page>" control to return to this page.)

ForumReplyToolbar_Fig-03
3. The "Image Link" icon. You will first need to upload your image file to a third-party hosting site. The image on that site will be displayed in your post either automatically sized, or as a "thumbnail" which can be "Left-Clicked" to then display the full size image.
  • BBCode:
  • (Thumbnail, displayed in page): [img={link.url}]
  • (Thumbnail as clickable link to external site): [url={link.url}][img]{link.url}[/img][/url]
  • (Thumbnail resized): [img={width}x{height}]{link.url}[/img]
  • (Thumbnail resized with meta data): [img width="100" height="50" alt="Lubeck city gate" title="This is one of the medieval city gates of Lubeck"]{Lubeck_image.url}[/img]

(See ForumReplyToolbar_Fig-03. Click the link/thumbnail to see the enlarged image. Use your browser "<back page>" control to return to this page.)

ForumReplyToolbar_Fig-04
4. The "Code" icon. Renders text (mostly code) while maintaining all white spacing and indentation within. Also uses a monospaced font (each character takes up the same space). The "Code Type" listbox lets you select the code language, or it will attempt to "auto detect" the type. If a "Starting line number" is entered it will add a number to each line within the code box. If none is entered, the lines are presented "as is".
  • BBCode: [code]{lines of indented code}[/code]

(See ForumReplyToolbar_Fig-04. Click the link/thumbnail to see the enlarged image. Use your browser "<back page>" control to return to this page.)

ForumReplyToolbar_Fig-05
5. The "Quote" icon. With the [quote] tag you can create a citation/quote of something someone else said. An existing post has both a "Quote" and a "MultiQuote" button in the bottom right corner of the "Reply editor" window. If these are used, the "UserName" of the quoted poster is add to the "Quote" label. Use of the Icon simply adds the "Quote" tags around the selected text and labels it with the word "Quote".
  • BBCode:
  • Quoting no-one in particular: [quote]'Tis be a bad day[/quote]
  • Quoting someone in particular: [quote=Bjarne]This be the day of days![/quote]

(See ForumReplyToolbar_Fig-05. Click the link/thumbnail to see the enlarged image. Use your browser "<back page>" control to return to this page.)

ForumReplyToolbar_Fig-06
6. The "Reveal Markup" icon. The icon is a "light switch" indicating that it is a "toggle". When clicked it displays all the BBCode formatting in the text body. This is usefully when you wish to edit something within what the Toolbar icons formated. It is often necessary with the "Quote" format as that leaves the cursor within the "quote field", often causing the next thing you write to become part of the quotation. As this is a "toggle", you have to remember to flip it back by clicking on it again when done if you wish to see the results instead of the formatting codes.
BBCode: none.

(See ForumReplyToolbar_Fig-06. Click the link/thumbnail to see the enlarged image. Use your browser "<back page>" control to return to this page.)

The other icons are felt to be sufficiently self-evident to not need explanation. (Just hover your cursor over them to see a "tooltip" explanation.) However, if you aren't certain, simply highlight some text and test. You now know you can use the "Reveal Markup" icon to remove the formatting. (The "Eraser" icon, next to the "Reveal Markup" switch icon, is supposed to do that, but doesn't seem to work in testing.)

References

Nexus wiki articles referred to by this article:

Nexus wiki articles that refer to this article: