Hosting Images

There is a pretty good chance that in the course of creating brews in the Homebrewery you will want to use an image for a monster or item or some other thing. It might be fun to try and limit yourself to only using the two images included in the snippets (the cat warrior and the beer stein), but if that doesn’t cut it you will need to bring your own images to the Homebrewery. This post goes into detail about how to do this, and if you need the fastest possible answer, jump the summary at the end.

• What is Imgur?
  • Using Imgur in the Homebrewery
  • Staying Organized
• Google Drive Images
• Quick Summary

What is Imgur?

Imgur.com is one of the most well known image hosts on the web today, having originally been created by a reddit user as a quick option for other redditors. Imgur offers a quick place to upload photos for free, and you can create an account to organize those photos into folders. Likely there are other, better image hosting services out there nowadays, but if there are, I don’t want to hear about it (kidding).

Using Imgur in the Homebrewery

The summary at the top here is that you need to have an image on the internet, and a link to that address somewhere in your brew. There are likely two places where your image currently is: either saved locally on your computer in some folder, or already on the internet but not in a place you control and which might disappear in the future such as Artstation or some other users Reddit post. In either case, you should go to Imgur.com and create an account. Once in, navigate to your “images” gallery (URL will look like this: https://youraccountname.imgur.com/all) from your account button in the top right. From here, you can either drag’n’drop files from your computer directly onto Imgur or you can hit ctrl v to paste an image from your clipboard. Imgur will upload the file and add it to your general library.

Now that your image is hosted online, you need to grab it’s web address. This is the most common spot for trouble when people ask “why isn’t my image loading in the Homebrewery?”.

Click on your image thumbnail in the gallery. It will open a dialog box showing you the full image and several text fields on the right with various forms of links. You want the Direct Link option.

The Direct Link will have a file extension at the end, such as .jpg or .png. That is required for use in the Homebrewery. Many new users will use the “Image Link” which is actually just a link to an Imgur page, which then displays the image inside of it.

Using this direct link URL, you can use your image in the Homebrewery wherever you would use it normally. For example, as a background image:

![killer robot](https://i.imgur.com/eXP9HAA.png) {position:absolute,bottom:20px,left:130px,width:220px}

Staying Organized

If you are making a lot of brews you may realize that it’s convenient to keep your image files organized. Doing so by creating folders for different genres, or image types (frames, background images, decals, etc) is possible in Imgur in a limited sort of way. You can create folders, but not nested folders within other folders.

To start, all of your images are in one general pool. To create a folder, find the “New Album” option in the left dropdown (“All Images”):

Fill in the new dialog box with an album name and description if you’d like. Continuing on, you will now be in an empty folder. You can add images that exist in that general pool by using the dropdown menu “Edit this Album” and choosing “Add or Remove Images” which will open another dialog. You have three views here:

• “This album’s images”: Images that already exist in this album. Should be nothing displayed if you just created the image, but this is a good way to remove images in the future.
• “Non-album images”: Any images that do not belong to any albums.
• “All images”: All images from all albums.

Click on the image thumbnails to add them as you wish. Note, you can assign a single image to multiple albums. Once you are all set, you can close that dialog and then navigate through different albums using that same dropdown menu.

You can also easily add images to that album using either ctrl v or dragging files to that album if you have it open. Or, on the right side, make sure you have the album picked out from the album dropdown and use the green button to add images:

One more thing that might make your life easier: When viewing an image in Imgur, there is a green button in the top right of the image dialog called “View and Edit Post”. This will take you to another page that shows the image but also gives a “Description” text field. In this field, you could add the source of your image such as a URL and artist name. If you are diligent about filling this out it can save you effort later if you are interested in giving proper credit.

So that’s pretty much it for Imgur– it’s a pretty simple host, and pretty simple to use.

Google Drive Images

Perhaps you really like to stay organized, and try to keep things in one place with a lot of other materials, and that place might be your Google Drive account. It’s a fine place to store stuff—heck, that’s where your Homebrewery docs are likely stored. Drive is capable of hosting photos and images as well and you might be interested in linking directly to them in Homebrewery. Here is how.

In Google Drive find the image file you want to use. Right click on it, choose “Get Link” and “Copy Link”. Paste that into the Homebrewery.

When pasted into the Homebrewery editor, your link should look something like this:

https://drive.google.com/file/d/1aVVM8wfc7777qwH2i6mGkQ4VhClVp-/view?usp=share_link

You are going to need the long random string between /d/ and /view, and insert into the following:

https://drive.google.com/uc?id=1aVVM8wfc7777qwH2i6mGkQ4VhClVp

This is your new URL which will work inside whatever Homebrewery syntax you are using for your image.

There are two things to note, though. The first is that my experience with Drive hosted images is that they are slower to load on the preview page. The second is that Google Drive really isn’t a “hosting service” like Imgur and others are; they are a “storage” option. I can’t say for sure what this means in a technical sense (maybe that explains the slow loading?), but it does mean they discourage or have a policy prohibiting using Drive to serve web assets to websites. Since your brew documents are basically just mini-websites, this means that they can turn off/change your image URL such that it breaks the link. This is likely only a concern if you reuse the same URL in a lot of different popular brews (such as a trademark logo on every brew), but something to watch out for.

Quick Summary

This post is likely longer than it needs to be, so the main bullet points you need are:

• Imgur: Your link needs to end in .png or .jpg, and looks like this: https://i.imgur.com/eXP9HAA.png
• Google Drive: Your link needs to be altered to look like this: https://drive.google.com/uc?id=1aVVM8wfc7777qwH2i6mGkQ4VhClVp

That’s it, thanks for reading!