SU FAQ #1 - Working with Pictures

A dear friend of mine recently asked me how to add comments to the side when you're posting a picture in SU. You'll find the answer to that in here. :)

First, you need a picture. When I first started using SU I couldn't figure out how everyone was posting pictures. After a little research, I finally figured it out, but for several weeks, my SU blog was pictureless. :)

The easiest way to post a picture is to right click on the picture you want to post and select Stumbleupon PhotoBlog It!

Occasionally though, photoblogging doesn't work very well. Usually it's because the picture is too long, too wide, or too large. The maximum size of a picture you can photoblog is width=715, height=715, and the file size can't be more than 250 KB (kilobytes).

So...what do you do if you want to post a picture that's bigger? First, although it's possible to do it, I wouldn't suggest posting a picture much wider than 715 pixels. Depending on the size of someone's screen, you may make them have to scroll to the sides. For some pictures, this makes it hard to get the full impact. The same goes for pictures that are too long. My laptop screen is wide and short. Perfect for viewing movies, but a picture that's too long often loses impact because I'm only seeing parts of it at a time. That doesn't mean you can't post larger pictures, but it's something to keep in mind when you're deciding whether to shrink your picture or not.

Regardless of whether you decide to shrink a large picture or keep it the same size, you still need to know how to post it. :)

SU uses the following code in order to post a picture:

<a href="http://teeg.stumbleupon.com/"><img border=0 width=184 height=185 src="http://www.stumbleupon.com/mainpics/353460.jpg"></a>

Here is a breakdown of what the code means:

First, the brackets: <>. You may have noticed that whenever you put something in brackets, it won't show up on your page. Brackets are a way of telling a computer to watch out for code. Anything inside of the brackets makes the computer think you've written a note for it to read. Anything outside of brackets is for everyone else to see. So, when we want the computer to do something in HTML (the computer language we use in SU) we have to include it in brackets.

Now, the first set of brackets has the following information inside it:
<a href="http://teeg.stumbleupon.com/">

<a href> is simply a way of telling the computer to go to a certain place. It creates a link to where you want the computer to go. In this case, the link would send you to my SU page.

Now that you know what this part does, you can edit it if you want to. For example, if I wanted people to go somewhere else when they clicked on my picture, I'd use a different address instead of http://teeg.stumbleupon.com.

A friend of mine edits his a href section so that when you click on the picture, it opens a new page. He does this by changing this section to read:
<a href="teeg.stumbleupon.com/" target="blank">

<Target="blank"> tells your computer to open a new page or a new tab.

Finally, if you don't want your picture to link to anything, you can just leave this section out. Your picture will still show on your page, but clicking on it won't take you anywhere.

Okay, next section:

<img border=0 width=184 height=185 src="http://www.stumbleupon.com/mainpics/353460.jpg">

If a href tells your computer where to go, img tells your computer about the image. All of the information inside of the a href brackets is going to be telling your computer where to go and how to get there. All of the information inside the img brackets is going to tell your computer about the image you're wanting to show.

border=0 allows you to set the size of the border around your picture. For example, if you wanted a nice big border, you might want to change the 0 to 50. If you want a small one, you might set it to 10. If you don't want a border, just leave it at 0 which is the default setting.

We discussed the width and height earlier. If you are wanting to post a picture that is too big, it is possible to resize the picture. First, right click on the picture you are wanting to resize and select properties. This should open a pop-up window. I'll try to post a picture of one later, for now, you're wanting the following information...location, width, and height. Location is the web address where the picture is located. My Pooh picture is located at http://www.stumbleupon.com/mainpics/353460.jpg. As I said before, pictures larger than 715 pixels in width or height may cause problems for some people trying to view them. If you want to make a big picture the right size to fit the screen, divide 715 by whichever measurement is biggest...and then multiply the result by the smaller number. Don't worry, I'll show you what I mean.

Let's say for example that my picture's properties look like:

width=850
height=800

Okay, I don't want either the width or the height to be larger than 715, so first I figure which number is bigger.

Since the width is bigger, I already know what size the width will be. In my picture code, I will be changing width to equal 715. Now, since I want my picture to have the same dimensions, I need to figure out what the height should be. So, I open my calculator and put in 715 (the new width) and divide it by 850 (the old width size). I take the answer that I get from that (.8411....) and mulitply it by 800 (the old height) to get the new height size. It's okay to round this answer, so I end up with 672.94 for my new height.

Now I insert my two new numbers into the code for my picture:
<img border=0 width=715 height=672.94 src="http://www.stumbleupon.com/mainpics/353460.jpg">
Then change your image location if you need to.

The same formula works if the height is larger. Always remember to start dividing with 715, or whatever size you are wanting to make your picture.

Finally, what if you want to change how your image is placed? Most likely you already know the <center> tag, but what if you're wanting your image to be on the left or right side and to allow text to be placed beside it? Adding align="left" will put the picture on the left and the text on the right. align="right will put your picture on the right and the text on the left. Here's how it should look:
<img border=0 width=715 height=672.94 src="http://www.stumbleupon.com/mainpics/353460.jpg" align="left">.

Finally, all that's left of your code is to tell your computer that it can stop reading now. We used <a href...> at the beginning, which told the computer to go to the link whenever someone clicked on the picture. Now we need to tell the computer that only the picture is the link, and not the rest of your post. To do that, we simply tell the computer to stop using <a> by typeing a / in front of a. So we end our code with </a>.

So that's it. Now you know what all that code means that you use when you're wanting to add a picture to SU. :)