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:
- Upload an image - great if you have your own photos/diagrams/graphics
- Link to an image on the internet - to be used to find the perfect photo for your article.
Option 1 - Upload an Image
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.
- Title - Use a descriptive title
- Credit – Even if you created the image, it's good practice to cite pictures appropriately.
- 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:Credit: BigNate
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.Credit: BigNate
The General Tab
- Image URL - Where is the file on the internet? You can figure this out on most image online by right-clicking and selecting "Properties".
- Image Description - Pretend you only get text, how would you concisely describe the image?
- Title - Be specific and be brief.
- 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.Credit: BigNate
The Appearance Tab
- Alignment - How does the image work with the text? I'll show examples of each one below.
- 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.
- Vertical/Horizontal space- Enter the number of pixels for the amount of white space you want to show between the text and the image.
- 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.
- Class- Not sure what this does yet.
Here is an example of these items filled out as follows:Credit: BigNate
This is what the output is.
With everything else the same, here are some more examples of ALIGNMENT.
This is the "Baseline" option. It is very close to the "Text Bottom" option. There is no real difference between them.
This is the "Text Bottom" option. Can you see any differences between the two? I can't. So consider them equal.
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.
This is the "Middle" Option.
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.
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
- 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.
- Mouse out will change the image as soon as their cursor leaves the image.
- 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.
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.
Above all else, keep experimenting with images. Treat it like art, have fun, and create some awesome looking articles!