Posting Images on the Message Board - Tips & Tricks

Posting Images on the Message Board - Tips & Tricks

Joined: November 8th, 2007, 2:31 pm

January 20th, 2012, 5:30 am #1

I'll be posting replies to this message soon with tips for posting pictures on the message board. I know I'm not the smartest person in the room on this subject, but I wanted to open a discussion to share what I do know, and to ask questions about what I don't know. Others are encouraged to share their knowledge, or to correct me where I've made a mistake.

Most of my knowledge was obtained through:
- Google
- Osmosis - I sit next a peak addict at work who has a web site. He also taught me:
- HTML Hacking 101 - if you want to know how they did it, right click on the page and select "View Source" or "Inspect Element" (choices displayed depend on your browser) and search for ".jpg".

I've included many examples with the links & code displayed, so that others may see how it works - and to copy, edit and use.

My ultimate goal is to get people posting more pictures here, because I and others would like to see them!
-George
Quote
Like
Share

Joined: November 8th, 2007, 2:31 pm

January 20th, 2012, 5:30 am #2

I don't use PhotoBucket, but many do. I don't like it because my work blocks all images from PhotoBucket. It also seems to limit image width to 1024 ...so, I would highly discourage anyone from opening a PhotoBucket account that doesn't already have one.

Assuming you have a PhotoBucket account, and you have uploaded some images, here's what you need to do:

On the message board (here) click on "Post A Message" (or "Reply" if you're in a message you want to reply to with a picture)

Back in PhotoBucket, Click on the "View Album" button, from the Album view:
Hold your mouse over the desired image, then click on the box to the right of "direct link", this will copy the image link to your clipboard


Go back to the post in the message board and paste the link (right click and "paste", or Ctrl V):

http://i1212.photobucket.com/albums/cc4 ... G_0137.jpg

Click on Preview (not Post!) to see what it looks like.


Then click the Edit button.
Type in some text above and/or below the link. Then click the Preview button again.

If you need to edit, click "Edit", if you are happy, click Post!. That's it, all you need to know! It's not all there is to know, but it's all you NEED to know. ...So, start uploading and posting those pictures!


Other methods
If you're in the picture view, you can also select the Direct Link and paste as described above.


But opening each picture takes time.


Back in the PhotoBucket album view, you can also right click the image and select Copy Image URL (Chrome), Copy Shortcut (IE), Copy Image Link (the actual text displayed varies by web browser)


If you paste that into a post you get:
http://i1212.photobucket.com/albums/cc4 ... nier/[b]th_/[/b]IMG_0121.jpg


Oops! That's the "Thumbnail" view. No problem, just delete the "th_/" out of the link:
http://i1212.photobucket.com/albums/cc4 ... G_0121.jpg

-George
Quote
Like
Share

Joined: November 8th, 2007, 2:31 pm

January 20th, 2012, 5:31 am #3

I'll be posting replies to this message soon with tips for posting pictures on the message board. I know I'm not the smartest person in the room on this subject, but I wanted to open a discussion to share what I do know, and to ask questions about what I don't know. Others are encouraged to share their knowledge, or to correct me where I've made a mistake.

Most of my knowledge was obtained through:
- Google
- Osmosis - I sit next a peak addict at work who has a web site. He also taught me:
- HTML Hacking 101 - if you want to know how they did it, right click on the page and select "View Source" or "Inspect Element" (choices displayed depend on your browser) and search for ".jpg".

I've included many examples with the links & code displayed, so that others may see how it works - and to copy, edit and use.

My ultimate goal is to get people posting more pictures here, because I and others would like to see them!
-George
Sometimes, you don't want to display original sizes in your post, and it takes time to load those huge images. If re-sized correctly, the images will load much faster.

As far as I know, you only have two picture sizes to choose from in PhotoBucket, thumbnail or "full size", which seems to be limited to 1024 width (at least in the free version). I'll explain how to re-size those images, or almost any image, later.

Other hosts have default sizes you can select with some clicks, or just edit it in if you know the code. I'll show how the code works for SummitPost and for Picasa. I'm going to post those as replies to the message. Others who are familiar with other picture hosts (e.g. Flickr) are encouraged to reply to this post with other examples of default size codes.

-George
Quote
Like
Share

Joined: November 8th, 2007, 2:31 pm

January 20th, 2012, 5:31 am #4

SummitPost will allow you to upload massive pictures, without any limitations I know of ...as long as you don't tick off the elves. It's kind of clunky to use as storage for your pictures, but if you're already uploading them there, anyway... you can link them in here.

If you click a couple of boxes, SummitPost will resize your image for posting and give you the link for the following standard sizes:
thumb
small
medium
large
original


...but who wants to click on all those buttons? Just right click on any image in SummitPost, copy image url, paste, and edit it (see bolded size text below) by typing whatever size you want.

http://images.summitpost.org/thumb/771589.jpg

http://images.summitpost.org/small/771589.jpg

http://images.summitpost.org/medium/771589.jpg

http://images.summitpost.org/large/771589.jpg


You may have noticed after this post started loading, the text jumped off the screen (at least is does with my browser). The picture below re-sized the display size of the page, the scroll bar probably appeared at the bottom, and your auto-text wrapping appeared to stop working. Something to keep in mind when you post really large images directly into a post.

http://images.summitpost.org/original/771589.jpg ...this could take a while to load.


-George
Quote
Like
Share

Joined: November 8th, 2007, 2:31 pm

January 20th, 2012, 5:32 am #5

Sometimes, you don't want to display original sizes in your post, and it takes time to load those huge images. If re-sized correctly, the images will load much faster.

As far as I know, you only have two picture sizes to choose from in PhotoBucket, thumbnail or "full size", which seems to be limited to 1024 width (at least in the free version). I'll explain how to re-size those images, or almost any image, later.

Other hosts have default sizes you can select with some clicks, or just edit it in if you know the code. I'll show how the code works for SummitPost and for Picasa. I'm going to post those as replies to the message. Others who are familiar with other picture hosts (e.g. Flickr) are encouraged to reply to this post with other examples of default size codes.

-George
Picasa will default to an upload picture width of 1600px (which is plenty big for here), but will allow you to upload full sized images if you desire.

If you click a couple of boxes, Picasa will resize your image for posting and give you the link for the following standard sizes which are in pixel widths:
s144
s288
s400
s640
s800


...but who wants to click on all those buttons? Just right click on any image in Picasa, copy image url, paste and edit it (see bolded size text below) by typing whatever size you want.

NOTE: links starting with https: are secure, and will not auto-display images on message board (without using HTML). My images showed up with secure links, so I stripped the "s" off of "https" to get them to display here.

http://lh4.googleusercontent.com/-4ewsL ... Oo/[b]s144[/b]/IMG_1137.jpg

http://lh4.googleusercontent.com/-4ewsL ... Oo/[b]s288[/b]/IMG_1137.jpg

http://lh4.googleusercontent.com/-4ewsL ... Oo/[b]s400[/b]/IMG_1137.jpg

http://lh4.googleusercontent.com/-4ewsL ... Oo/[b]s640[/b]/IMG_1137.jpg

http://lh4.googleusercontent.com/-4ewsL ... Oo/[b]s800[/b]/IMG_1137.jpg


Picasa doesn't advertise it, but you can also post as
s1600
http://lh4.googleusercontent.com/-4ewsL ... o/[b]s1600[/b]/IMG_1137.jpg


or
s0 - that's "s" "zero", for original size, however big that may be. The picture above was uploaded as 1600px wide, so in the case "s1600" and "s0" would be the same.

It used to be if you omitted the size from the image (/s...), the original would display. That changed so that now it displays something ~400px wide if omitted, which is why some of my old "clickable" pictures now open a picture that is smaller than the displayed pictures.
-George
Quote
Like
Share

Joined: November 8th, 2007, 2:31 pm

January 20th, 2012, 5:32 am #6

I'll be posting replies to this message soon with tips for posting pictures on the message board. I know I'm not the smartest person in the room on this subject, but I wanted to open a discussion to share what I do know, and to ask questions about what I don't know. Others are encouraged to share their knowledge, or to correct me where I've made a mistake.

Most of my knowledge was obtained through:
- Google
- Osmosis - I sit next a peak addict at work who has a web site. He also taught me:
- HTML Hacking 101 - if you want to know how they did it, right click on the page and select "View Source" or "Inspect Element" (choices displayed depend on your browser) and search for ".jpg".

I've included many examples with the links & code displayed, so that others may see how it works - and to copy, edit and use.

My ultimate goal is to get people posting more pictures here, because I and others would like to see them!
-George
Above I've showed how to use default settings to re-size pictures stored at different locations, but what if you want to re-size an image that doesn't have default options? ...like PhotoBucket, or some image you "borrowed" off the web. That's when you use a little HTML:

Here's the code:
<img src="PIC_URL" border="0" width="400">

Just swap in your link for PIC URL (leave the quotes), and change the width to whatever you want. The border="0" command just turns off the ugly borders around pictures that show up in some browsers by default, like IE.

It's also possible to force height and width to specific dimensions (which is handy in some cases), but we don't need to do any math here. This method will keep your picture proportional without distorting automatically. I've often seen it written as width="400px". I've omitted the "px" here without any adverse effects as far as I can tell. I only mention this in case it doesn't work for you as I have written it.

<img src="http://i1212.photobucket.com/albums/cc4 ... G_0075.jpg" border="0" width="162">


<img src="http://i1212.photobucket.com/albums/cc4 ... G_0075.jpg" border="0" width="423">


When you re-size a picture using this method, you are actually loading the picture you reference and then squeezing it to reduce, or stretching it to enlarge. ...if you re-size a picture to be larger than the original, it's not going to look too good. In this example, I'm going to enlarge the thumbnail version ("th_"):
<img src="http://i1212.photobucket.com/albums/cc4 ... nier/[b]th_[/b]IMG_0075.jpg" border="0" width="400">



If you re-size a very large image to a smaller size, the HUGE picture actually loads, wasting time, and then gets re-sized. This isn't a big deal if you have a good connection on a good computer, but if somebody is browsing on a $100 tablet...

-George
Quote
Like
Share

Joined: November 8th, 2007, 2:31 pm

January 20th, 2012, 5:33 am #7

I'll be posting replies to this message soon with tips for posting pictures on the message board. I know I'm not the smartest person in the room on this subject, but I wanted to open a discussion to share what I do know, and to ask questions about what I don't know. Others are encouraged to share their knowledge, or to correct me where I've made a mistake.

Most of my knowledge was obtained through:
- Google
- Osmosis - I sit next a peak addict at work who has a web site. He also taught me:
- HTML Hacking 101 - if you want to know how they did it, right click on the page and select "View Source" or "Inspect Element" (choices displayed depend on your browser) and search for ".jpg".

I've included many examples with the links & code displayed, so that others may see how it works - and to copy, edit and use.

My ultimate goal is to get people posting more pictures here, because I and others would like to see them!
-George
Using Pictures as Links
In some cases, you may want to display several smaller images and then link them to the larger originals, so that others can see it full size if they desire. You can also link your picture to something else, like a slideshow, or a trip report. To do this, we need just a little more HTML as shown:

<a href="SOME_URL_HERE"><img src="PIC_URL" border="0" width="100"></a>

From the commands above:
<a href="SOME_URL_HERE"> is the image or page to be linked when the image is clicked.

<img src="PIC_URL" border="0" width="100"> is exactly the same code we used before to re-size the image to be displayed.

</a> ends the a href command.

Below we'll re-size a picture to 333px wide and link it to the original:
<a href="http://i1212.photobucket.com/albums/cc4 ... G_0140.jpg"><img src="http ://i1212.photobucket.com/albums/cc451/glreinier/IMG_0140.jpg" border="0" width="333"></a>

click on the picture above to see the full sized image

Here, I've borrowed a picture from Big Dan (with his permission) and linked to the full sized version:
<a href="http://idahosummits.com/wyoming/images/moran_early.jpg"><img src="http://idahosummits.com/wyoming/images/moran_early.jpg">" border="0" width="671">

click on the picture above to see the full sized image

Here, we'll link same picture to his trip report
<a href="http://idahosummits.com/wyoming/wyoming_09.htm"><img src="http://idahosummits.com/wyoming/images/moran_early.jpg">" border="0" width="182">

Click on picture above to see his TR.

Let's say you've just posted a picture on SP, and you want to drum up some votes so you can earn the coveted "Picture of the hour, day, week...". Post your picture here and link it to the SP page where the picture resides. I'm going to use a panorama and refernence a smaller size than the original ("large"), so that the picture displayed here loads quicker - then link the page where the picture resides on SP.
<a href="http://www.summitpost.org/brocky-summit-panorama/553771"><img src="http://mages.summitpost.org/large/553771.jpg">" border="0" width="707">


Click on the picture above to go to the SP page where it resides.
P.S. I'm not looking for votes


Question: How can you force a link to open in a new window here? I've tried target="_blank" and target="_new" with no success. Are they just not recognized here?

-George
Quote
Like
Share

Joined: November 8th, 2007, 2:31 pm

January 20th, 2012, 5:33 am #8

I'll be posting replies to this message soon with tips for posting pictures on the message board. I know I'm not the smartest person in the room on this subject, but I wanted to open a discussion to share what I do know, and to ask questions about what I don't know. Others are encouraged to share their knowledge, or to correct me where I've made a mistake.

Most of my knowledge was obtained through:
- Google
- Osmosis - I sit next a peak addict at work who has a web site. He also taught me:
- HTML Hacking 101 - if you want to know how they did it, right click on the page and select "View Source" or "Inspect Element" (choices displayed depend on your browser) and search for ".jpg".

I've included many examples with the links & code displayed, so that others may see how it works - and to copy, edit and use.

My ultimate goal is to get people posting more pictures here, because I and others would like to see them!
-George
Text Links
To make clickable text, the commands below are used and are similar to clickable pictures, but easier.

<a href="Some_URL">Displayed Text</a>

Here we'll create text to link to Pat's 2011 Summary Slideshow:
<a href="https://picasaweb.google.com/1150022773 ... 7877014386"> Pat's 2011 Summary Slideshow</a>

Pat's 2011 Summary Slideshow

These links can get pretty long. Make sure there are no spaces between the quotes for the links.

-George
Quote
Like
Share

Joined: November 8th, 2007, 2:31 pm

January 20th, 2012, 5:33 am #9

I'll be posting replies to this message soon with tips for posting pictures on the message board. I know I'm not the smartest person in the room on this subject, but I wanted to open a discussion to share what I do know, and to ask questions about what I don't know. Others are encouraged to share their knowledge, or to correct me where I've made a mistake.

Most of my knowledge was obtained through:
- Google
- Osmosis - I sit next a peak addict at work who has a web site. He also taught me:
- HTML Hacking 101 - if you want to know how they did it, right click on the page and select "View Source" or "Inspect Element" (choices displayed depend on your browser) and search for ".jpg".

I've included many examples with the links & code displayed, so that others may see how it works - and to copy, edit and use.

My ultimate goal is to get people posting more pictures here, because I and others would like to see them!
-George
If you look down at the bottom of the page when you create or reply to a post, there's an option for "Enabled formatted text", with a link labeled (Huh?)
I've linked it in here, but I won't duplicate it.

It explains a little about how things work and which "tags" are allowed. I'm definately not the one to speak to this subject, I just wanted to show the <CENTER> tag.

If the sun is shining, you should be able to see (from L->R) the view from the Willow CK NW, SE & Gib's web cams centered in the page. All are linked.

<center><a href="http://birice.vaisala.com/photos/02DA39 ... .jpg"><img src="http://birice.vaisala.com/photos/02DA39 ... 3_cam2.jpg" border="0" width="222" alt="WillowCkNW"></a><a href="http://birice.vaisala.com/photos/02DA39 ... .jpg"><img src="http://birice.vaisala.com/photos/02DA39 ... 3_cam1.jpg" border="0" width="222" alt="WillowCkSE"></a><a href="http://www.gibbrown.com/webcam.jpg"><img src="http://www.gibbrown.com/webcam.jpg" border="0" width="222" alt="GibsCam"></a></center>
Back on the (Huh?) page, it also mentions that "All carriage returns are automatically converted into <BR> tags". What the? All of the code above is written on the same line, with no carriage returns. Here's what it looks like if you write it on 3 lines using carriage returns.

<center><a href="http://birice.vaisala.com/photos/02DA39 ... .jpg"><img src="http://birice.vaisala.com/photos/02DA39 ... 3_cam2.jpg" border="0" width="222" alt="WillowCkNW">
</a><a href="http://birice.vaisala.com/photos/02DA39 ... .jpg"><img src="http://birice.vaisala.com/photos/02DA39 ... 3_cam1.jpg" border="0" width="222" alt="WillowCkSE">
</a><a href="http://www.gibbrown.com/webcam.jpg"><img src="http://www.gibbrown.com/webcam.jpg" border="0" width="222" alt="GibsCam"></a></center>


This code can get pretty long. I use a spreadsheet where I paste in links, and it ties all the HTML commands together with the links, to give me the code that I copy and paste.

I've also bolded the "alt" tags above in the last example. This is the text that is displayed if a link breaks, and isn't necessary. Below is what I see when I try to view a PhotoBucket picture at work

The arrows point to the "alt" text:


-George
Quote
Like
Share

Smoove910
Smoove910

January 20th, 2012, 9:36 pm #10

I'll be posting replies to this message soon with tips for posting pictures on the message board. I know I'm not the smartest person in the room on this subject, but I wanted to open a discussion to share what I do know, and to ask questions about what I don't know. Others are encouraged to share their knowledge, or to correct me where I've made a mistake.

Most of my knowledge was obtained through:
- Google
- Osmosis - I sit next a peak addict at work who has a web site. He also taught me:
- HTML Hacking 101 - if you want to know how they did it, right click on the page and select "View Source" or "Inspect Element" (choices displayed depend on your browser) and search for ".jpg".

I've included many examples with the links & code displayed, so that others may see how it works - and to copy, edit and use.

My ultimate goal is to get people posting more pictures here, because I and others would like to see them!
-George
Nice submission George! I'm wondering if the powers that be (Dan) could possibly make this a sticky on the top of the message board so it doesn't get lost. There's a wealth of good information here for the 'not so tech' savvy people.
Quote
Share


Confirmation of reply: