• Please use real names.

    Greetings to all who have registered to OPF and those guests taking a look around. Please use real names. Registrations with fictitious names will not be processed. REAL NAMES ONLY will be processed

    Firstname Lastname

    Register

    We are a courteous and supportive community. No need to hide behind an alia. If you have a genuine need for privacy/secrecy then let me know!
  • Welcome to the new site. Here's a thread about the update where you can post your feedback, ask questions or spot those nasty bugs!

Helpful Hints/D.I.Y.: Posting images: an illustrated how-to

Cem_Usakligil

Well-known member
Hi All,

One of the most frequently asked questions in OPF is how to post images. I have come to the conclusion that this FAQ deserves its own illustrated how-to, so that we do not have to explain it over and over again. Since there are many steps involved in the process of posting an image, it makes sense to illustrate the instructions using screen captures where possible. Hopefully, this will take the pain out of this process. If something is not clear or missing, please react so that I can make the necessary amendments on an on-going basis.

Table of contents:
1) Can I directly upload my image (as an attachment) to OPF from my computer?
2) How to make my images available (visible) on the Internet?
3) My image is available (visible) on the Internet. How do I add it to my post?
4) How to get the URL of an image which is available (visible) on the Internet?
5) Getting the URL: Right/Cmd-Click method 1 (Copy Image Location/address)
6) Getting the URL: Right/Cmd-Click method 2 (Properties)
7) Getting the URL: Drag & Drop method (coming soon)
8) Getting the URL: for images hosted on flickr (coming soon)


Cheers,
 
Last edited:

Cem_Usakligil

Well-known member
1) Can I directly upload my image (as an attachment) to OPF from my computer?

1) Can I directly upload my image (as an attachment) to OPF from my computer?

No, unfortunately you can't. At the moment, OPF does not host any images and "attachments" are not allowed. To post an image in OPF, the image must be made available (visible) on the Internet first. Do NOT try adding images using the attachments button as shown below, as it won't work:

postim01.png
 

Cem_Usakligil

Well-known member
2) How to make my images available (visible) on the Internet?

2) How to make my images available (visible) on the Internet?

The short answer is that you should upload it to a web site which hosts images. The possibilities are endless and it is not my intention to provide a full blown overview here. The most common options are:
a) You may have your own web site. In that case, you can upload your images to (a subdirectory) of your website.
b) You may have an account with a photography site (flickr, pbase, smugmug, zenfolio, etc). Upload your images there. Please note that some sites are free of charge (such as flickr) for basic accounts and some are paid services (such as smugmug).
c) You may have an account with a social networking site (myspace, facebook, etc). Upload your images there.
I won't describe the uploading process for those options as it is too varied and out of scope for this how-to. Please refer to the specific instructions for the web sites to which you will be uploading.
 

Cem_Usakligil

Well-known member
3) My image is available (visible) on the Internet. How do I add it to my post?

3) My image is available (visible) on the Internet. How do I add it to my post?

The first thing you need to do is to find out what the unique address of the image is. This is the so-called URL of the image. Without this URL, you cannot refer to the image in your post. Again, there are various ways of achieving this, depending on where the image is hosted. I will describe in the following posts the most common methods used. For any other situations, you have to refer to the specific web site's instructions or ask here and we shall try to answer.

Once you have the URL of your image, follow these steps to add the image to a post you are creating.
1) Start creating a new post or editing an existing one within the allowed time limit to edit your own posts. After the time limit has passed, only mods can edit a post.

2) Click on the "Insert Image" icon.
postim05.png


3) Paste (Ctl/Cmd-V) the URL of the image into the text box which appears.
postim06.png


4) The image is now added to your post. To CENTER it across the page, click on the image to select it and then click on the "Align Center" icon as follows:
postim07.png


5) If the image is not showing as in the examples above, check the "Switch Editor Mode" status. If the mode is set to off (shown as follows), all the images will show as text between IMG tags. To show the images themselves, click on that icon to set the Editor mode to ON.
postim08.png
 

Cem_Usakligil

Well-known member
How to get the URL of an image which is available (visible) on the Internet?

4) How to get the URL of an image which is available (visible) on the Internet?

First, surf to the web site and get to the point where the image is displayed on your browser. Then, you can execute any of the following methods explained in the following posts . Some of the options are browser and/or OS specific and may not apply to you specifically. If that is the case, try another method.

Please note that these instructions will not work if the image is displayed using the Flash application! If you want to share images in posts, do not use the Flash application. Some photography web sites give you the option to use Flash, so be aware of this restriction.
 

Cem_Usakligil

Well-known member
5) Getting the URL: Right/Cmd-Click method 1 (Copy Image Location/address)

5) Getting the URL: Right/Cmd-Click method 1 (Copy Image Location/address):

Right-click (or Command-click on the Mac) on the image. A so-called "context menu" will be displayed as follows.

Choose the option "Copy image location":
postim02.png


That should do it, now the URL of this image has been copied to your clipboard. You can then continue to the step 3 above to include this image is your posts.

If the context menu doesn't show or if the option "Copy image location" is missing, go to the next method.
 

Cem_Usakligil

Well-known member
6) Getting the URL: Right/Cmd-Click method 2 (Properties)

6) Getting the URL: Right/Cmd-Click method 2 (Properties):

Right-click (or Command-click on the Mac) on the image. A so-called "context menu" will be displayed as follows.
postim03.png


Choose the option "Properties". A new window will be shown as follows:
postim04.png


Follow the instructions given in the image to copy the URL to the clipboard of your computer. You can then continue to the next step to show this image is your posts. If the context menu doesn't show or if the option "Properties" is missing, go to the next method.
 

Cem_Usakligil

Well-known member
7) Getting the URL: Drag & Drop method

7) Getting the URL: Drag & Drop method:

Almost all modern browsers support browsing using Tabbed pages. We can use this to drag and drop the image to a new tab on the browser window. If we do that, the URL of the image will be displayed directly on the address box atop the window. Let me demonstrate:

Click and hold on the image (hold meaning: keep on clicking all the time). Now mover the mouse pointer over to the Tab bar as shown below:

(...work in progress folks :)))
 
Picasa / Google+ images

Thought I would share, in case this is useful to others. I used to have my own website for photos but the maintenance became too hard so I shut it down. Since then I have mostly presented photos to friends/family/etc. via facebook and recently on google+ - while facebook is a pain in the **** for sharing outside the site, google makes it very easy but not too easy.

If you use google+ then your uploaded photos are all automatically made available on http://picasaweb.google.co.uk/ or http://picasaweb.google.com/ etc. Just navigate to the image, see "Link to this image" on the right, select the size and then select "Image only" tick box below. Copy the URL from the "embed image" box above and voila: https://lh6.googleusercontent.com/-sDNzcfapg4g/T72b0BcoLXI/AAAAAAAAAfM/vlOudDcEHOw/s144/P1010359.JPG - if you look, it's a dumb sleepy cat, your risk, but you can just as easily then embed it via the image mark-up as per posts above.

Note that you can change the size pretty arbitrarily by editing the second-to-last parameter in the URL ("s144") above to the largest dimension you want. For unlimited/free uploads to google plus this is a max of 2048 pixels.
 

fahim mohammed

Well-known member
Cem and Peter;

Thank you both for taking the time for this conveying this useful and practical information.

Best regards.
 
Thanks Cem. Very helpful indeed.
I have one question though. Is it possible to automatically resize the hot-linked image to fit the browser width? I now have to size the image to about 1200 pixels width before uploading. Otherwise it overflows.

Reginald
 
Top