Product Images - Adding them and setting sizes
Posted by Mark Popnfresh on 10 November 2011 04:32 PM

When you are adding an image to your product there are two options;

Thumbnail/Small Image (100 x 80px - please note: this is not the size your image has to be when you upload it, this is the size that you image will be displayed in your store and it is adjustable) and  Main Product Image.

In this version of OSC, the Thumbnail/Small Image is an image which is used on the category or product-list style pages (where the small product images are). The size of these images is controlled by Configuration > Images > small image width/height.

The Main Product Image is the image that you want to appear on the actual Product page. You can have multiple Main Product images. These images expand to full size when a customer clicks on them.

The HTML Content (for popup) is used if you would like to display something other than the image when the image is clicked on. For example, this could be a video. If you look at the default demo products which come with the store plugin, you can see an example of an embedded video on the Samsung Galaxy Tab product (found under Gadgets).  The final main product photo has a link to a video when clicked upon. If you put any other information in this box, or if you have an incorrect link, the images may not be displayed correctly or you may see an error.

If you only have the Thumbnail Image uploaded (and no main product images) it will be displayed on the Product page, BUT it will not be scaled correctly. The system expects you to upload a small, thumbnail sized image and will use this as a 'placeholder' on the product page until a larger 'main' product image is uploaded. I would advise uploading two images (or the same image to both locations, but with slightly different names) which should get around any issues you are having.

NOTE: OSC (WP Online Store) does not resize your original uploaded image for display, it just changes the viewable size for the web, therefore if you upload a really big image, the whole image will be transmitted with the data for your webpage to your customers computer. This will take up your bandwidth and slow down the speed of your website. It is advisable to be aware of the image sizes you are upload for your products. Perhaps keeping them less than 1000px wide and alway set resolution to 72dpi.

ADDITIONAL NOTE: The maximim size of the main product images is hard coded within the product_info.php:

jQuery('#piGal ul').bxGallery({

maxwidth: 300,

maxheight: 200,

These define the maximum width and height of the images that will be displayed. You can change these to make the images larger and so change the look of your page quite dramatically. Any changes you make you do so at your own risk and the files may be overwritten if your update the plugin at any time.

But also please be aware that changing the image size may not be that straight forward. The system also uses javascript to process the image size and in doing so the settings you change here may not work in all browsers. (All web browsers are not the same - they process the information in different ways and hence a web page can look different in different browsers. A lot of time and effort is spent by web companies into to making websites look the same in all browsers.) 

(18 vote(s))
This article was helpful
This article was not helpful

Comments (2)
Mark Steele
15 November 2011 01:34 AM
Hi, can the default size of the Main Image (100 X 80px) be changed? My image is being stretched out to fit the default size.
Mark Popnfresh
17 November 2011 03:26 PM
Main Image is a small image which is used on the category or product-list style pages (where the small product images are). The size of these images is controlled by Configuration > Images > small image width/height.
If you leave one of the fields it may auto calculate the correct measurement for your image based on the image proportions. HOWEVER, this does not work in all browsers.
I always find it better (but not easier) to standardize all my product images before uploading so they are uniform throughout the site and, once you have established what sizes your images are to be displayed at, you can eliminate the stretching or compressing that happens when you try to force a portrait image into a landscape shaped hole. This does take some time, but it has a much better visual effect.
Help Desk Software by Kayako Fusion