Author Topic: Placing Pictures in a Post  (Read 663 times)

Offline noquiexis

  • Captain
  • Administrator
  • Crew
  • *****
  • Posts: 531
  • Gender: Male
  • Sailing on a dream!
    • Five Lines Four Spaces
Placing Pictures in a Post
« on: December 12, 2016, 04:39:53 PM »
Placing Pictures in a Post
Edited 9 August 2019 for clarity.


     For this tutorial, the edit cursor is a movable mark that usually looks like the capital letter "I". The mouse (or touchpad) cursor may be an arrow on a computer or a round spot on some devices. For all procedures below, begin by placing your edit cursor where you want the picture to appear in your post.

     This is written for a PC using the Microsoft Windows Graphic User Interface (GUI) and the Internet Explorer web browser. Other operating systems, Graphic User Interfaces, and web browsers may be different. Those with experience on those platforms are welcome to share with the class.

     Long posts are best composed in a separate text editor1, then copied and pasted into the forum edit pane. For most text editors (including this forum), place your edit cursor anywhere in the text and press <CTRL> and the letter <a> at the same time. This will highlight the entire body of text. You can then press <CTRL> and the letter <c> copy the text and the press <CTRL> and the letter <v> to paste the text into the forum edit pane.

     For each CODE block below, it may be easier to understand if you copy the code into a text editor.

     HTML code does NOT work with the Simple Machines Forum (SMF) software.

     To place pictures in a post (also called "hotlinking"), follow these steps. Some websites (such as the Internet Movie DataBase prevent hotlinking. You might see the pictures when you edit your posts, but they will not show up for others, nor will they show for you after you clear your browser's cache.

Posting pictures on the forum

     1. Find the image that you want to place in the post.
     2. Right click the image and select Properties.
         If you are using the Google Chrome web browser, click on "Copy image address".
     3. Copy the 'Address: (URL)' and paste that into your post.(*.jpg, *.png, or *.gif)
     4. If the address you just pasted is not highlighted, then highlight it now.
     5. Click the Image button above.
         You could click the Image button first, then put your picture link between the image tags [ img ] like this [ /img ].
         (The spaces in the BBCode tags should be ignored.)
    6. If you want the image centered (left to right) in the post, highlight everything in the image link and click the Center button above.

     Your post will look like this in the edit pane(with centering):
Code: [Select]
     Click the Preview button below the edit pane. Your post will look like this on the page:

Reducing Large Images

     You may want to reduce the size of a large picture to prevent to need for scrolling.* If you want to set the image to a specific size, as for a thumbnail, either change the [ img ] tag to [ img width=x ] or to [ img height=x ] (no spaces between the brackets). The "x" in "width=x" and "height=x" are variables that specify the number of pixels wide or high for your picture. When people click on that picture, a larger size may appear.

*   Arimecibo Island Forum has images automatically resized to 650 pixels on the longest side.

     You need not specify both the width and the height of the picture. If you do this, and if you get one of the numbers wrong, you will change the aspect ratio of the picture. It may appear out of proportion. With only the width or the height specified, the aspect ratio will remain constant.

Example: Changing the width and height of the above picture to
Code: [Select]
[center][img width=300 height=100][/img][/center]
will result in this:

Post a picture with embedded link

     You can post a picture with an embedded link that goes to a larger picture, album, or website from within a picture.

     From Nesting BBCodes:
The general format of a BBCode tag has three parts: an opening tag, the inside content and a closing tag, as shown below:
[open]      text inside      [/close]

You can place one BBCode tag inside another as long as the child tag is closed before the parent tag.

     In the example below, we will be nesting a Coppermine Photo Gallery resized "normal" image inside a link to the full size of that same image. The opening URL tag is given first, then the opening and closing IMG tags are given, then the closing URL tag. To better understand the nesting, look at it this way:

Code: [Select]
[url="your link here"] <-- clickable link

    [img]"your picture address here"[/img] <-- picture to be displayed (*_normal.jpg, *_normal.png, or *_normal.gif)

[/url] < -- closing URL tag

     As you can see, linking to a larger picture, album, or website from within a picture involves two separate internet addresses.
The first address is the URL (clickable link to the internet address) of the picture, album, or website where you want to go.
The second address is the image link of the picture that you want to display in the post (*_normal.jpg, *_normal.png, or *_normal.gif).

Method 1 (Easy) In the "New Topic" or "Reply" edit pane:

     1. Click on the URL button.
     2. Without moving the cursor, Click on the IMG button.
          This will nest the IMG tags inside the URL tags.
Code: [Select]
[url][img][/img][/url]     3. Place an equals sign "=" between the "[*url" and the "]". Example: [*url= ] (ignore the "*")
Code: [Select]
[url=][img][/img][/url]       3a. If you want to center the picture, highlight all and click on the Center button.
         You could also click on the buttons in this order: Center, URL, IMG, then place the equals "=" sign.
Code: [Select]
[center][url=][img][/img][/url][/center]     4. Copy the image address of the image that you want to display in your post.(*_normal.jpg, *_normal.png, or *_normal.gif)
     5. Paste the image address between the IMG tags: [ img ]"your picture address here"[ /img ]
         (ignore the spaces in the tags above)
     6. Paste where you want to link to after the equals sign "=". If you are linking to the full size of your displayed picture, be sure to remove the "_normal" part from this link.

Code: [Select]
The Edit pane should show this (centered):
Code: [Select]

     Note that the "_normal" specifier is added to the link within the IMG tags, but is left out of the URL link. This will display the Coppermine Photo Gallery resized "normal" image, but will link to the full sized image that you uploaded. Keep in mind that any space <Spacebar> and any carriage return <Enter> in your link will be included in the displayed image. This may produce undesirable results. Copy the example below into a text file to see a cleaner method of writing your link.

Code: [Select]
     Click the Preview button below the edit pane. Your picture will appear like this (centered):

     The image as displayed in this example is 266 pixels wide by 399 pixels high. If you click on that image, you will see the full size image with the dimensions of 881 pixels wide by 1322 pixels high.

Method 2 (Advanced) In the "New Topic" or "Reply" edit pane:
     1. Type this into the Edit pane:
Code: [Select]
[center][url=][img][/img][/url][/center]     2. Copy and paste where you want to link to between the [*url= and the ] (ignore the "*"). This is the URL (internet address) of the picture or web page that you want to link to.
     3. Copy and paste the image address of the image that you want to display in your post between the IMG tags.
     4. If you do not want the image centered (left to right) in the post, just ignore the CENTER tags.

     What you see in the edit pane and on the page should be the same as above, but without centering unless you opted for step #4.

Adding a text link to a picture with link

     If you also want a text link to the larger image under the picture, then add a carriage return <ENTER> before the [ /url ] and then add your text. In the following example, Larger Image is the text and everything is centered.

Code: [Select]
        [img width=100]
    Larger Image[/url]

     Your post will look like this in the edit pane:

Code: [Select]
[center][url=][img width=100][/img]
Larger Image[/url][/center]

     This image will be centered, resized for a thumbnail, and includes the text link below the picture. Note: I deliberately used the 'normal' sized image to show that the width=100 part works.

     Click the Preview button below the edit pane. Your post will look like this on the page. Mouse over the image or the text and you will see that they are both links.

Note: Instead of linking to a larger picture, you could link to a web page. People here often do that to link to their galleries.

 1   I mentioned using a text editor for long posts, then copying that text to the edit pane of your post. While writing a web page for my personal website (in HTML), I have discovered that Microsoft Word for Windows uses two different characters for the quotation marks (") at the beginning and ending of a quote. If you copy and paste these characters into your post, always do a Preview (between the Post and Spell Check buttons) before posting the message. I still find errors in my posts, so nobody is perfect!

     I have also used Windows Notepad in the past. Notepad tends to put carriage returns into your text, just as if you had pressed the <ENTER> key. When you paste your text into the edit pane here

you might get this.

 Notepad ++ is a free text editor that does not add extra carriage returns.

:)  :)  :)

« Last Edit: December 10, 2019, 08:38:44 AM by noquiexis »
"Like a bolt out of the blue
 Fate steps in and sees you through
 When you wish upon a star
 Your dreams come true"

   Cliff Edwards as Jiminy Cricket 1940
Trixie and Dixie "the twins" are Private Secretary inflatable dolls.
Esperanza is a Tera Patrick inflatable doll.
Feodora is an Anatomical Doll, Face 3 Body 3 Feodora Set 1 Feodora Set 2 Feodora Set 3 Feodora Set 4