Inserting Images And Thumbnails In The DPC Forum

09/02/2003 05:35:33 PM · #1

Revised 10/18/03

I had to delete the sample images from my DPC storage but the tutorial should still work. I have this in a MS word file (.doc) and can zip it if anyone still needs it. It is somewhat large at about 1.7mb unzipped.

Also check out the new [thumb][/thumb] tags when posting a message in the forum. All you need to do is enter the image number between the tags for it to work.

Revised 9/03/03

Several members have asked me to show them how to properly insert images and thumbnails in the DPC forum.

So I put this how-to together with sample images in hopes that it would help. I hope I did not make this to complicated. I wanted to make it easy to follow along.

First I would like to refer you to the existing tutorial "Forum Code How To" by Bod. It is very well written, the only fault I found was that it did not explain how to get the correct url locations for images stored on DPC.

How to insert Full Size images stored on DPChallenge.com into forum threads:

Second the sample photos used in this how-to were done by karmat, crabappl3 and myself. I hope the others do not mind my using their photo in these examples.

I would also like to make a note here about loading large images (640x??). These large images will slow down the loading of the forum pages and make it difficult for users on a dial-up connection. So if at all possible load a smaller version of the picture to your portfolio and use it or use the thumbnail link in the next part of this how-
to. You can also load the images on your own website and do the same.

There are numerous ways to accomplish these links but I will only cover loading the images stored on DPC website in this how-to.

To insert an image into a thread you need to insert the url within the "img" tags: Image tags = [img] goes at the beginning of the url while [/img] goes at the end of the url.

When using any tags there are NO SPACES from the start of the first tag to the end of the closing tag. Spaces were used in the examples below as noted and only so that the link would show up in the how-to.

Note:
The url you see in the address bar of your browser that looks like this
"//www.dpchallenge.com/image.php?IMAGE_ID=34476" will not work when attempting to insert an image using the "img" tags. (See sample below).

This url is calling a page location not the image. It can be used with the "url" tags that I will show in another how-to.

Example of non-working image url:

You need to do the following:

1. If you have a thread started, minimize the browser window and then:

2. "Open another browser window" and go to the page on DPC that contains the full size image you want to post.

Example:

3. "Right click" on the image

4. Select "properties" and leave this window open

Note: The file dimensions below the address or url. In this case it is 640x480. If possible use a smaller image than 640x480. The more of these large images posted in the forum the slower it is going to be, especially for those on a dial-up connection. Try and post a reduced image or a thumbnail image with a link to the larger image thus giving the members a choice as to whether they want to load the large image.

5. Drag the cursor over the url while holding the left mouse button down until all of the url is highlighted.

6. Right click on the properties window and select "copy" or press "CTRL + C" to copy the url.

7. Place the cursor within the img tags of the thread and by right clicking and selecting "paste" or pressing "CTRL + V" insert the url. It should look similar to the one below.

In the example below I put a "space" at the beginning and at the end of the url so it would not load the image and you could see the link in this how-to.

[img] //images.dpchallenge.com/images_challenge/127/34476.jpg [/img]

Taking the spaces out the final result should work like this:

The one thing to remember is that to get the exact url you need in DPC right click on the image and select properties to get the exact image location.

To insert a thumbnail instead of the fullsize image the steps are almost the same.
Go to the page that shows the thumbnail of the image you want to post. Right click on the image and select properties
Highlight and copy the url
Paste the url within the [img] [/img] tags like so:
[img] //images.dpchallenge.com/images_challenge/127/thumb/34476.jpg [/img]

How to insert a thumbnail image with a link to the large image in DPChallenge.com forum threads:

This is done just as shown in the DPC tutorial "Forum Code How To" by Bod. using a combination of the [url] [/url] tags and the [img] [/img] tags.

This method involves more cutting and pasting. You can either use the browser window with the thread started or use notepad or etc to cut and paste your message. Then cut and paste it into the message box once it is completed.

There are two methods of creating this type of link:

Method 1 - Thumbnail image with link to open the large image in a separate window.
Click the thumbnail below for an example:

Method 2 - Thumbnail image with link to open the DPC page with large image for comments and etc in a separate window. Click the thumbnail below for an example:

Method 1:

Note: This method is used to load just the large image and not the page with comments and etc.

To start off we want the url for the large image.

1. "Open another browser window" and go to the page on DPC that contains the full size image you want to post.

Example:

2. As we did before right click on the image and select "properties" to get the url.

3. Drag the cursor over the url while holding the left mouse button down until all of the url is highlighted.

4. Right click on the properties window and select "copy" or press "CTRL + C" to copy the url.

5. Now paste the url just after the = sign and before the right bracket ] of the opening tag. We now have created

Part 1 the beginning with the url tag [url=]. You should now have the first part that looks like this. I have added

spaces again to prevent it from loading the image and allowing you to see it in this thread.

[url = //images.dpchallenge.com/images_portfolio/9932/orig/30187.jpg ]

6. Now we need the url for the thumbnail image. So go to your profile or porfolio page which contains the thumbnail of the image you want.

Example:

These smaller images located on the profile or portfolio pages are thumbnails.

7. Right click on the image you want and select "properties".

Notice in this properties window you should see the word "thumb" in the url and the dimensions should be 120x??. This confirms that it is the thumbnail image.

8. Drag the cursor over the url while holding the left mouse button down until all of the url is highlighted.

9. Right click on the properties window and select "copy" or press "CTRL + C" to copy the thumbnail url.

10. Now we have to add this to our Part 1. We need to add the url to the thumbnail image using the IMG tags as we did before.

Example:

Part 2 should look like this. Again I inserted spaces before the url and at the end of the url so it would show in the thread.

[img] //images.dpchallenge.com/images_portfolio/9932/thumb/30187.jpg [/img]

11. Now we need to paste the two parts together and add the Part 3 at the very end:

Part 1: [url = //images.dpchallenge.com/images_portfolio/9932/orig/30187.jpg ]

Part 2: [img] //images.dpchallenge.com/images_portfolio/9932/thumb/30187.jpg [/img]

Part 3: [/url]

You should now have a long link that looks like the one below without the spaces. Again I added the spaces so the line would show up in the thread. For this reason it is broken up on numerous lines instead of continuous:

[url =//images.dpchallenge.com/images_portfolio/9932/orig/30187.jpg]
[img] //images.dpchallenge.com/images_portfolio/9932/thumb/30187.jpg[/img] [/url]

Removing the spaces your link should work like this in the thread.

If you click on the thumbnail it will load the large original image:

Method 2:

Note: This method is used to load the DPC large image page with comments and etc.

To start off we want the url for the DPC large image page.

1. "Open another browser window" and go to the page on DPC that contains the full size image you want to post.

Example:

2. This time highlight the url in the address bar an copy the url.

3. Drag the cursor over the url while holding the left mouse button down until all of the url is highlighted.

4. Right click on the window and select "copy" or press "CTRL + C" to copy the url.

5. Now paste the url just after the = sign and before the right bracket ] of the opening tag. We now have created

Part 1 the beginning with the url tag [url=]. You should now have the first part that looks like this. I have added spaces again to prevent it from loading the image and allowing you to see it in this thread.

[url = //www.dpchallenge.com/image.php?IMAGE_ID=11505]

6. Now we need the url for the thumbnail image. So go to your profile or porfolio page which contains the thumbnail of the image you want.

Example:

These smaller images located on the profile or portfolio pages are thumbnails.

7. Right click on the image you want and select "properties".

Notice in this properties window you should see the word "thumb" in the url and the dimensions should be 120x??. This confirms that it is the thumbnail image.

8. Drag the cursor over the url while holding the left mouse button down until all of the url is highlighted.

9. Right click on the properties window and select "copy" or press "CTRL + C" to copy the thumbnail url.

10. Now we have to add this to our Part 1. We need to add the url to the thumbnail image using the IMG tags as we did before.

Example:

Part 2 should look like this. Again I inserted spaces before the url and at the end of the url so it would show in the thread.

[img]//images.dpchallenge.com/images_challenge/60/thumb/11505.jpg [/img]

11. Now we need to paste the two parts together and add the Part 3 at the very end:

Part 1: [url = //www.dpchallenge.com/image.php?IMAGE_ID=11505 ]

Part 2: [img] //images.dpchallenge.com/images_challenge/60/thumb/11505.jpg [/img]

Part 3: [/url]

You should now have a long link that looks like the one below without the spaces. Again I added the spaces so the line would show up in the thread. For this reason it is broken up on numerous lines instead of continuous:

[url =//www.dpchallenge.com/image.php?IMAGE_ID=11505 ][img] //images.dpchallenge.com/images_challenge/60/thumb/11505.jpg[/img] [/url]

Removing the spaces your link should work like this in the thread.
If you click on the thumbnail it will load the DPC page with the large original image and the comment option and etc:

If you have any questions or comments please contact me via PM or email.

Calvus

Message edited by author 2003-10-18 11:37:07.

bod

09/02/2003 06:08:29 PM · #2

*Very* nice.
If people find this easier to follow than my tutorial then I suggest you ask Drew to replace it, rather than have this sink into the murky backwaters of the forums : )

Great job Robin, this is really well done.

09/02/2003 06:23:15 PM · #3

Paul

Thank you so much for your kind words!

I was a little uneasy because I was not sure how you would interpret my attempt to clarify this forum code.

Coming from you this is a great compliment!

Calvus

StevePax

Canon PowerShot S50

09/02/2003 06:30:25 PM · #4

Great tutorial. Hopefully we'll see fewer broken links now!

I would change one little thing, Calvus. When using the thumb as the link, instead of using the .jpg filename of the larger image as the url, use the actual page location in DPC of the image. That way, clicking on the thumb takes you to the whole page for that image, where people can comment, etc. Using the filename for the large image just brings up the large image on a white screen - no place to comment or anything.

Really, that just depends on what the person posting the link wants to do, but it seems to make sense to do it that way.

Message edited by author 2003-09-02 18:30:49.

Canon EF-S 18-55mm f/3.5-5.6 II

09/02/2003 06:35:35 PM · #5

Thanks to the both of you. It sounds articulate and clear, although...

what is the Mac equivalent to 'right-click and select properties'?

kostia

Canon EOS-350D Rebel XT

09/02/2003 06:58:56 PM · #6

Originally posted by zeuszen:

what is the Mac equivalent to 'right-click and select properties'?

Depending on your browser. In Netscape/Camino/Mozilla/Safari, hold the control key and click on the image, then choose "Copy image location" from the pop-up context menu to get the image's URL. In IE, hold the mouse down on the image for longer than a click, and the context menu will pop up. The key is "image location."

Though what you really want, as StevePax said, is the path to the image's PAGE, not just the image itself.

StevePax

Canon PowerShot S50

09/02/2003 07:05:06 PM · #7

Originally posted by kostia:

Originally posted by zeuszen:
what is the Mac equivalent to 'right-click and select properties'?

Depending on your browser. In Netscape/Camino/Mozilla/Safari, hold the control key and click on the image, then choose "Copy image location" from the pop-up context menu to get the image's URL. In IE, hold the mouse down on the image for longer than a click, and the context menu will pop up. The key is "image location."

Though what you really want, as StevePax said, is the path to the image's PAGE, not just the image itself.

He'll still need the image location for any images he wants to imbed directly into the forum, or for thumbnail images to be used as links - Path to image for forum, path to page for jumping to with links.

09/02/2003 08:44:55 PM · #8

Originally posted by StevePax:

Great tutorial. I would change one little thing, Calvus. When using the thumb as the link, instead of using the .jpg filename of the larger image as the url, use the actual page location in DPC of the image. That way, clicking on the thumb takes you to the whole page for that image, where people can comment, etc. Using the filename for the large image just brings up the large image on a white screen - no place to comment or anything.

Really, that just depends on what the person posting the link wants to do, but it seems to make sense to do it that way.

Steve

Thanks, I have had a number of thank you's already. Some by PM.

I see your point and I agree, I probably should have used that method in lieu of the one I did use. I did note that there were several ways of doing it.

I will clarify this by editing the how-to and adding that method in as a second option.

Thanks again.

Calvus

09/02/2003 10:40:35 PM · #9

I revised the how-to to include both methods of thumbnail links.

Method 1 - calls just the large image in a separate window
Method 2 - calls the DPC large image page with comments and etc.

My eyes were starting to go cross when I finished it, so I will print a copy out and look it over for any errors.

Please let me know how you like it and if it is helpful. If you have any questions PM me or email me.

Calvus

09/02/2003 10:57:26 PM · #10

Thanks for your efforts, Calvin. Just don't check for errors with your eyes crossed. ;-)

Thanks to Steve, kostia, Bod as well.

09/03/2003 02:50:18 PM · #11

I have had several members tell me that this did help them out.

Does anyone else have any comments?

If it is helpful I will continue to clean it up and make it better and easier to follow? I through this together in a hurry and cleaned it up some.

One thing I did not add was a how-to to add just the thumbnail alone.

I did import this into MS Word and tht option can be made for download it need.

Comments please :)

Calvus

Message edited by author 2003-09-03 14:51:11.

e301

09/03/2003 05:37:36 PM · #12

Originally posted by bod:

There's a bunch of stuff in your tutorial, bod, that isn't covered in this. My suggestion would be to add this to it - with Robin's permission, naturally.

Top stuff

Ed

Canon 12x IS USM (S3 IS built-in Lens) -- 36-432mm (35mm EQ)

09/04/2003 12:02:45 AM · #13

FYI, the URL tag doesn't seem to work if there are spaces before and after the "=" sign. I hate HTML. :) Why should the spaces make a difference!!!

GeneralE

Canon PowerShot S3 IS

09/04/2003 12:12:14 AM · #14

Originally posted by ChrisW123:

FYI, the URL tag doesn't seem to work if there are spaces before and after the "=" sign. I hate HTML. :) Why should the spaces make a difference!!!

Because the space character is still a character and requires a code, and requires the computer to display it rather than discard it. Otherwise, allyourwordswouldruntogetherlikethisanditwouldbehardtoread.

Canon 12x IS USM (S3 IS built-in Lens) -- 36-432mm (35mm EQ)

09/04/2003 12:25:04 AM · #15

Still shouldn't make a difference, especially not in "keywords" such as "[URL=". "[URL = " should be the same as "[URL=" :) Although I know HTML isn't as straight forward as that due to other reasons.

Anyway here's a boiled down summary of examples that I'll use to post stuff from now on (note, remove "*" in the leading tags. I had to add this to prevent the images for showing up!):

To post a full size image use:

[*img]//images.dpchallenge.com/images_challenge/42/8472.jpg[/img]

To post a thumbnail (on DPChallenge):
[*img]//images.dpchallenge.com/images_challenge/42/thumb/8472.jpg[/img]

To post as a LINK:

[*url=//images.dpchallenge.com/images_challenge/42/8472.jpg][/url]

To post a THUMBNAIL link (on DPChallenge) to your image use:

[*url=//images.dpchallenge.com/images_challenge/42/8472.jpg]
[*img]//images.dpchallenge.com/images_challenge/42/thumb/8472.jpg[/img][/url]

Message edited by author 2003-09-04 00:26:46.

GeneralE

Canon PowerShot S3 IS

09/04/2003 12:35:01 AM · #16

I've had good success posting examples of links using curly braces instead of the square brackets. It's easy to remember because they are the upper-case instances of the same keys:
DEMO:
{url=//www.pbase.com/image/20719659}Not My Car{/url}
LINK:
Not My Car

09/04/2003 12:45:16 AM · #17

The problem I was noticing was not with the use of the tags so much as how to get the correct link/url. The link for the large photo and and the link for the thumbnail.

They would be viewing a photo like this shown in the how-to:

And the link shown will not work within the img tags.

Calvus

09/04/2003 01:14:44 AM · #18

The image above: //images.dpchallenge.com/images_portfolio/9932/orig/36212.jpg

DOES work with [*img]...[/img] (no "*") but only if there are NO SPACES after the "]" and before the end tag "[/img]". If there are spaces in those places it doesn't work. I'm using IE 6.0 with SP2, BTW. Basically the key here is to not use extra spaces, including after a tag, before one, or in one.

BTW, Great tutorial! Great help to me anyway, and probably to most here.

Message edited by author 2003-09-04 01:15:33.

Nikon AF-S DX NIKKOR 18-200mm f/3.5-5.6G ED VR II

09/04/2003 01:21:03 AM · #19

Originally posted by GeneralE:

General... what browser are you using? The "{" and "}" do not work for me in your example, but if I substitute "[" and "]" it does work. I'm confused now. You must be using Netscape. ;)

dacrazyrn

Nikon D300

09/04/2003 03:12:38 AM · #20

I think I like the link more, myself. It sends people to it, it increases the number of views, and gives them the option to look at all the technical, and read/leave comments.

09/07/2003 12:01:20 AM · #21

Bump!

There was a request to locate this thread.

Calvus

Message edited by author 2003-09-07 17:06:26.

09/07/2003 03:55:36 PM · #22

[test] Yes! Works like a charm. Thank you, thank you.

Message edited by author 2003-09-07 16:04:25.

09/11/2003 08:47:16 PM · #23

Bump

clues56

Sony DSC-F707

09/26/2003 07:45:07 PM · #24

Here's the dumbest question yet: What does "bump" mean?