Including Extra Images In Your Own Content

When adding additional descriptive content to the site, you may want images that may or may not be related to your items for sale. Item images are automatically uploaded and sized when you link them in your Gateway or accounting program, but for other non-catalog content, you'll need to put them somewhere else.

There is a special folder under the EverTRX application folder called "website". You will need to find this folder to copy images (and other files you may want to use on the site) to it and upload them to our server.

Once you have them uploaded, you can edit the web site HTML to point to those images.

Here are the general steps making this work:

  1. Prepare your images for the website
  2. Locate your website folder and copy the images there
  3. Upload the website folder
  4. Modify the HTML on the website to show images

1. Prepare your images for the website

These are the most popular file types for showing image/picture files on the web (filetype is the extension following the filename, like "imagefile.jpg"):

  • .JPG or .JPEG - most cameras save this type
  • .GIF - popular format for cartoon and animation images
  • .PNG - better than .GIFs but not supported by all browsers
Find more info about these three formats at www.yourhtmlsource.com/images/fileformats.html (opens in a new window)

Digital camera pictures are not good to use right out-of-the-box because they are very large. They have a lot of pixels (dots) in the image to make it better for printing a lot of detail, but are very bad for web sites because they load slowwwwww and could drive customers away.

You need to resize or scale them down. There are many image editing programs out there to help scale pictures. Here are a couple we have used:

  • Picasa - Free image management program from Google.
  • Irfanview - An inexpensive picture editor ($12 for commercial use) that is powerful but a little tricky to learn.

Try searching for "image scaling software" or "image resizing software". I did and found these seemingly free programs (we cannot vouch for these at all, but their features look easy to use):

Sample Resized Image

Here is a sample of resizing a large picture. The original image was 2048 pixels wide x 1536 pixels tall, and was 1,014 kilobytes in size:

Resize Width Filesize KB Image
500px 46k 500px picture
250px 20k 250px picture
100px 12k 100px picture

2. Locate your website folder and copy the images there

The website folder is under the main EverTRX application folder on your local computer or a shared folder on your network. You can right click the blue Gateway Maintenance icon on your desktop, and click the Find Target button to open the EverTRX folder for you.

The website folder should show up there near the top. Open that folder and that is where you'll want to copy all your website files. You can make subfolders in there if you want for storing images you may reference on the website (and there will already be one for your Item images), or if you won't have very many, you can just copy images in the website main folder.

Locating the Website folder Adding files to the Website folder

Locate your image files you want to use for the EverTRX site and copy and paste them into this folder, or have two windows open and drag from one window and drop into this one.

Dragging Images: If you click the right button instead of the left to drag a file, you'll get a menu that prompts to Copy or Move. I always find this helpful because sometimes using a left-click to drag will move the file (it all depends on the source and destination drive).

3. Upload the website folder

Run the red desktop icon to do a full upload and download. This should copy any new files in your website folder up to the web server.

On the Start menu, you could drill down to the EverTRX application folder, and you'll find more options for shortcuts that only upload inventory changes and website files. Choose which ever seems to be easier.

4. Modify the HTML on the website to show images

There are many ways to embed images in your HTML text, but the easiest is to use the img tag. Visit the Modifying Content tutorial page for instructions on how to begin editing content on the EverTRX pages.

The basic tag format looks like this:

<img src="logo.gif" border="0" alt="Evermac Solutions Inc">

The src attribute should contain the name of your image file. If you have it in a subfolder, it would need to have the folder name in front:

<img src="items/abc123.jpg" border="0" alt="Evermac Solutions Inc">

The alt attribute is just an alternate label for the image that is useful for blind people who have screen readers, but maybe more importantly for you, the search engines will index that text!

The border attribute is optional, but the number there just tells it how many pixels wide. Zero would be no border at all.

There may be more attributes like style. This is especially useful for positioning the image on the page. If you need help with positioning, contact someone with CSS (Cascading Style Sheet) experience.