Image attachments

[64Guitars]

In the past, images attached to messages would be displayed as thumbnails at the bottom of the message. Clicking on the thumbnail would then show the enlarged image. Yesterday, I discovered that very large images would cause the thumbnail code to fail and the whole topic would be displayed as a blank page. So I've turned the thumbnail feature off. This means that you'll need to do a bit more work to display an attached image. But it has the advantage that you can place the image anywhere in your message and resize it, if desired.

To display your attached images, you now have to use the [img][/img] tags. Between the tags, you'd insert the URL of the attached image. Unfortunately, there's no way to get that URL until after you've posted the message. So, you have to attach your image and post the message, then right-click on the attachment (listed at the bottom of the message) and copy the URL, then edit your message and paste the URL between the [img][/img] tags. It's not hard but will take a bit of getting used to.

Any messages you've posted in the past which included an attached image will need to be edited if you want to have the image displayed in your message. Otherwise, the filename of the image attachment will only be listed as a text link at the bottom of the message and the reader would have to click that link to see the image.

As an example, here's the code to display the attached "PirateMonkey.jpg" image file:

[img]https://songcrafters.org/forum/index.php?action=dlattach;topic=8693.0;attach=8858[/img]

And here's the resulting image:



Notice that I can continue to add text to my message after the image. You couldn't do this with the old thumbnail images because they always appeared at the bottom of the message.

You can also resize images by adding width and/or height parameters to the opening [img] tag. For example, the attached PirateMonkey.jpg image is 316 pixels wide by 400 pixels high. If I wanted to display it half-size, I would change the opening [img] tag like this:

[img height=200]https://songcrafters.org/forum/index.php?action=dlattach;topic=8693.0;attach=8858[/img]

The resulting image would then look like this:



Notice that I've displayed this image twice in this message but it's only attached once. I simply used the same attachment URL in both cases but added the height parameter to the second instance.

I'll write up a more detailed explanation later and post it in the Guides/Site Help section.

[Migs]

this will just encourage oskilo to post pics of boobies

[Tony W]

I can't recall Osckilo posting a boob since a few people expressed issue with it. I do recall that one gent expressing issue with boobs as they scan the forum while at work, and felt that boobs on the screen showed a lack of professionalism or something like that.

[Migs]

I was joking Tony.

I also seem to remember people saying they didn't like things like that popping up on thier screen while their wives/kids were around.

I think I also said that given I work from before 7am until after 7 pm that work gives me certain liberties to surf the intaRwebs ... but those liberties don't extend to overt viewing of bewbs all day.

[Tony W]

Sometimes it's best to let a sleeping dog lie agreed?

[64Guitars]

We've had several very large images posted recently (from the Norway weekend, for example). While it's great to see these large images (except for the ORH nudie ), they can really slow down the loading and scrolling of topics. I've edited those messages and added a smaller version of the image which is linked to the full-size version. When you click on the smaller image, the full-size image should be displayed in your browser. This solves the problem, but the code required to accomplish this is probably a bit more than most members want to deal with.

So, I've created a simple BBCode tag for displaying images that are linked to larger versions of the same image. When you click on the new button in the message editor, the following code will be inserted into your message:

[imglink=][/imglink]

Insert the URL of your smaller image between the tags. Insert the URL of the full-size image immediately after the equal sign in the opening tag.

So, the format is:

[imglink=LARGE_IMAGE_URL]small_image_URL[/imglink]

The URLs can point to images on the web, images attached to your message, or both. To create the small image, you would generally load the large image into a graphics program (GIMP, for example) and resize it, then save it with a different name. I'd recommend adding the width to the end of the filename so that you can easily tell which of the two images is the smaller one. For example, if the large image was called "A-TEAM.jpg" and you resized it to a width of 400 pixels, then you might call the resized version "A-TEAM-400.jpg". The [imglink=][/imglink] tags will display a maximum width of 500 pixels, so you should always resize your image to 500 pixels or less. The smaller the image, the faster it will load and display.

As an example, here's an image from the Norway weekend which I've resized to a width of 200 pixels. The code to display it is...

[imglink=https://songcrafters.org/forum/index.php?action=dlattach;topic=8608.0;attach=8723;image]https://songcrafters.org/forum/index.php?action=dlattach;topic=8693.0;attach=8911;image[/imglink]

The URL for the smaller image (between the tags) is from the file I've attached to this message. The URL for the full-size image (in the opening tag after the equals sign) is from the attachment on this message which Geir posted.

The result looks like this:



How does the reader know that this picture is linked to a larger version? Well, if you hover your mouse pointer over the picture, the mouse pointer should change to indicate a link and your browser should display a hint which says "Click to view full size". Optionally, you could also display a similar notice below the picture...

[imglink=https://songcrafters.org/forum/index.php?action=dlattach;topic=8608.0;attach=8723;image]https://songcrafters.org/forum/index.php?action=dlattach;topic=8693.0;attach=8911;image[/imglink]
(Click to view full size)


(Click to view full size)

If you wrap a pair of [center][/center] tags around the whole thing, the image will be centred and the text will be displayed centred under the image.

[center][imglink=https://songcrafters.org/forum/index.php?action=dlattach;topic=8608.0;attach=8723;image]https://songcrafters.org/forum/index.php?action=dlattach;topic=8693.0;attach=8911;image[/imglink]
(Click to view full size)[/center]

(Click to view full size)

I hope everyone will use this new tag when posting large images (anything larger than 700 pixels in width). It's pretty easy to use. The only stumbling block I see is that some members may not know how to resize their images with a graphics program. But this is a basic computer skill that everyone should know anyway, especially if you own a digital camera (and who doesn't nowadays?). So try to learn how to do it. There are lots of free graphics programs available that can do the job. I believe Windows even includes a program that will do it (is it Paint? - I've lost touch with Windows since switching to Linux a couple of years ago).

[Tony W]

64 this is a fantastic mod. I hope people catch on to this quickly. It clears up so many problems with page loading.