This forum has been archived. Please visit the new forum at https://community.narniaweb.com/

How to Upload and Thumbnail Images

Post your Narnia-inspired pictures or poems here.

Moderators: wild rose, SnowAngel

How to Upload and Thumbnail Images

Postby Gymfan15 » Aug 18, 2009 4:19 pm

One of the most common questions asked on NarniaWeb is "How do I upload images from my computer to the forum?" Well, look no further! Here we have a whole host of instructions on how to upload images, from the most basic of tutorials to slightly more complicated ones.

There are two ways of uploading images to NarniaWeb. You can either use NarniaWeb's Uploader or a third-party host. Each member is given 3MB of personal space to upload any image or file to NarniaWeb, and it's a very reliable service. If you can keep each individual file below 65KB, we recommend you use this for uploading images. However, we do not recommend using Narniaweb's uploader for graphics in the Fan Art board. Because of the large amount of graphics posted and the small amount of available space, it's recommended to use a third-party uploader such as Imageshack.us, Photobucket.com, Tinypic.com or any other free image host.

We'll cover both uploading methods in the post below. We'll also explain how to get images into your profile (signature and avatar) and how to make thumbnails for large images. So this should give you all the information you need!

How to upload images to the web

Using NarniaWeb's Uploader:

Since we've switched over to a new forum software, Narniaweb-hosted images is handled a bit differently than our previous uploader. The files are handled as attachments, not directly-linked uploaded images. While this is great for regular discussion posts, this doesn't work very well for uploading large amounts of graphics. Again, we do not recommend you use the Narniaweb uploader for posting graphics in the Fan Art forum.

To upload an attachment, click on the blue "Upload Attachment" tab beneath your post box. A series of options will then be available, which are explained below:

Image


Once you click to upload the image, a new set of options will become visible. You will see a button titled "Place Inline". Whether or or not you click this button, your image will still show up on your post; it's purely an aesthetic choice. If you chose that option, a line of text will appear in your post that you can them move around anywhere you choose. If you do not choose to place your image inline, the attachment will appear at the bottom of your post by default.

Image


That's pretty much all there is to it! Here are a couple more points to cover anything I may have missed.

  • • Uploaded attachments will not work for your avatar or signature. Avatars can be uploaded separately in your User Profile (more on that below) and signatures have to be uploaded by a third-party host.
  • • Posted attachments can be managed by going to your User Control Panel and clicking "Manage Attachments" on the left-hand side. You have the ability to view and/or delete attachments, but please remember, once images are deleted, they cannot be retrieved.

Using a third-party host:

When you have a file that is over the size limit, or is not practically suited to the Narniaweb uploader (i.e. graphics), it's best to use a free third-party host. Such hosts include (but are not limited to) Imageshack.us and Photobucket.com. Some hosts such as Photobucket will require you to create an account, but will also keep an album of all the images you've uploaded for easy access. Others like Imageshack don't require an account, but won't keep track of images without one, and you have to remember to copy links down or you'll forget them.

For the purposes of this demonstration, we'll use Tinypic, a free host that does not require signing up but does allow you to use their direct links.

  1. First, go to Tinypic.com, click on the "Browse" button and choose the file you'd like to upload from your computer. One this is done, hit the big "Upload Now!" button.
  2. Then select and copy the link you want. The link with the IMG tags around it is generally what you want, and if you copy that into your post box, it will appear as an image once you hit "post." If you just want the plain direct link, use the link labeled "Direct Link." You can make this show up in your post by pasting it into your post box, and then surrounding the link with [ img ]tags (without the spaces). Your link will end up looking like this:
Code: Select all
[img]yourlinkhere.jpg[/img]


Fairly easy, isn't it? Just remember that with with all the convenience, there is a catch. If your image is getting a lot of views, the host might pull the plug and it might not show up anymore. This generally won't happen unless you have a VERY popular image, so most people are safe, but it's something to keep in mind.

How to upload images to your profile

You add images to your avatar and signature by accessing your profile options. Your profile options can be reached by clicking on the "User Control Panel" link at the top of the page, and then clicking on the tab labeled "Profile.", and then selecting the tab for Avatar or Signature.

Avatars:
  1. Click on "User Control Panel," select the tab labeled "Profile" and then click on the tab labeled "Avatar".
  2. If you are uploading an avatar from a third-party site, follow the instructions from the tutorial above and copy and paste the Direct Link (no tags before or after the link) into the box labeled "Upload from a URL".
  3. If you're uploading an avatar from NarniaWeb, click on the "Browse" button and select the image from your computer and hit "Select".
  4. Once you're done, be sure to update your profile by clicking the "Submit" button at the bottom of the page! Your changes should now show up, and you'll be able to view your graphic as it will display on the forum. :)

Signatures:
  1. Click on "User Control Panel," select the tab labeled "Profile" and then click on the tab labeled "Signature".
  2. Upload the image you want into your signature. You'll need to upload from a third-party host, so follow the instructions in the correct tutorial above and copy and paste the correct link into your signature box. If it already has IMG brackets around it, then you're good to go. If not...
  3. Put IMG brackets around your direct link (it will look like this: [img]http//www.website.com/yourlinkhere.jpg[/img] and hit "Preview" to make sure you got the tags formatted correctly.
  4. Once you're done, be sure to update your profile by clicking "Submit". Your changes should now show up. :)

How to "thumbnail" a picture

Because thumbnailing large images is now a requirement on NarniaWeb, we've received many queries as to how this is done. Here's a tutorial for it.

Automatic Thumbnailing:

The easiest way to thumb an image is to upload an image at Imageshack.us and copy and paste the "Thumbnail for Forum (1)" link into your message box.

Image

When you post, you'll get a small thumbnail that will take you to the full-sized version of your image when you click on it.

Example:
Image

Manual Thumbnailing:

Since some people prefer not to use Imageshack or would like a thumbnail smaller or larger then the one that Imageshack provides, there is a way to make one manually.

Go into your photo editor and re-size a copy of your image to the desired size. Save it (you should have two images now, the full-size one and the smaller one).

Upload both images at the uploading site of your choice. Take the Direct Link to the full-size image and format it as a link. It should look like this:
Code: Select all
[url=fullsizelinkhere.jpg]Text[/url]


Now, in the space where the Text should go, put an IMG link to your thumbnail. Your link should then look like this:
Code: Select all
[url=fullsizelinkhere.jpg][img]thumbnaillinkhere.jpg[/img][/url]


You can also put any text along with your image by placing that after your [/img] tag. Unfortunately if you hit ENTER to place the text below the image, it breaks the URL tag and no longer works.

Code: Select all
[url=fullsizelinkhere.jpg][img]thumbnaillinkhere.jpg[/img]Click here to view full-size[/url]


Now you can hit Preview to make sure all your coding is correct. You should see this:

Image


And there you have it!

-----------------------------------

I hope this tutorial was clear enough. If you have any questions, feel free to PM me.
User avatar
Gymfan15
Moderator Emeritus
Giver of Prestigious NarniaWeb Taglines™
 
Posts: 8314
Joined: Jun 28, 2005
Location: The heart and mind of God
Gender: Female

Who is online

Users browsing this forum: No registered users and 10 guests