Most of ioSys’s templates were designed to fit perfectly on the monitor with 1024×768 pixel screen resolution. And the layout is fixed at the center of the screen if users set their display resolution higher than 1024×768 pixel. Also, by default, the layout of the website is set to 3 columns (users can change the layout to be 2 column; 1 wide column and 1 narrow column.) Dimension of the default layout shows in the next picture; left and right column are 195 pixel wide and center column is 510 pixel wide.

Putting any object; pictures, flash or other information that are wider than the width of the column in the column, ruins the tidyness of the layout. The result may look like next picture. (When the width of content is wider than the screen, users have to scroll left and right to view all the content.) However, if users set their screen resolution higher than 1024×768 pixel, this problem may not happen.

To resize any image to be fit within the column width in order to avoid the problem discussed above, this tutorial will show you how to use ACDSee (Pro Version 8.1) to adjust the dimension of the picture files.

Note: ACDSee is one of the most popular image viewer software known amoung computer users (PC). If you don’t have the software installed on your computer (PC), you can download it here, install and use it for free for 30 days. Or go to ACDSee website to read more about the software.

Cropping Image

To crop an image with ACDSee, open the image file with ACDSee and do the followings.

1. Right click on the image file to open up the menu.
2. Select Edit command.

You will be in Edit mode. The image file is displayed on the screen and there are commands on the right part of the screen.

1. Click on Crop command.

The picture displaying on the screen turns darkened and a crop frame appears for user to specify the area only needed.

1. Drag mouse to adjust the dimension of the frame to crop only the part of the picture that you need to use.
2. The dimension of the cropped part is automatically shown In Width: and Height: field. You can also directly specify the dimension in these fields too.
3. When you are satisfied, click on Done button.

Now that the picture file is cropped,

1. click on the diskette icon to save the picture.
2. When Save Image As box appears, change the name of the file in File name: field to create new file (the original file will remain the same). Leave the name to replace the original image file with the changed one.
3. Click on Save button.

Resizing Image File

To decrease the file’s dimension, when in ACDSee, browse to the folder containing the picture file you want to resize. Note: It is not recommended to increase the file’s dimension. Doing so will ruin the quality and sharpness of the picture.

1. Right click mouse on the image file you want to resize to open up the command list.
2. Click on Edit command.

You will be in Edit mode. The image file is displayed on the screen and there are commands on the right part of the screen.

1. Click on Resize command.

Next,

1. adjust the width and height in Width: and Height: fields.
2. Make sure the Preserve Aspect Ratio: item is checked.
3. Click on Done button.
4. Save the change you just made by clicking on a diskette icon.
5. If you want to save the file into the new one, change the name in File name: field of Save Image As box. Leave the name to save change you made to the original file.
6. Click on Save button.

You can add multimedia clips on your website by using our Multimedia Gallery section. If you have your own video or sound clips, you can upload them to display on the website (the file size must not exceed 10MB). You can also embed the URLs code of multimedia clips from websites like YouTube, Daily Motion, ijigg or imeem ect. in the multimedia gallery.

Lets take a look at how you can embed these URLs codes into the gallery.

1. Go to www.youtube.com and search for a video clip you like. After it is found and loaded, copy the embedded URL code provided from the website by selecting it and copy it to clipboard (while the code is hi-lighted, press Ctrl+C.)

Go to the ioSys multimedia gallery control panel.

1. paste the code you copied into the Embedded URL: text box. Type the name of the clip in Title: field, type description for the clip in Info: field. Specify the people to have permission to view the clip by selecting the value in Visibility: drop down list, and specify the clip’s category by selecting the value in Category: dorp down list. Click Save button.

After saving the clip, when you go to the multimedia gallery on your new website, the clip from Youtube that you just added will display like the picture below. Click on the clip’s name or graphic on the left and the video clip will be displayed.

Note: To upload your own multimedia clips instead of using the embedded URL code of online clips, go to multimedia gallery control panel. (1) click on browse button next to Embed code: field and go to select the clip file you want in your computer. Then upload it to the website. (The file must not exceed 10MB.) If you have thumbnail image file to display as a thumbnail image for viewer to click on in order to open the media clip you can upload it to the website too. (2) Click on browse button of Image file: field to go to select the thumbnail image file you want and upload it to the website. Click on Save button when finished.

Editing / Deleting Clips

Go to the ioSys multimedia gallery control panel.

1. To Edit, click on the name of the multimedia clip you want and this will load the control details which are  displayed. Make the change and select Save.
2. To Delete, click on Delete command at the far left of each name listed and this action will delete the clip.

Managing Multimedia Clip Categories

Go to the ioSys multimedia gallery control panel.

1. Click on the Categories tab
2. Select the graphic image for the category from the top left drop down list.
3. To add new categories for multimedia clips, just type the name of the category in Name: field. Set permission to view clips in this category by selecting the viewer type in the Visibility: drop down list.
4. When finished, click on the Save button (the category will be added to the list below)
5. If you want to delete any category, click on the Delete command of the category you want to remove.

By clicking on the icons in Products in group > Product Category box which displays all current products of that category, users can choose to view, edit products’ details or delete each product item.

1. In Current product category, click on Add item icon of the product category that you want to add product.

2. (1) Fill in all the product’s details as needed (2) click Browse button to browse to the prepared image file of this product.

3. When the image file is found, (1) click to select it (2) click Open button to be back to close the Choose file box (3) click Save button

The list of added product will be shown in Products in group > Product Category box like the following picture.

4. If you want to go back to main product category page, (1) click on Return to category command to add another product in the different category or you can keep adding the product item in the same category by filling product details of another product item in Add product box

1. After getting into Online Catalog control panel, in Add category box, (1) type a name of product category in Name: field (2) Click Browse button to go and select thumbnail image file that you will use as your current product category’s image.

2. In Choose file dialog box, (1) browse to the image file you want to use and click it to select (2) click Open button to go back to the control panel (3) click save.

You can keep adding product category by repeating the same steps.

Product categories added in to the system will be shown in Current product category box like the following picture. Users can arrange the order of product categories, edit, delete, and add products into the categories.

1. Click on up / down arrow to move the product category up or down in order to change the order of them.
2. There are 3 control icons in the manage column which are Add item, Edit category and Delete icon. Click on each of them to add product, edit category details or delete them accordingly. You can also click on the name of product categorie to add products into them.

Note: The system does not allow users to delete the product category that still has products. You have to remove all products inside it before being able to delete it.

The difference between ioSys’s Online catalog and Online shop is that Online catalog does not have the shopping cart system like Online shop does.

To make the systematic and organized online catalog, before adding products into the online catalog, users have to setup product categories first. Main online catalog page of the system looks like next picture. Not only that users have to provide their own products’ images, but they have to also provide thumbnail images for products catagories too.

1. To edit product’s details, or delete product, in control panel, go to the product category containing the product you want then click Edit or Delete icon accordingly.
2. If you want to just add another product item in this category, fill in the product’s details in Add Product box.

Note that you have to prepare the information of your products including text and image file in advance. Lets say that we are adding a product in “Office products” category that we’ve just added into the system. Do the followings.

1. Next to each product category, there are 3 control icons. Click on Add Product of “Office products” category

Scroll down to Add Product box.

1. Type product details in each field. Leave it blank if you don’t want to provide the detail.
2. Click on Browse button to go to image file.

After Choose file displays.

1. Browse to the product image file, click it to select.
2. Click Open button.
3. After specifying the image file, click Save button.

Name of the product will be and displayed and added into the Product list > Office products box.

To add a sub category “Office products” into “Business” category, do the followings.

1. In Add Category box, type the name of sub category you want (in this case “Office products”) in the Name: field.
2. In the drop down list , select the main category name you want to specify the sub category (in this case, select “Business”)
3. Click Save button.
4. In Current Categories box, notice that in front of the “Business” category has a small button with the “+” sign. Click on the button to expand the list. The “Office products” sub category we just added will display showing that it is hidden under the “Business” category.

Note: When you add sub category into the main one, the system puts a small “+” button in front of the main category name indicating that there is sub category inside. You can click on this button to expand the list. A symbol on the button will change from + to -. Click on it again to collapse the list.