1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to add images to your forum posts

Discussion in 'Forum Suggestions & Feedback' started by Apricot, Jan 5, 2016.

  1. Apricot

    Apricot Administrator Staff Member

    Joined:
    Mar 26, 2013
    Messages:
    12,558
    Likes Received:
    7,975
    Gender:
    Female
    Occupation:
    BHW Moderator
    Location:
    the clacks
    Home Page:
    We get a lot of questions about adding images to marketplace threads or forum posts so here's a step-by-step guide to uploading and posting images.


    If you want to add images to your posts, you need to upload the picture to a website which will host it for you externally. The sites we allow for this are imgur and imageshack. These sites allow you to sign up and upload pictures. You can then get an image link so you are able to display the image on forums or web pages without having to upload it multiple times.
    Imageshack have recently changed their terms of use. In order to use them for pictures on forums like blackhatworld, you need to have a premium (paid) account. For this, I'll talk through using imgur because they offer free image hosting for forums.


    So, before you actually start writing your post, you want to upload your images. For this example, go to http://imgur.com. You'll see the following screen

    [​IMG]

    (If you're likely to post lots of images, it's worth signing up for an account - these are currently free.)

    Once you click the "upload images" button, you'll get this popup:

    [​IMG]

    You can click on "browse" to bring up your PC's explorer to select the image, but the easiest way is to drag and drop. I've saved an image to my desktop like this:

    [​IMG]

    Dragging and dropping it onto the upload window will look like this:

    [​IMG]


    You'll then revert back to the previous screen, like so:

    [​IMG]

    Click "Start Upload"


    Once this has completed, the page will refresh - be patient! You'll then see this:

    [​IMG]

    The code you'll need is the one highlighted in green (top arrow). This is the direct link to the image - this means it will display the image as part of the forum post instead of linking to the imgur page.

    (The bottom red arrow points to the BBCode image link. Blackhatworld uses BBCode to format posts. If you use BBCode, you can place this in as it is.)

    This is the direct link for the bunny picture: http://i.imgur.com/fCeiw27.jpg

    MAKE SURE YOU SAVE THIS LINK SOMEWHERE SAFE.

    Once you've uploaded the image, you can start writing your post.



    Open your thread and add the text. When you come to the part of the post where you want to add the picture, make sure the flashing cursor is in the right place and then click the "insert image" button.

    [​IMG]


    You'll get a popup, like the one below.

    IMPORTANT: make sure that the two tabs pointed out by the arrows look like the picture! "From URL" should be selected and make sure you UNCHECK "Retrieve remote file and reference locally".

    Your image link should get pasted in the URL field, like this:

    [​IMG]


    Once you click on OK, the popup should disappear, leaving your image displayed in the window.

    [​IMG]


    If you want to see how your post will look, you can click the "Preview Post" button which will display how the finished post should appear:

    [​IMG]

    You then click on "Submit New Thread" and your thread is now live with the images displayed.


    If you want any additional formatting on your picture, you can view the BBCode directly, by clicking on the "Switch Editor to Source Mode" button (red square):


    [​IMG]



    In this example, I have placed center tags around the image so it displays in the middle of the post, like so:

    [​IMG]
     
    • Thanks Thanks x 13
  2. Divination

    Divination Power Member

    Joined:
    Jul 3, 2012
    Messages:
    579
    Likes Received:
    116
    Is this really common? I thought it was quite basic...
     
  3. Ste Fishkin

    Ste Fishkin Jr. VIP Jr. VIP Premium Member

    Joined:
    May 14, 2011
    Messages:
    2,047
    Likes Received:
    10,421
    It absolutely is necessary, unfortunately there are a lot of retards on here who don't know their arse from their elbow and people like Apricot have to help them.
     
    • Thanks Thanks x 3
  4. Sherbert Hoover

    Sherbert Hoover Jr. Executive VIP Jr. VIP

    Joined:
    Dec 26, 2010
    Messages:
    997
    Likes Received:
    8,045
    Occupation:
    ORM - Branding - Content
    Location:
    United States
    Home Page:
    On a sidenote, that first thumbnail on the imgur screenshot leads to an album of Netflix movies that will, quote, "fuck you up".

    http://imgur.com/gallery/XBVmh

    The sixth movie on that list, Requiem for a Dream, is an amazing, depressing roller coaster starring my favorite actor/musician, Mr. Jared Leto. Highly recommended.

    Carry on.
     
  5. Hawkster

    Hawkster Jr. VIP Jr. VIP

    Joined:
    Jun 22, 2013
    Messages:
    3,426
    Likes Received:
    3,615
    Gender:
    Male
    Occupation:
    Listen to everyone - Follow no-one
    Location:
    UK
    Home Page:
    Think it would be a good idea to have a sub section for new members when they sign up for this kind of thing. Auto direct them there after completing the sign up process.
     
    • Thanks Thanks x 9
  6. Sherbert Hoover

    Sherbert Hoover Jr. Executive VIP Jr. VIP

    Joined:
    Dec 26, 2010
    Messages:
    997
    Likes Received:
    8,045
    Occupation:
    ORM - Branding - Content
    Location:
    United States
    Home Page:
    To add to this, there is a Chrome extension called Imgur Uploader. If you see an image you think would be great on the forum, but it's on a non-imgur site, and thus more likely to disappear and show a broken link on your thread in the future, this is for you.

    Right click the image once you install the extension, and click Rehost Image. Give it a few seconds, and it's uploaded to Imgur. Then follow Apricot's tutorial and put the [​IMG]
     
  7. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,538
    Likes Received:
    5,856
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    Definitely agree. We can call it the moron section.
     
    • Thanks Thanks x 1
  8. HoNeYBiRD

    HoNeYBiRD Jr. VIP Jr. VIP

    Joined:
    May 1, 2009
    Messages:
    6,954
    Likes Received:
    7,984
    Gender:
    Male
    Occupation:
    Geographer, Tourism Manager
    Location:
    Ghosted
    cute bunny :)

    one question though, is there any BB code to scale the images after we have the direct link?

    lately i haven't seen it, but before i remember seeing stretched out threads quite often, when someone posted a too big pic in dimensions, but maybe it was fixed and the pics are getting auto-scaled now to accommodate the page width
     
  9. Sherbert Hoover

    Sherbert Hoover Jr. Executive VIP Jr. VIP

    Joined:
    Dec 26, 2010
    Messages:
    997
    Likes Received:
    8,045
    Occupation:
    ORM - Branding - Content
    Location:
    United States
    Home Page:
    In Imgur you can edit the image to scale it down. Generally, the final URL after an edit shows ?1 at the end of the URL. Removing the ?1 shows the image before edits.
     
  10. LostConnection

    LostConnection Senior Member

    Joined:
    Jul 20, 2014
    Messages:
    1,177
    Likes Received:
    1,362
    Location:
    Grinding away in the night
    I second that. Then we won't let them out of there until they've read the necessary guides and posted x amount of posts.

    And you know what the best part is? Ste is the moderator. That ought to be amazing fun. BHW could start selling tickets for us more experienced members to allow us watch Ste moderating a herd of newbies. Priceless.
     
    • Thanks Thanks x 1
  11. HoNeYBiRD

    HoNeYBiRD Jr. VIP Jr. VIP

    Joined:
    May 1, 2009
    Messages:
    6,954
    Likes Received:
    7,984
    Gender:
    Male
    Occupation:
    Geographer, Tourism Manager
    Location:
    Ghosted
    i wasn't aware of that, thanks
    learning new things every day i guess :)

    inherently i was curious if the forum has a BB code for scaling or no, because you can upload to different image hosts or you can use an already uploaded image practically from anywhere, where hotlinking is allowed and you can get the direct url
     
  12. Nonilol

    Nonilol Elite Member

    Joined:
    Mar 1, 2015
    Messages:
    1,632
    Likes Received:
    555
    Gender:
    Male
    Occupation:
    Media Informatics & Webdev Student
    Location:
    Hamburg, GER / Southampton, UK
    Home Page:
    You shouldnt be on bhw if you dont know how to post images on forums.

    It always tickles me when members claim to be a "SEO & Linkbuilding Specialist with 5+ years experience" and then you find them posting questions like "how do I add images to forum posts"

    I mean, its not that hard. vBulletin is pretty common and a 5sec google search finds plenty of tutorials.

    +1 for Hawksters idea, though
     
    • Thanks Thanks x 1
  13. Neon

    Neon Jr. VIP Jr. VIP

    Joined:
    Nov 3, 2013
    Messages:
    2,704
    Likes Received:
    6,356
    Gender:
    Male
    Occupation:
    Traveling the world
    Location:
    Berlin
    [​IMG] [​IMG]
     
  14. Ste Fishkin

    Ste Fishkin Jr. VIP Jr. VIP Premium Member

    Joined:
    May 14, 2011
    Messages:
    2,047
    Likes Received:
    10,421
    Stop bullying people guys, there is a retard in all of us.

    Some of our retards are bigger than other peoples retards, that's all.
     
  15. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,538
    Likes Received:
    5,856
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    Some of the crappier forums do tend to overlook it, but inspect element does reveal this useful little bit of CSS on BHW:

    Code:
    .content img {
        max-width: 100%;
    }
    
     
    • Thanks Thanks x 1
  16. Nonilol

    Nonilol Elite Member

    Joined:
    Mar 1, 2015
    Messages:
    1,632
    Likes Received:
    555
    Gender:
    Male
    Occupation:
    Media Informatics & Webdev Student
    Location:
    Hamburg, GER / Southampton, UK
    Home Page:
    There is much truth in this actually.

    When reading through my old threads half of the questions I asked were retarded from my point of view now.
    I will probably punch myself in the face when I re-read my threads in a year or so.
     
  17. SargentoVoight

    SargentoVoight Junior Member

    Joined:
    Mar 20, 2016
    Messages:
    102
    Likes Received:
    12
    I congratulate you for this post, is very helpful for new users in the Forum, this type of post-should send by email to new users.