Next Topic >>Return to Index  

Posting Images on the Message Board - Tips & Tricks

January 19 2012 at 10:30 PM
No score for this post

Geo  (Login George_R)

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

 
Scoring disabled. You must be logged in to score posts.Respond to this message   
AuthorReply

Geo
(Login George_R)

PhotoBucket - All you need to know

No score for this post
January 19 2012, 10:30 PM 

I don't use PhotoBucket, but many do. I don't like it because my work blocks all images from PhotoBucket. sad.gif 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. happy.gif

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
[linked image]

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/cc451/glreinier/IMG_0137.jpg

Click on Preview (not Post!) to see what it looks like.
[linked image]

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.
[linked image]

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)
[linked image]

If you paste that into a post you get:
http://i1212.photobucket.com/albums/cc451/glreinier/th_/IMG_0121.jpg
[linked image]

Oops! That's the "Thumbnail" view. No problem, just delete the "th_/" out of the link:
http://i1212.photobucket.com/albums/cc451/glreinier/IMG_0121.jpg
[linked image]
-George

 
Scoring disabled. You must be logged in to score posts.Respond to this message   

Geo
(Login George_R)

Resizing Pictures – Default Sizes

No score for this post
January 19 2012, 10:31 PM 

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

 
Scoring disabled. You must be logged in to score posts.Respond to this message   

Geo
(Login George_R)

SummitPost Default Sizes

No score for this post
January 19 2012, 10:31 PM 

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
[linked image]
http://images.summitpost.org/small/771589.jpg
[linked image]
http://images.summitpost.org/medium/771589.jpg
[linked image]
http://images.summitpost.org/large/771589.jpg
[linked image]

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.
[linked image]

-George

 
Scoring disabled. You must be logged in to score posts.Respond to this message   

Geo
(Login George_R)

Picasa Default Sizes

No score for this post
January 19 2012, 10:32 PM 

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/-4ewsLioChlw/S-97u4FlRoI/AAAAAAAAGAM/quxdqZHzTOo/s144/IMG_1137.jpg
[linked image]
http://lh4.googleusercontent.com/-4ewsLioChlw/S-97u4FlRoI/AAAAAAAAGAM/quxdqZHzTOo/s288/IMG_1137.jpg
[linked image]
http://lh4.googleusercontent.com/-4ewsLioChlw/S-97u4FlRoI/AAAAAAAAGAM/quxdqZHzTOo/s400/IMG_1137.jpg
[linked image]
http://lh4.googleusercontent.com/-4ewsLioChlw/S-97u4FlRoI/AAAAAAAAGAM/quxdqZHzTOo/s640/IMG_1137.jpg
[linked image]
http://lh4.googleusercontent.com/-4ewsLioChlw/S-97u4FlRoI/AAAAAAAAGAM/quxdqZHzTOo/s800/IMG_1137.jpg
[linked image]

Picasa doesn't advertise it, but you can also post as
s1600
http://lh4.googleusercontent.com/-4ewsLioChlw/S-97u4FlRoI/AAAAAAAAGAM/quxdqZHzTOo/s1600/IMG_1137.jpg
[linked image]

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. happy.gif
-George

 
Scoring disabled. You must be logged in to score posts.Respond to this message   

Geo
(Login George_R)

Re-sizing almost any Picture, w/ a lil HTML

No score for this post
January 19 2012, 10:32 PM 

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/cc451/glreinier/IMG_0075.jpg" border="0" width="162">
IMG_0075.jpg

<img src="http://i1212.photobucket.com/albums/cc451/glreinier/IMG_0075.jpg" border="0" width="423">
IMG_0075.jpg

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/cc451/glreinier/th_IMG_0075.jpg" border="0" width="400">
th_IMG_0075.jpg


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

 
Scoring disabled. You must be logged in to score posts.Respond to this message   

Geo
(Login George_R)

Using Pictures as Links, w/ a lil more HTML

No score for this post
January 19 2012, 10:33 PM 

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/cc451/glreinier/IMG_0140.jpg"><img src="http ://i1212.photobucket.com/albums/cc451/glreinier/IMG_0140.jpg" border="0" width="333"></a>
IMG_0140.jpg
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">
moran_early.jpg
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">
moran_early.jpg
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">

553771.jpg
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

 
Scoring disabled. You must be logged in to score posts.Respond to this message   

Geo
(Login George_R)

Text Links

No score for this post
January 19 2012, 10:33 PM 

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/115002277354837845347/Pats2011SummarySlideshow?authkey=Gv1sRgCMbczKT-3JmsfQ#slideshow/5690918437877014386"> 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

 
Scoring disabled. You must be logged in to score posts.Respond to this message   

Geo
(Login George_R)

(Huh?)

No score for this post
January 19 2012, 10:33 PM 

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/02DA39EF_05C41D33_cam2.jpg"><img src="http://birice.vaisala.com/photos/02DA39EF_05C41D33_cam2.jpg" border="0" width="222" alt="WillowCkNW"></a><a href="http://birice.vaisala.com/photos/02DA39EF_05C41D33_cam1.jpg"><img src="http://birice.vaisala.com/photos/02DA39EF_05C41D33_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>
WillowCkNWWillow Ck SEGibsCam


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/02DA39EF_05C41D33_cam2.jpg"><img src="http://birice.vaisala.com/photos/02DA39EF_05C41D33_cam2.jpg" border="0" width="222" alt="WillowCkNW">
</a><a href="http://birice.vaisala.com/photos/02DA39EF_05C41D33_cam1.jpg"><img src="http://birice.vaisala.com/photos/02DA39EF_05C41D33_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>
WillowCkNW
WillowCkSE
GibsCam


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 sad.gif

The arrows point to the "alt" text:
[linked image]

-George

 
Scoring disabled. You must be logged in to score posts.Respond to this message   
Smoove910
(no login)

Re: Posting Images on the Message Board - Tips & Tricks

No score for this post
January 20 2012, 2:36 PM 

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.

 
Scoring disabled. You must be logged in to score posts.Respond to this message   
Dan
(no login)

Great Idea, But...

No score for this post
January 20 2012, 4:03 PM 

There is no such thing as a sticky thread with network54. I spent 30 or so minutes trying to find that last night thinking the same thing!

 
Scoring disabled. You must be logged in to score posts.Respond to this message   
smoove910
(no login)

Re: Great Idea, But...

No score for this post
January 20 2012, 6:35 PM 

Maybe something that is permanently at the top, similar to the "Spring Outing 2011 Poll" that is currently up there?

 
Scoring disabled. You must be logged in to score posts.Respond to this message   

Geo
(Login George_R)

Taking Pics for Panos

No score for this post
July 2 2012, 8:11 PM 


 
Scoring disabled. You must be logged in to score posts.Respond to this message   
Wes
(no login)

Good tips but...

No score for this post
July 3 2012, 2:40 PM 

But who needs a tripod when you have Steve Jobs? This is a 5 shot panorama I got on Sunday using my iphone. Although the exposure dipped a little on the last shot, it wasn't enough discard it. I'm not saying - leave the clunker at home, but this does pretty well in a pinch.

[linked image]

[linked image]

 
Scoring disabled. You must be logged in to score posts.Respond to this message   
Dan
(no login)

Re: Posting Images on the Message Board - Tips & Tricks

No score for this post
January 22 2016, 5:58 PM 

Bump

 
Scoring disabled. You must be logged in to score posts.Respond to this message   
Geo
(no login)

Re: Posting Images on the Message Board - Tips & Tricks

No score for this post
January 22 2016, 9:26 PM 

I have no idea if this info is still up to date for program specific instructions. I do know that I missed stating the most basic instructions when I wrote this thread.

To display your images here, you have to:
1. Upload your picture somewhere,e.g. Picasa (Google+), Flikr, Photobucket, etc.
2. Find the link to the picture
3. Copy and paste the link here, it will auto display. Secure addresses "https" won't work, strip off the "s" to make "http".

I just checked PB again, if you open up the page where the "full" image is displayed and right click on that image, you can select copy image address (Chrome) and you get: http://i1381.photobucket.com/albums/ah204/danpaulson747/Helmet_zpsswtuogsi.jpgX I added the "X" to the end so it wouldn't display image.

Paste the address without the "X"
[linked image]

-George

 
Scoring disabled. You must be logged in to score posts.Respond to this message   
Anonymous
(no login)

Test

No score for this post
January 23 2016, 7:21 AM 


 
Scoring disabled. You must be logged in to score posts.Respond to this message   
Anonymous
(no login)

Test--one more time.

No score for this post
January 23 2016, 7:24 AM 


 
Scoring disabled. You must be logged in to score posts.Respond to this message   
Geo
(no login)

No habla Flickr

No score for this post
January 23 2016, 5:12 PM 

Sorry Tom, somebody in IT that uses Flickr (like Big Dan, maybe!) needs to cough up some pointers. happy.gif

I had to view page source and search for jpg to find the picture link:

https://c2.staticflickr.com/6/5618/21502523938_d5696e3a1a_b.jpg

without the "s" in https:
[linked image]
(and I made it a little smaller by changing the b at the end to a d)

There's probably an easier way to get a link within the program for a particular size.

-George

P.S. Congrats on the Championship!

 
Scoring disabled. You must be logged in to score posts.Respond to this message   
Dan
(no login)

Re: No habla Flickr

No score for this post
January 23 2016, 6:08 PM 

There is an easier way. On flickr, on the photo page just click the share button. It will ask you what size and give you a URL to copy to the clipboard.

 
Scoring disabled. You must be logged in to score posts.Respond to this message   
 
< Previous Page 1 2 Next >
  Next Topic >>Return to Index