Guide: Embedding Images into your Post

There are two steps to insert (aka embed) an image into your post on GamersPlane.

1) Getting the URL for the image

All image files must be hosted on some other web server with a publicly accessible URL. GamersPlane.com does not currently support hosting image files.

This first step is the more complicated of the two because there are a wide variety of file and image hosting options available. In the posts below, I will explain the necessary steps to get the image URL from Dropbox, Google Drive, and Other internet locations. But once you have the image URL, proceed to Step 2.


2) Inserting the Image

To insert your image, you can either use the following brackets around your URL (replace {} with [])

{img}INSERT IMAGE URL HERE{/img}

Or you can click on the Insert Image icon above the post:


Then paste the image URL into the dialogue box and click OK:

Chrome:


Internet Explorer:


Firefox:



Example:

Image URL = http://gamersplane.com/images/bodyComponents/logo.png
Insert Code (replace {} with []) = {img}http://gamersplane.com/images/bodyComponents/logo.png{/img}
Final Result:

Something I've not experimented with, nor asked Keleth specifically, but can image sizes be modified to fit within the forum constraints? If the answer is provided within the guide itself, I will delete this post to clean up the thread.

I don't think so....the only way I've been able to tweak the size was to adjust it before uploading it.

I will end up splitting the extra posts off to a separate thread. We're trying to figure out how guides should be setup; we're thinking of locking them so they can be expanded later, and having discussions in separate threads. I donno quite how we should do it. If njohn858 doesn't oppose, I, Naatkinson, and phil_ozzy_fer will work on editing the guide.

I don't oppose. I'm planning on getting the additional write-ups for Dropbox, Google Drive, and Other done in the next week or so....if you're planning on locking this thread, where would you have me put those?

Also, what are the supported image types? I'm aware of .jpg and .png but are there others?

We'll hold off on locking it for now. Right now, any image type is supported.

Inserting images from Dropbox:

To use Dropbox, you must first create an account with them. When you create an account, they will give you 2GB storage for free (2.5GB if you use this link to sign up), though there are options to increase that storage space later.

1. Store image in Dropbox

2. Get Public Share link

You can get the Public Share link either from the website or from your computer/mobile device.

~~~~~~~~~~~

Website:

Go to dropbox.com and browse to your image file then,

Click Share


Click Create a Link


Click Copy Link


The link is now in your clipboard. Proceed to Step 3.

~~~~~~~~~~~

From your Computer:

--Using Windows

R-click on File >> Copy Dropbox Link


The link is now in your clipboard. Proceed to Step 3.

--Apple?

--Linux?

~~~~~~~~~~~

From mobile device:

--Android

Launch Dropbox app and browse to image file

Tap the Menu icon >> Share


Tap Share


Tap Copy Link


The link is now in your clipboard. Proceed to Step 3.


--iOS?


3. Modify URL

Paste the URL into your post then:

1. Change 'www' in the URL to 'dl'

https://www.dropbox.com/s/6upkeqhysa1ugf8/GPLogo.png?dl=0

Becomes

https://dl.dropbox.com/s/6upkeqhysa1ugf8/GPLogo.png?dl=0

2. Remove '?dl=0' from end of URL

https://dl.dropbox.com/s/6upkeqhysa1ugf8/GPLogo.png?dl=0

Becomes

https://dl.dropbox.com/s/6upkeqhysa1ugf8/GPLogo.png

Inserting Images from Google Drive:

To use Google Drive, you must first create an account with them. When you create an account, Google will give you 15GB of free storage to use across Google Drive, Gmail, and Google Photos. There are options to increase that storage space later.

1. Store Image in Google Drive

2. Get Share URL

You can get the Share link either from the website or from your computer/mobile device.

~~~~~~~~~~~

Website:
R-click on File in browser >> Get Shareable Link


Copy URL


The link is now in your clipboard. Proceed to Step 3.

~~~~~~~~~~~

PC:
R-click on File >> Google Drive >> Share


Copy URL


The link is now in your clipboard. Proceed to Step 3.

~~~~~~~~~~~


3. Modify URL

Change open? in the URL to uc?export=view&

https://drive.google.com/open?id=0By4ZjOjkb36lTWRLQkpVQ3N5Wmc

Becomes

http://drive.google.com/uc?export=view&id=0By4ZjOjkb36lTWRLQkpVQ3N5Wmc



You're now ready to insert your image into your post!

You can search for an image on the internet or find an image on a website, then copy it's URL to put it into your post.

In Chrome, r-click on the image >> Copy Image Address



In IE, r-click on the image >> Copy



In Firefox, r-click on the image >> Copy Image Location

@Keleth, is there any other storage location you'd like me to document? I took a look at OneDrive, but they aren't very friendly to allowing files stored there to be embedded. Eg, I had some .jpgs that would work fine while others didn't, I couldn't get a .png to work, and other sites/forums indicate it shouldn't work at all.

You've covered all the ones I can think of!

I really like this post, and when I first signed up for GP I was a little confused about how to handle sharing images. This is really worthwhile information for people on the site, thank you for making it.

The one thing I saw that I might add is that people need accounts with Dropbox and Google to be able to make use of the services outlined here. This probably wouldn't require more than a couple lines to address.

You're very welcome! And good catch on adding account creation text and links. I'll get those added.

I was going to post instructions on using Photobucket, but my browser poofed my work in progress. I'll try to provide that tonight.

Edit: Photobucket began demanding money from me for even basic usage, so it ceased to meet my needs.

I was attempting to follow the instructions to share from Google Drive. I get the link to share, but when I go to modify it, there is no "open?" in the URL to modify. Here is the image file I was attempting to embed:

https://drive.google.com/file/d/1Pye_3oEWSu62GsFn3PnEUDCdjDGYU_xo/view

I followed your URL, right-clicked the image and selected "Open image in a new tab." I then used the URL that I got from the new tab that displayed the image.

Sadly, all of the images on this thread are no longer showing...

Yeah, I've been using tinypic.com. It's got ads everywhere, but it allows for some resizing which is nice.

I've been using Pasteboard for anything I need to show. Links last long enough that I've yet to see a broken link, but I don't know the actual cutoff range.

Imgur is my new go-to for this sort of thing. Easy upload and then just copy and paste the direct link and you're set. I've not run into any issues with images disappearing.

Below is: "[*img*]https://i.imgur.com/yMXbNGG.png[*/img*]" (minus the leading and trailing asterisks)

^ 2nding imgur, it's the best for hassle-free image hosting.

I also use Imgur for my pictures. I don't think it's going anywhere any time soon and it's quick and easy to use.

I like imgur better too cause i can host my HiRes imgs on there and if i need an icon for the multiple characters i have speaking, instead of changing my image i can upload the original and it'll make it into the tumbnail so i can just embed the thumbnail of the speaker. the down side to that is it makes the text blocky.

Weather it's "The gravekeeper in Phlan" or "Volothamp at your service." but i've been embeding the image and the hires for the maps in the spoiler tags so it don't take up to much space.

I used imgur til I got banned for asking, and I quote, "We've been having this issue for two years? Is there any chance it's going to get fixed soon?"

Weird.

Thats strange what was the issue?

Tags falling off of posts. And yeah, it was weird, but I didn't really feel like spending time trying to argue it when I could be GMing or worldbuilding, soooooo.... next site!

interesting bug to know about. I don't use tags myself i post on there for my images for my games on here so i private everything and just have 849 folders

I don't even know if it's a problem anymore.

Is there any way to resize an image? Lets say that I have found a 600x800 image, but for a post 300x400 would do fine. Something like like [img= size*0.5]

That functionality has been requested but does not currently exist to my knowledge.

You have the ability to resize within the Imgur application, if that helps. Note that the "Direct Link" option is the one you'll post into the thread.

I don't remember it being requested, but I'll look into it.

Had to look it up because I honestly wondered if maybe I was misremembering: it's here. Absolutely cannot fault you for forgetting, with so much going on! :-)

Oh man, yah, that was years ago. I actually lost a list of feature requests from before two years ago. I reassembled most of it, but guess I missed some.

Here is a hack that will let you resize your image to whatever suits you. The image below is only 300px tall but the full size image is actually 1645x2048.

There is also NickPic.Host and Go Moodboard for storing photos and creating moodboards for a setting.

Here is a hack that will let you mix images and text. Sometimes (for style) it is nice to include text beside an image.
Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor. Hodor. Hodor, hodor, hodor. Hodor hodor?! Hodor, hodor. Hodor. Hodor, hodor - hodor hodor! Hodor, hodor, hodor. Hodor hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor hodor; hodor hodor? Hodor. Hodor HODOR hodor, hodor hodor... Hodor hodor hodor; hodor hodor?! Hodor hodor - hodor hodor; hodor hodor; hodor hodor? Hodor hodor - hodor hodor... Hodor hodor hodor hodor. Hodor. Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor - hodor hodor! Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor; hodor hodor; hodor hodor - hodor, hodor, hodor hodor.

Hey this'll be especially helpful for NPC dialogue thanks!

I'm new here, so what would be the advantage of doing the Hodor hack versus just using the site's in-built avatar functionality? I mean, if I'm GMing, can't I just change out my avatar for each NPC I post as?

What Constablebrew is demonstrating has nothing to do with the avatars. It's a new way of embedding images in a post. This is what that image looks like without his code (no resizing and repositioning):

That's what I generally do; however if you want to introduce a character / depict an item and do it inline, this is the only way to do it right now.

That doesn't work because your avatar on past posts will all show as your current avatar, effectively 'erasing' old avatars. For each NPC to have their own avatar you will need to make a separate character for each one (we do this in our game, but now our DM has 97 characters in his drop-down list), or put the NPC's picture in your text like the example.

Holy cats that's a lot of NPCs!

We've been averaging over 10 posts a day for over a year! They add up. Also, most of them are dead now. 😬

Haha, I got tired of wanting to get that many pictures so i've been doing min as inline but without the text block i just rezise the image and pop it onto the line before i post.

The DM can always withdraw the NPCs they no longer use. The avatars and names remain.

"hodor hack" lol.

I would use it for longer posts that describe scenes mixed with imagery. Reducing vertical scroll is a benefit, IMHO.

As far as NPC dialog, you'd have to set up each NPC character sheet, set the avatar, and then add it to your game. A significant amount of work for someone that might just have a few lines of interaction.

Yeah i just started running games on here, but when i had an NPC that had only a few lines I just added an "s" to the imgur link to get a thumbnail and embedded it above the dialogue. That particular NPC may not ever been seen or heard again, so I thought it wasn't worth the effort to make a character.

Ooh! We didn't know that!

OK, all that makes sense. I'm hoping to jump into GMing soon, and I like to use lots of NPC images. Always good to have several options!

Yea im on that same boat with some of the games i'm running.

Ok, I am just now learning how big a pain posting as NPCs can be...

yea I just normally embed an icon on the chat and do it that way

I do that SavageBob, I create npcs and post as them (with their own avatar)

If you click on my avatar, you'll see a horrendous number of characters made. Most are NPCs for games I'm running; quite a few don't even have stats, just a name and an avatar.

Is there a way to embed a caption or a title with an image you post?

@Seck, like this?


Caption
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

---

Edit: or this.

Caption

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Or, if you don't want to mess with CSS, then use the built-in f tag.

[f=float-left]
[img]https://i.imgur.com/YzXPlh9.jpg[/img]
[b=centre]Caption[/b]
[/f]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.