How to post images

[Jubal]

Hello, here's a guide to how to post images to Exilian!

Images are best off not being posted as attachments to Exilian. You technically *can* post attachment-images, but they're very size-limited, load our servers nastily, and it limits you to one per post. As such, we prefer you to use a third party image host. Here's a guide to how to do that! It's in three parts, and has lots of images in to show you exactly what to do. The first part tells you how to post images at all: part 2 tells you how to resize them, and part 3 tells you how to centre an image within a forum post. Do reply with any questions or problems!


Part 1: How To Post An Image Using Imgur

The biggest and best of these nowadays is imgur, and it's free to use, so we'll head there, to imgur.com:

Next you'll need an account, usual drill with any site - imgur can attach to various other social media or have a separate account:

Once you're in, go find the "new post" button up the top and then hit "upload images".

Then you get this nice lil' box here. Assuming that the image is on your hard drive, hit "browse". You can select multiple images from your file browser and upload them all at once at this point, no need to do one at a time!

Here's an uploaded image! You have lots of options lying around now to publish your pictures on imgur (which can occasionally get them some attention/is sometimes worth doing) and lots of editing options. But let's not get distracted by that: we're here to find out how to get your images onto this here webforum.

To do that, mouse over the image and you'll find an image URL appears. You can just paste this into an image tag, but if you don't know forum BBCode then don't worry, imgur actually has you covered regardless - roll over the down arrow and select "get share links":

Clicking that button will get you here. The BBCode option is the one you need.

Just paste that code into your post (either in the main post editor or the quick-reply box, it works either way) and the image will appear. Fantastic - job done, you've posted a picture! Give yourself a pat on the back, or a tea break, or something. Or don't, I'm not your boss.

There's more, however - part 2 of this guide will give you a few tips on using images in your posts more effectively and useful additions to that basic bit of code imgur gives you.


Part 2: Resizing

So we've got a nice image, like, so: you can check what it looks like using the "preview" option, which is next to the "post" button:

But what if we want to make it a specific (often smaller) size? Nice and easy. You can modify that image tag imgur gave you and specify a width in pixels with the width attribute. Example code is given below:

Code Select Expand

[img width=800]https://i.imgur.com/ukAfYmP.jpg[/img]

Which can lead to a smaller image, like so! Remember that this method varies in how it will present the picture by screen resolution, and so may not look quite how you want on some older, lower res screens.

Part 3: Centring images

If you're running a project, it's likely you'll want to centre some images on the screen (for example titles), so we'll show you how to do that as well in this third part of the tutorial.

OK, so firstly for this we're going to duck out of the WYSIWG editor: one can do this in the main editor, but a change of perspective will help to see what's going on underneath the bonnet and will give us a better ability to manipulate what's going on. The editor change button is at the far right end of the main editor.

Now, select the whole piece of code for the image, including the outer image tag bits. Then, find the center button. It looks basically like you'd expect from eg Microsoft Word, and sits along with the left-align and right-align buttons:

Hit the button! You should see center tags appear around the image code, so you have something like this:

Code Select Expand

[center][img width=800]https://i.imgur.com/VyYL0T1.jpg[/img][/center]
And voila, one centred image is the result!

Hope all that helped! Please do reply to this topic to ask questions if you're stuck, and do feel free to ask for more guides on useful topics for using the forum

[indiekid]

Back firmly patted! Thanks Jubal

[Jubal]

Glad you got it working! Let me know if I can write any other guides you need