Forgot your password?

The Ins and Outs of Inserting Images on Infobarrel

This article has been generously donated to InfoBarrel for Charities.
By Edited May 17, 2016 3 3

Images.  They make readers happy.  They make the little robots that live in the internet happy. They make you happy as they increase page views and in turn increase revenue. In this article, I will offer a step-by-step guide for everything you can do with an image on InfoBarrel.

First, there are two main ways to use images in the text editor:

  1. Upload an image - great if you have your own photos/diagrams/graphics
  2. Link to an image on the internet - to be used to find the perfect photo for your article.

Option 1 - Upload an Image

InfoBarrel Upload Image Screen

1. Open the text Editor

2. Click Media (in the box to the right of the editor)

3. Click Upload

Image file - will allow you to browse to the proper path on your computer.  Once you upload the file, it will be stored on InfoBarrel.

    1. Title - Use a descriptive title
    2. Credit – Even if you created the image, it's good practice to cite pictures appropriately.
    3. Description – about a paragraph is good.  Note that you can use the power of linking here. You will see this on your media page.

4. Edit or Adjust if needed. Once you have the image in the text, you can edit certain properties by right-clicking on the image.  You can select: insert/edit image option, insert/edit link, or alignment options.  More detail will be provided on these items in the next section

Option 2 - Linking To an Image On The Internet

Assuming you have found a great image, and know how to cite it, the next step is to add it to your InfoBarrel Article.

1. Start with a right click at the point in the article where you want your image:

Right Click menu(140430)

2. You will get a new window with all sorts of options. The main tabs you will want to work with are the General Tab, and the Appearance Tab.  The Advanced Tab has a couple extra features that probably won't be needed in most situations.

Insert image Blank

The General Tab

  1. Image URL - Where is the file on the internet?  You can figure this out on most image online by right-clicking and selecting "Properties".
  2. Image Description - Pretend you only get text, how would you concisely describe the image?
  3. Title - Be specific and be brief.
  4. Preview - The window just shows you what the URL in step 1 will bring up.  If nothing is showing, there may be permission issues or the link could be bad.

Here's what it looks like all filled out.

insertImage Full


The Appearance Tab

  1. Alignment - How does the image work with the text?  I'll show examples of each one below.
  2. Dimensions (with Constrain Proportions checked) - Use this to scale your picture to the appropriate size.  The dimensions are measured in pixels.  Constrain proportions will keep the image scaled appropriately.  Uncheck if you know you want to distort it.
  3. Vertical/Horizontal space-  Enter the number of pixels for the amount of white space you want to show between the text and the image.
  4. Border - puts a black line around your image.  The number of pixels will increase its thickness. You can play with color if you know HTML.
  5. Class- Not sure what this does yet.

Here is an example of these items filled out as follows:


BigNate Avatar on InfoBarrel
This is what the output is.

With everything else the same, here are some more examples of ALIGNMENT.

BigNate Avatar on InfoBarrel
This is the "Baseline" option.  It is very close to the "Text Bottom" option.  There is no real difference between them.

BigNate Avatar on InfoBarrel
This is the "Text Bottom" option.  Can you see any differences between the two? I can't.  So consider them equal.

BigNate Avatar on InfoBarrel
This is the "Top" Option.  Again, it has a twin with the option "Text Top"  I will not show that example because, again, it is so similar. Note that only the first line of text appears at the top of the image.


BigNate Avatar on InfoBarrel
This is the "Middle" Option. 

BigNate Avatar on InfoBarrel
This is the "left" Option. every line of text will appear next to the image.  So you can write a really neat paragraph next to the image.


BigNate Avatar on InfoBarrel
This is the "right" Option. It behaves the same way as the "Left" option, but on the other side of the page.  Good to create balance and harmony on the page..


The Advanced Tab

  1. Swap image.  This can be a fun way to interact with your reader. Your image changes depending on the option you select.  Once changed, the image will not revert, unless the user resets their browser.
  • Mouse over will change the image as soon as their cursor hits it.

BigNate Avatar on InfoBarrel


    • Mouse out will change the image as soon as their cursor leaves the image.

    BigNate Avatar on InfoBarrel
    1. Miscellaneous.  I honestly don't know much about the sub-options here, other than you can have a link to the long description of your image. this might be good if you have a complicated graph or chart that needs a lot of explanation.

    BigNate Avatar on InfoBarrel

    You can also use some of the text editor options with your picture.  You can add links, change alignment without entering the Instert/Edit Picture window. I used those options on the picture below.  Using Align->Center and adding the link.

    BigNate Avatar on InfoBarrel

    Above all else, keep experimenting with images.  Treat it like art, have fun, and create some awesome looking articles!







    Apr 30, 2013 6:51am
    Thank you for the article. I didn't know about the Swap Image feature. Pretty cool!
    Apr 30, 2013 7:05pm
    I find it so much easier to just click into the text box where you want the pic then click on the uploaded insert and it resizes it for you. then all you need to do is right click alignment left centre or right.

    With the media images i publish the article then copy the links at bottom of page of each picture. Then go into edit and click on a image then click on chain and insert image link for that image then click open in new window. And click insert. Once you have done all of them publish again.
    But we all find different ways of doing things and we need to work out which ways suit us best..
    Aug 14, 2013 1:17pm
    Thanks for this! Your method of inserting pictures will definitely improve my articles.
    Add a new comment - No HTML
    You must be logged in and verified to post a comment. Please log in or sign up to comment.

    Explore InfoBarrel

    Auto Business & Money Entertainment Environment Health History Home & Garden InfoBarrel University Lifestyle Sports Technology Travel & Places
    © Copyright 2008 - 2016 by Hinzie Media Inc. Terms of Service Privacy Policy XML Sitemap

    Follow InfoBarrel