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

Offline noquiexis

  • Captain
  • Administrator
  • Tour Guide
  • *****
  • Posts: 478
  • Gender: Male
  • Sailing on a dream!
    • Five Lines Four Spaces
Placing Pictures in a Post
« on: December 12, 2016, 04:39:53 PM »
from: http://ourdollcommunity.com/forum/index.php?topic=544.0

Placing Pictures in a Post

     To place pictures in a post (also called “hotlinking”), follow these steps. This is written for Windows. Other operating systems and Graphic User Interfaces (GUI's) may be different. Those with experience on those platforms are welcome to share with the class.



Notes

     Long posts are best composed in a separate text editor1, then copied and pasted into the edit pane. To highlight the entire edit pane, make sure your cursor is somewhere in the edit pane, then press <CTRL> and the letter <a> at the same time. Then you can either copy the text (<CTRL> and the letter <c>) copy and delete the text (<CTRL> and the letter <x>), or just delete the text with your “Delete” key.

     HTML code does NOT currently (Sep 2013) work with Simple Machines Forum (SMF) software.

     Some websites (such as the Internet Movie DataBase – http://us.imdb.com/) and RealDoll 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.



     1. Display the image that you want to place in the post.
     2. Right click the image and select 'Properties'.
     3. Copy the 'Address: (URL)' and paste that into your post.
     4. If the address you just pasted is not highlighted, then highlight it now.
     5. Click the Image button above.
     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:
Code: [Select]
[center][img]http://www.arimecibo.com/coppermine/albums/userpics/10001/normal__MG_3849_sm.JPG[/img][/center]
     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 the 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=100 ] or to [ img height=100 ] (no spaces between the brackets).
     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: width=300 and height=100


     Linking to a larger picture, album, or website from within a picture involves two separate link addresses. The first address is the URL (internet address) of the picture, album, or website that you want the link to lead to. The second address is the image link of the picture that you want to display in the post. In this example, we will link to a larger picture from within a picture, specify the size of the picture that we want to display, and add a text link to the larger picture.

     To link to a larger picture from within an image, use the address of the larger image in the URL portion of the post. Use the address of the image that you want to display in the image link portion of the post.

     1. Copy and paste the large image link into your post. This is the URL (internet address) of the picture that you want to link to.
     2. Copy and paste the image address of the image that you want to display in your post.
     3. Highlight ONLY the address of the image that you want to display in the post and click the Image button above. This will place the [  img ]  and [ /img ] tags around your image, but without the spaces inside the brackets.
     4. Highlight both the URL (internet address) of the picture that you want to link to and the image that you want to display (everything, including the [ img ] and [ /img ] tags.
     5. Click the URL button above. This will place the [ url ] tag at the beginning of everything, and the [ /url ] tag at the end of everything (no spaces between the brackets).
     6. Change the right bracket after url  ( ] ) to an equals sign ( = ), and place the right bracket after the link, just before the [ img ]. Example: [ url=where you link to here ] [ img ] image link here [ /img ][ /url ] (no spaces between the brackets).
     7. 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:

Code: [Select]
[center][url=http://www.arimecibo.com/coppermine/albums/userpics/10001/_MG_3849_sm.JPG]
[img]http://www.arimecibo.com/coppermine/albums/userpics/10001/normal__MG_3849_sm.JPG[/img][/url][/center]
     Notice that the URL link does not have the "normal_", but the picture link does.
     The top line is the URL (internet address) of the picture that you want to link to.
     The bottom line is the link to the image that you want to display.
     The final [ /url ] must be placed after the display image link (after the [ /img ] ).

     Your picture will look like this on the page:



     8. 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.

     Your post will look like this in the edit pane:

Code: [Select]
[center][url=http://www.arimecibo.com/coppermine/albums/userpics/10001/_MG_3849_sm.JPG]
[img width=100]http://www.arimecibo.com/coppermine/albums/userpics/10001/normal__MG_3849_sm.JPG[/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.

     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.


     You may also post a link to a larger picture from within a picture and a separate text link to a website, gallery, or thread under the picture. To do this, just add a link in the usual fashion, before the [ /center ].

Example:

Code: [Select]
[center][url=http://www.arimecibo.com/coppermine/albums/userpics/10001/_MG_3849_sm.JPG]
[img width=100]http://www.arimecibo.com/coppermine/albums/userpics/10001/normal__MG_3849_sm.JPG[/img][/url]
[url=http://www.arimecibo.com/smf/index.php?topic=59.0]The Snow Queen Tribute[/url][/center]


:)  :)  :)

 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 before posting the message.

     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.

     It is always a good idea to Preview your posts. If you find something that needs to be edited, this is the best time to catch it. I still find errors in my posts, so nobody is perfect!

Edited by noquiexis 27 Jan 2017 for links.

 :)  :)  :)
« Last Edit: January 27, 2017, 02:34:47 PM 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