"So You Wanna..." is the ongoing educational series of Rock M Nation, whose main goal is to inform readers to make them not only better community members, and not only better Missouri fans, but better humans. Topics will range from Missouri sports history to site management to cooking. OK, at least Missouri sports history and site management.
Today's Lesson: Posting pictures on the site
Let's face it: you're clever. In fact, you're damn clever. Your wit and wisdom knows no bounds. That's why you're on this site: to spread just how funny you are.
(Sure, there are other reasons to post a picture, but just go with it.)
But with great picture-posting power comes great picture-posting responsibility. After all, there are several ways to fail at this.
So follow me, won't you, on a journey to learn how to properly post a photo on Rock M Nation (or any other SB Nation site)!
Step 1) Find the perfect photo
Here's a little tip: don't post a photo unless it fits under one of the following three categories:
- It's funny.
- It's poignant.
- It's clever.
But if that time comes when the perfect picture time comes, it's important to find a photo. Personally, I like Google Image Search. It's powerful, and it can find most things. There are many other sites on the Interwebs to find gifs and funny pictures, but Google Image Search is a good place to find.
So, let's say you found the perfect picture or, better yet, the perfect gif (which is an animated picture).
Great! Now, on to step two.
Step 2) For the love of God, host the image
I cannot stress this enough: do not just plug in a URL once you find the image. Not only might it cause your image not to come up, but it's called bandwidth theft (or hotlinking).
Let's just say, for example, that Rock M Nation were some two-bit operation that paid for its own servers. Those servers can only handle so much bandwidth, so they have to be careful not to use all of it. But if they post a funny picture, and you use that picture directly off of Rock M Nation, that also steals their bandwidth, since they are powering both the image on their site and the image on your site. It makes you a jerk.
But beyond that, it could cause something like this to be posted instead of your image:
And trust me, that's the tamest picture that will come up if you hotlink. I've seen terrible, terrible things from hotlinking. Ever heard of goatse? Let's just move on.
Anyways, the point is, you need to host the image somewhere else. Download the picture to your computer (right-click --> save image as...) and set up an account on TinyPic. It's a wonderful, easy and free image hosting site. It's where all the cool kids go to avoid being a hotlinking douche.
It's very easy: just sign up for a free account, hit the "upload" button, and you're set. They'll give you a link and everything!
So now, you've uploaded your picture to TinyPic, and you're ready to post! You have your link, and you're ready to go!
3) Insert your link
It's dead simple. You click on this button:
You insert your link in the box that pops up...
And hit OK.
Ta-da! It's coded and ready to go!
OR IS IT?!? Do NOT forget the very, very important next step.
Step 4) For the love of everything, size the damn image
This is the biggest mistake that people make: images that are too big or too small. To explain this, we need to break down the coding.
<img src="http://i42.tinypic.com/24d0wm1.jpg"/>
It's very straightforward. "img" indicates that this is, in fact, an image. "src" means source, telling the script where to get the actual image from. And then there's the URL in quotations. Simple, right?
To adjust the size, you need to change either the height or width. For example, if I were to put the above code in and press "Post", it would look like this:
Let's say you want it a little bit bigger. You can adjust the height or the weight by changing a little bit of the code. I'll add the phrase "width=300" to the code, as below:
<img width=300 src="http://i42.tinypic.com/24d0wm1.jpg"/>
Note the difference, in between the "img" and the "src". Now note the difference in the image.
See? It's bigger, because I told the script to make the image 300 pixels wide. Ha! Computers! Fun!
Now you want to make it smaller. Same thing, and while you can still do something like "width=100", I'll use height to explain this one. Just add "height=100" to the coding, like so.
<img height=100 src="http://i42.tinypic.com/24d0wm1.jpg"/>
And notice the difference in the image.
It's small Colbert! See? Images, and dorkery, can be fun!
Now, please be courteous with the images. Nobody wants to see a 900 pixel-wide picture of ZouDave's sister. OK, that's a bad example, but you get the point.
General rules of thumb for sizing:
-If the image is taller than it is wide, width=250 or height=500 should be your max.
-If the image is wider than it is tall, width=300 is usually a nice measurement.
And I really can't stress this enough: use the preview button. Take an extra two seconds to see if the script is right, and if the sizing is appropriate. Otherwise, you'll look like an ass.
And one more general courtesy, while I'm on the topic: please put something in the subject line. That way, if you click on the subject line, it will close. That is especially important in long game-day threads, which tend to have a lot of images that can bog down computers. Trust me, people will thank you.
And now, the final step!
Step 5) Press Post
Yay! You're done! And so is this tutorial. I sure hope you will now enjoy the wonders that is image-posting, and do so responsibly.
And remember: if you size an image incorrectly, or you make me look at something gross because you hotlinked an image, I'm going to be seriously angry. Because I just typed this whole thing to make you NOT do those things. Ungrateful jerks.