How to add remote images to posts & comments

These instructions will enable you to add photos from another website, i.e. a remote site, to your posts and/or comments here on bikecalgary.org. Print this page so you can refer to it while you work.

Visit the remote site's web page where your picture is located.

  • If you are using the Firefox browser, right-click on the image you want, and select View Image. This will open the image by itself in a new browser tab. Copy the URL (address) of that new tab; it will likely end in .jpg or .png or .gif
  • If you are using Microsoft Internet Explorer, right-click on the image you want, and select Show Picture. This will opent he image by itself in a new browser window. Copy the URL (address) of that new tab; it will likely end in .jpg or .png or .gif
  • If you are using Google Chrome, right-click on the image you want, and select Open Image in New Tab. This will open the image by itself in a new browser tab. Copy the URL (address) of that new tab; it will likely end in .jpg or .png or .gif
  • If you are using Apple Safari (on Windows), right-click on the image you want, and select Open Image in New Tab (or in New Window). This will open the image by itself in a new browser tab, or window. Copy the URL (address) of that new tab, or window; it will likely end in .jpg or .png or .gif
  • If you are using Opera, right-click on the image you want, and select Open Image (). This will open the image by itself in a new browser tab. Copy the URL (address) of that new tab; it will likely end in .jpg or .png or .gif
  • If you are using another browser, you're on your own!

Here is the URL of an image taken from Facebook:
http://photos-h.ak.fbcdn.net/hphotos-ak-snc1/hs102.snc1/4880_115611847440_705552440_2517197_7848638_n.jpg

To insert your image in your post, or comment, you need to use the IMG tag and specify the source (src) of the image. You will put the URL you obtained in between the quotes of the img tag:

<img src="">

So, for the Facebook image above, you would end up putting this into your post or comment:

<img src="http://photos-h.ak.fbcdn.net/hphotos-ak-snc1/hs102.snc1/4880_115611847440_705552440_2517197_7848638_n.jpg">

One last thing: if the image is wider than 640 pixels, it's going to make a mess of the bikecalgary web page style. So, limit the width to 640 pixels, or even 480 pixels, by adding the width parameter to your IMG tag, like so:

<img src="" width="480">

For that Facebook image, the final adjusted code looks like this:

<img src="http://photos-h.ak.fbcdn.net/hphotos-ak-snc1/hs102.snc1/4880_115611847440_705552440_2517197_7848638_n.jpg" width="480">

And here is what that image looks like:

If you see no image above, it's because you need to be logged in to Facebook in order to be able to see it. Here's another example, from our website:

<img src="http://bikecalgary.org/files/bluemarine_logo.jpg" width="480">

And of course here's what it looks like:

Now you know how to add remote images to your posts and comments! If you have any questions, please post them below, in reply.

Forums: 

This is great.

Thanks for the info. Makes a TON easier to do this, ESPECIALLY the width parameter so that things fit better. Now all I need is to take some shots. :).