Custom Vantage Web™ How to Work with Images
by Becky Skelley
Introduction
Last month, Amanda walked us through using Shared and Private Features within Stamp Shop Web. In this installment, I will discuss the use of images and how to upload an image. In Stamp Shop Web, there are several ways to upload images including: editing a product, editing the description area of a product or category, HTML rotators and custom pages. We’ll also cover the shared images folder and organizing and creating new folders. We’ve got a lot of ground to cover, so let’s begin!
Steps to Follow
Within Stamp Shop Web, there are several different ways to upload images to your site. You can edit a product and click the Images menu item, or edit a product/category and in the description area, click the Image Manager icon button. In addition, through the Content tab, you can use the Image Manager button within an HTML rotator or on a Custom Page.
However, having noted these upload areas, let’s begin by reviewing the easiest way to upload several images at one time. We’ll utilize the Upload Manager, located within the admin of your site, under the Content tab. On the far left menu, at the bottom of the list, you’ll find the Upload Manager menu item (see Picture 1.) As noted on the page, you may click on the individual icon buttons to upload files. Please note the maximum file size for all manager upload sections is 200 KB. The breakdown is as follows:
Image Manager—Click here to upload images with the following file extensions: .gif, .xbm, .xpm, .png, .ief, .jpg, .jpe, .jpeg, .tiff, .tif, .rgb, .g3f, .xwd, .pict, .ppm, .pgm, .pbm, .pnm, .bmp, .ras, .pcd, .cgm, .mil, .cal, .fif, .dsf, .cmx, .wi, .dwg, .dxf, .svf
Flash Manager—Click here to upload any .swf file type.
Media Manager—Click here to upload any .wma, .wmv, .avi, .wav, .mpeg, .mpg, .mpe, .mp3, .m3u, .mid, .midi, .snd, .mkv
Document Manager—Click here to upload any .doc, .txt, .docx, .xls, .xlsx, or .pdf file type.
Template Manager—Click here to upload any html or htm file type.
For this example, we’ll click on the Image Manager icon to upload our image (see top of Picture 1). Once you have clicked on the icon, you will see a window pop-up (Picture 2.) Here you will see your website’s Images folder and sub-folders.
Within this pop-up window, you may upload images by clicking the Upload button (located at the top of the window) or create new folders. To add a sub folder within the Images folder, simply click the New Folder icon image at the top of the window, type the new sub folder name, then click OK, and your new sub folder will appear.
To upload an image, click the Upload button where you will see a new pop-up window with fields for several different image files to be selected (see Picture 3.) Click the Select button, locate the file on your personal computer and then click Open. Once you see the image file name within the field, click the Upload button (located at the bottom of the window, Picture 4). Once the image has been uploaded, you will be able to find the file name and view a preview of the image (see Picture 5). Now that our image has been uploaded, we can click the Insert button to close the window.
Applying an Image to a Product
The above process is the easiest way to upload several images or files to your website. To apply this image to a particular product—the Printer 30, for example—we’ll need to head over to the Products tab. Now we’ll need to edit the existing product, Printer 30. Once inside the product, on the far left you’ll see the menu item Images which we will click (see Picture 6).
Within the Edit Product Images page, you’ll notice a field for the small image of the product and the medium image (see Picture 7.) At the very bottom of the page, you’ll also see a button to Add Additional Images. We recommend the small product images be no higher than 110 pixels and the medium images be no higher than 175 pixels. Since the additional images appear in a separate pop-out window, there are no real limitations in file dimensions. However, keep in mind that they cannot exceed 200 KB in file size.
To change the small or medium images, click the Select button next to the applicable field. For our example, we’ll change the small image. Once the Select button is clicked, the screen will refresh, and you’ll now see a new page (see Picture 8).
On the top left, you will see two radio buttons: Use Local Images and Use Shared Images (see arrows in Picture 8). Here you can select to view and choose from the Images folder on your website or the Shared Images folder that all Stamp Shop Web users may access. The Shared Images folder contains all stock product images from our catalog vendors (COLOP, X-Stamper, Shiny, Millennium, Trodat and JustRite).
To select the image, we click Use Local Images. As a default, when you click Use Local Images, you are automatically placed inside the Products sub folder. To go back to the main Images folder, click the folder icon with ellipses (see Picture 9) at the top of the column.
Once you’ve located the image you’d like to select, click on the image name, and then the image will appear in the center of the screen (see Picture 10). Next, click the Choose This Image button to select the image. Before we click, I’d like to review the Upload Images area located at the far right of this screen.
Upload Images Area
The Upload Images area is where you are able to upload images to the Images folder within your website. We recommend uploading images in this area if you are only uploading one or two to your site for a particular product. To upload an image to this product here, click the Browse button (see Picture 10, far right) and locate the file on your personal computer. Once you have found the image, click Open and then the Upload button. This will upload the image to your Images folder.
Adding ClipArt Images
While we’re here, let’s review adding additional ClipArt images to your site. To do so, we’ll head back over to the far left of the screen (Picture 10) and click the radio button, Use Local Images. Now you will see all the stock folders and among them, the ClipArt folder.
If the ClipArt folder does not currently exist on your site, you will need to create it. To do so, type the name “ClipArt” into the “Create New folder” field at the bottom of the column and click the arrow button (see Picture 10). If the folder does exist, click on the folder name to enter. Now you will see the existing stock folder names.
You may add a folder to this area by typing in the field located at the bottom of this column, Create New Folder. Type the new folder name and then click the arrow button to the right of the field. To add new clipart images upload high resolution (300-600 dpi) black and white jpg, gif, or png files to the folder using the Upload Images section (previously reviewed) on the far right of the screen.
Uploading Images through Editing Category Description Area
Let’s move on to using the Image Manager within Category Descriptions. First we will edit a category. To do so, click the Products tab and then the Categories menu item located on the far left. Here you may select any category to edit. Click the category name to highlight it, and then click the Edit button.
Once inside the Edit Category page, you’ll see many button options. We’ll need to click the Image Manager button (see Picture 11.) Once clicked, you’ll see the same familiar window pop up where the Images folder is selected. Here you may also upload and select images from your website’s Images folder. Once you’ve located the image you’d like to select, click the Insert button at the bottom of the window. This will insert the image into your category’s description area. Be sure to click the Save Changes button at the bottom of the screen when you are satisfied with the image placement.
Uploading Images within HTML Rotator and Custom Page
Finally, you may also upload and insert images using the Image Manager within an HTML Rotator and a Custom Page. The process is the same as within the category description. While editing either the HTML rotator or the custom page, simply click on the Image Manager icon button to upload or insert images from within your website’s Images folder.
As you can see, when working with images, there are plenty of areas to upload and select images. With this review of the different areas, my hope is that you may now know which area to use with your different image needs. If you have further questions, please contact Connectweb Technical Support for further assistance by calling 800-556-9932.