Product Images and Videos

SCP supports displaying any number of images and videos in an attractive 'lightbox' popup on each product page in the customer interface. In addition, you can upload other types of files, such as user manuals, for customers to download from the product page. Finally, images are also supported for each option under the product. This document describes how it all works including how to upload and manage the images, videos, and files.

Topics covered in this document:

Main Images for a Product

Each product record has fields for a small, medium, and large image. It is possible to upload any number of additional images as well, but these three main images are treated in a particular way.

• Small Image: The small image is displayed as the thumbnail image on all pages that list the product. This includes any category pages the product is in, the brand page for the product's manufacturer, and any search results pages where the product matches a search:

  

• Medium Image: The product's medium image is the main image that customers see at the top of the product page itself:

  

• Large Image: If defined, the large image appears in a 'lightbox' popup when the customer clicks on the medium image on the product page. It is displayed in the lightbox along with any additional images that have been uploaded, and any videos that have been defined:

  

Uploading and Maintaining a Product's Main Images

To upload and maintain these three images, use the Images section of the product details screen in the administrator:

• Click "Choose File" to upload an image for each field, or "Download" to view the current image.

• Optionally, if you know the URL for the image, you can simply type or paste it into the File Path field.

• When you upload a new image for one of the fields, the existing image is left alone on the server, unless the name of the image is exactly the same. If the name matches, you may see a warning message asking you to confirm that you would like to replace the image. You must select "Ignore Warnings" and upload the image again to get it to upload.

Automatic Resizing and Automatically Generating Small and Medium Images

By default, the system is configured to automatically resize the large image when you upload it. And if you have not defined a medium or small image separately, the system will automatically populate those fields with smaller versions of the large image you are uploading. This makes maintaining the images much easier! Typcially, all you should have to do is upload the large image.

The system resizes the large image according to the settings on the Advanced Display Settings screen, so you can adjust the default sizes of the resulting images:

Note, the system does resize the large image itself also, according to the pixel value of the "Large Image Size" setting. If you wish to disable this, or if you wish to disable resizing for medium or small images specifically, you can set the values to 0. You can also disable the auto-resize function altogether by toggling off the "Automatically Resize Images" setting.

Note, the same settings are used when uploading the Large image field of categories, content pages, attributes, and options.

Additional Images for a Product

You are not limited to the three main image fields for a product. You can upload any number of additional images as well. When you do this, the additional images appear as thumbnails under the Medium image on the product page:

When the customer clicks one of the thumbnails, the full-sized version of the image is shown in the 'lightbox' popup window:

Note that the lightbox is scrollable: using the arrows in the top corners, the customer can click through the full-sized version of each of the additional images for the product, plus the product's large image, plus any videos that have been configured for the product (see below).

Uploading and Maintaining Additional Images

To upload additional images for a product, click the "Product Attachments" link from the product's three-dots menu:

To upload a new additional image, click the plus icon to add a new product attachment:

• To identify this attachment as an image, select IMAGE as the Attachment Type

• To upload the image, under the File Fields section and the File Path field, click "Choose File" or "Browse" to select the image from your device

• Optionally, if you know the URL for the image, you can simply type or paste it into the File Path field.

• If you wish to have a small caption under the additional image, enter the caption text into the Description field.

• Typcially you should leave the Mime Type field empty as the system will detect it from the file.

• Click "Add New Record" to create the product attachment.

Optional Thumbnails for Additional Images

Note the system does not automatically resize additional images. By default on the product page, the browser simply scales down the image you have uploaded as a product attachment. However, to improve performance, you can maually upload your own thumbnail version of each additional image. This step is not required, but it can make the loading of the additional images on the product page go faster. To create a thumbnail version of an additional image, create another product attachment with these fields populated:

• For the Attachment Type, select THUMBNAIL

• For the Name field, enter the same value as the Name field of the main additional image you uploaded (that has an attachment type of IMAGE)

• For the File Path upload the smaller version of the image

Here is what a pair of these images would look like in the administrator:

Note that they must have the same name, and the smaller image's attachment type is THUMBNAIL while the other is IMAGE. With these two records set up, the system will look for a THUMBNAIL attachment with the same name as the IMAGE attachment. If it finds one, it will use it for the thumbnail under the product's medium image on the product page. Then when it's click it will display the other image with attachment type IMAGE.

Adding YouTube Videos to a Product's Lightbox

In addition to images, the system supports attaching YouTube videos to each product. When you do this, a thumbnail for the video appears under the medium product image:

When the customer clicks on the thumbnail, the product's 'lightbox' popup appears and the full-sized version of the video shows up. The customer can then click to play the video right there in the lightbox:

Remember, the lightbox is scrollable. The customer can use the arrows in the corners to scroll through the product's large image, and any additional images that have been upload.

To add a YouTube video to a product page, create a new Product Setting under the product. From the product's three-dots menu, select Product Settings:

Then click the plus icon to bring up the product setting add form:

• For the Name field, enter the name you wish to appear below the full-sized version of the video that appears in the lightbox popup

• You may leave the code field blank and it will be generated from the name

• For Setting Type, enter the word "VIDEO"

• For Value Type, choose Medium Value

• For Description, you can optionally enter a caption that will be appear under the thumbnail of the video on the product page

• For Setting Value, enter the 'share' URL for the YouTube video. To find this URL, on the main page for the video on YouTube, click "Share":

  

Note: as an alternative you can also embed YouTube videos into the description field of the product. To do this, follow the guidelines in Embedding YouTube Videos.

Adding Downloadable Files for a Product

Separately from images and videos, you might like to upload other types of files, such as user manuals, for each product, for customers to download. You can do this too!

The downloadable files appear in a separate section of the product page below the product's description called "Files":

To upload files to appear in that section, simply create a Product Attachment under the product whose attachment type is FILE.:

• Make sure the Attachment Type is FILE

• Enter the linked text that appears under the Files section of the product page into the Description field

• To upload a file, click Choose File or Browse under the File Path field

• Optionally, if you have already uploaded the file somewhere, you may type or paste the URL into the File Path field

• You can typically leave the Mime Type field empty - the system will populate it from the file.

Images for Attribute Options Under a Product

If you have a product with options under it that the customer can select from, it is also possible to upload an image for each option. This can help the customer see what each option they are selecting from looks like. Here's an example of where the option images appear on the product page:

When a customer clicks on one of the option images, if a large option image has been defined, a 'lightbox' popup will appear allowing the customer to scroll through each of the large option images:

Uploading and Maintaining Option Images

Follow these steps to set this up:

• First and foremost, for option images to appear you should set the parent attribute's Display Type field to "RadioButtons". In the default set of templates, option images are only shown when the options are rendered as radio buttons (it's hard to show images in a drop down menu). In the above example, the attribute is named "Surf Sandal Color" so for that attribute, we chose RadioButtons as the display type:

  

• For each option under the attribute that you have an image for, all you typically have to do is use the large image field to upload an image:

  

• By default the system is set up to automatically resize option images just as it does for product images. So if you upload the large image, it will automatically generate the medium and small images. However if you have the 'Automatically Resize Images' setting disabled, you should generate your own small image and upload it using the Small Image field.

• Important: for the feature to work, a small image must be present. The large image is actually optional, but it will be shown in a 'lightbox' popup when the customer clicks the small image. Note, in the default templates, the medium image is not used but it does no harm to populate it.