Help Topics

General Help Topics
Site Setup FAQ's Email - Set Up Domains Special Features FrameEZ Troubleshooting
Shopping Cart
Store Configuration Global Configuration Product Management Categories Manufacturers/Brands STN Import Tool Shipping Payment Processors Orders and Sales Shopper Groups Coupons & Discounts Taxes Safety Warnings POS-to-Web Sync
Import/Export Data Components
Contact Us Store Locator Newsletters - Letterman Front Page SlideShow Events Calendar QuickBooks Sync SEO Manager Media Manager Picture Gallery User Manager Banner Manager Language Editor
Wish List Mobile Lightspeed POS
Content Management
Insert an image E-mail
Content Management - Static Content
Wednesday, 19 December 2012 17:15

Note: Prepare your images first!

Adding images to your content should be easy, but just like everything else in life there are challenges. Prior to adding an image to your article, there are some things you should know and consider about your image: Large images take longer to load on a site so we highly recommend that you re-size the image prior to uploading it. Make sure your image is web friendly. If you forget everything else, remember this: an image taken with my digital camera is typically WAY too big for your website!

 

Why? Your image may look great pasted into a Word document or viewed on screen, but these programs and viewers reduce the image so that it can be viewed optimally. This is not the case when you upload the image to your website.

Even if you reduce the pixel length and width of your image when you insert it into your HTML document, it will still be the same size in kilobytes, and it is too many kilobytes that makes your website slow and cumbersome for other people viewing it. 

For more info on resizing an image, Click Here.


 

To add an image to your article:

 

1. Open the page you'd like to add an image to.


2. Click in the page editor area where you want the image to go.


3. Click the Insert/Edit Image button. (image)

The Insert/Edit Image window will appear as a pop-up.

image-insert-edit-button.jpg

 


4.  Click the Browse Server Button (Upload)

This will open another navigation window allowing you to find the image you want to use. If the image has not been uploaded to your site yet then you would do it at this time.

 


5. Click on the Upload button

 

Find the file on your computer, and click Open. This will upload the select image to the currently selected directory.

A few notes on uploading images:

  • When you upload files using the steps show above, the system will scale down any image taller than 1200 pixels.
  • You can also upload files using the media manager<< note: this method will not scale down the images, but will change filenames names to all lowercase.
  • You may prefer to upload via FTP <<note: this method will not scale images or change names. If you wish to use this method, pleae contact your account rep to setup an FTP account for you.

6. Select the image you want to use and "double click" to start the image insert process

 


5. Set your image properties (optional)

You may want to at this point set your image properties to help with the layout of your image as well as the image information that is presented to the visually impaired and search bots. 

Alternative Text: This is used to describe what the image is. For example readers for the visually impaired would tell them what this image was. Also search engine bots that scrape your site use this information as part of their image search as well as ranking algorhythm.

Width & Height: These tell you the dimensions of your image and allow you to make changes so that you can "scale" the image. This does not resize the image so if you have a very large image you should resize the image prior to using. 

Border: Entering in a number value here will define the width of the border. To set the color of the border you will need to click on the "Advance" tab and enter the color value in the "Style" field 

 for more information on border styles visit http://www.w3schools.com/css/css_border.asp

HSpace & VSpace: Entering number values in these fields will add padding to the image so that text or other images do not touch it. This can help with keeping your article easy to read.

Alignment: Setting this will define how you want text or other images to be place with this image. 


6. Click OK to insert the image into your article

 

Last Updated on Wednesday, 08 January 2014 16:14