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:
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.