Pages: 1
Go Down

Author Topic: How to Insert Images and Other Things  (Read 13910 times)

Lenny

  • Ranger
  • ****
    • Tumblr
    • DeviantArt
  • Ninja.
  • Preferred pronouns: My name. They/them.
  • Posts: 898
How to Insert Images and Other Things
« on: May 04, 2015, 06:05:18 AM »
A general how to on inserting images and other things.

Includes a Guide to Art Threads on the Forum at the end of the post.

Some of you might have seen almost exactly the same tutorial and info in the SSSS and aRTD Art Museums. Talking it over with our forum-Thor, Eich, we agreed that one thread with the tutorials would be best. This makes it easier to link people to it, and also makes it possible to sticky it to the top of the SSSS Board to make it easy to find.

I have one ask! This thread is made with tutorials in mind, and is to be kept as clean as possible. Therefore, this topic will be locked . If you have suggestions as to what else could be included, on how to make the tutorial more readable, on other functions that need tutorials that you would like me to write, or on points that need clarifying, please send me a private message instead. Or discuss it on the Forum and Website Discussion Board!

For more information on BBCode and other helpful forum information, please visit the Helpful Information thread.


Table of Contents

« Last Edit: November 08, 2020, 02:53:28 PM by Feartheviolas »
Logged
Am notified of private messages via email.

Lenny

  • Ranger
  • ****
    • Tumblr
    • DeviantArt
  • Ninja.
  • Preferred pronouns: My name. They/them.
  • Posts: 898
Re: How to Insert Images and Other Things
« Reply #1 on: September 19, 2015, 01:41:31 PM »
General Guidelines on Inserting Images

Wacky stuff is fine, NSFW stuff is not. Keep the Forum Rules in mind.

To comply with the no pornographic material rule, most nudity is not allowed (nudity with a sexual context is completely out), and no adult scenes. This includes links to images. Basically, if you don't think you should post it directly here, don't link to it. If you are unsure, ask a moderator about it first before posting.



A few notes regarding image insertion:
  • Please do not go above 700 pixels wide if you are posting a portrait-formatted picture.
  • Please do not go above 1000 pixels wide if you are posting a landscape-formatted picture.
  • Do not insert an image where the original image is more than 10MB (no matter how you have resized it on the forum). It can otherwise become really hard for members with slow connections to navigate the forum.
  • If any of these restrictions are killing some of the details in your picture, just leave a link to the full-sized image with it.
  • Only ever insert images from sites that are fine with hotlinking! (For example, if it's an image you've personally uploaded to imgur, deviantART, tumblr, photobucket, etc. - that should be fine. Inserting an image from someone's personal website without their permission is not.)
  • As far as I am aware, it is not easily possible to show only part of a larger image through using BBCode, if possible at all. If you wish to do something similar, save the original picture to your computer and crop it in an image editing program (the most generic and simple image editing software has a crop function - even MSPaint can be used for this). Upload the resulting image onto an image hosting site and link that image instead. Important: Please make sure the original artist/creator of the image is fine with this use of their images. Not all are, and it is a common courtesy to make sure.
« Last Edit: October 16, 2015, 06:04:54 PM by Eriaror »
Logged
Am notified of private messages via email.

Lenny

  • Ranger
  • ****
    • Tumblr
    • DeviantArt
  • Ninja.
  • Preferred pronouns: My name. They/them.
  • Posts: 898
Re: How to Insert Images and Other Things
« Reply #2 on: September 19, 2015, 04:23:31 PM »
Inserting Images, Resizing, and Linking Back to the Original

Inserting images is pretty simple! Either click on the Insert Image button, (located below the Bold button), or insert the code manually:

Code: [Select]
[img][/img]
Your actual image will need to be hosted on another site (dA, tumblr, photobucket, flickr, there are a myriad of them out there). Once you've done that, right click on the image and select "Copy image location" or something with similar wording (might differ between browsers). Then paste the resulting URL between the code, like this:

Code: [Select]
[img]http://www.example.net/example_pic.png[/img]
Make sure that it ends with an image file type (common image file type examples: .jpg or .png). If it doesn't, you've probably copied the wrong link.



Now, if you want to resize your image because it's too large, use the following code (with the number used being the pixel size you want):

Code: [Select]
[img width=300]http://www.example.net/example_pic.png[/img]
Or this:

Code: [Select]
[img height=300]http://www.example.net/example_pic.png[/img]
Or even this (only recommended if you know the exact ratio of your picture, otherwise the image gets distorted):

Code: [Select]
[img width=300 height=300]http://www.example.net/example_pic.png[/img]
My personal recommendation would be to only use the width= tag. Width is the most important to get right. If this is too large it makes it hard to see the entire image easily, and can make navigating the forum an irritation.



If you want to link people back to the original picture when they click on it, just wrap the whole thing in a url, like this:

Code: [Select]
[url=http://www.example.net/examples][img]http://www.example.net/example_pic.png[/img][/url]
If you come across any errors while using these codes, please double check the code you've written before asking for help. Make sure your spelling and spacing is correct - a space or a word that is almost the same but not completely can mess up things quite a bit, and is an easy fix.



And that's all! Pretty simple, though it might take a little while to memorize it. Again, if anyone has any questions, or you feel I've left something out, just PM me. I'll endeavour to answer questions and update this tutorial as needed.

(As an aside, if anyone wishes to show code as I've done in this tutorial, click on the Insert Code button, , located between the Insert Table and Insert Quote commands. Write the code you want to showcase within the resulting tags, and voilà! Beautiful example code, without makeshift things like "it's this but without the dashes" or similar.)
Logged
Am notified of private messages via email.

Lenny

  • Ranger
  • ****
    • Tumblr
    • DeviantArt
  • Ninja.
  • Preferred pronouns: My name. They/them.
  • Posts: 898
Re: How to Insert Images and Other Things
« Reply #3 on: September 19, 2015, 04:24:48 PM »
    A Guide to Art Threads on the Forum

    The SSSS Board


    The General Discussion Board




    The A Redtail's Dream Board


    This is a growing list. If you see I've missed a particular thread, PM me and I will add it if it's relevant.[/list][/list][/list]
    « Last Edit: October 02, 2015, 11:14:01 AM by Feartheviolas »
    Logged
    Am notified of private messages via email.
    Pages: 1
    Go Up