Adjusting Display Settings | PAPs User Guide (Premium Version)

Home

Documentation

PAPs User Guide (Premium Version)

Adjusting Display Settings

Main Menu

PAPs Addons

Help Desk

PAPs on Twitter

follow PAPs on Twitter

Adjusting Display Settings

After you have uploaded a set of images for at least one attribute, you can now make various adjustments to the way in which the images are displayed. To make adjustments for images already uploaded for a different product simply select the product from the dropdown menus at the top of the screen.

You should now see the Current Images section, which has the heading: 'CURRENT PRODUCT ATTRIBUTE PICTURES FOR: ' followed by the product name and model number. Below this you will see the following product-level options:

Ignore Product Attributes (Yes/No):

'Yes' (default): your pictures will be displayed in the product info page even if you have not set up any attributes for the product via the 'Products Attributes' section of the Admin component. In effect, this means that you can add images that are unrelated to specific product attributes to the product info page.
'No': your pictures will only be displayed AFTER you have set up corresponding attributes using the 'Products Attributes' section of the Admin component. In this mode, you will have the option to show the price differential of each attribute value below its picture. You will also be able to allow customers to select their desired attribute using radio buttons below each picture. Please note, the Attribute Value and Attribute Names you use when uploading the image files must exactly match those that you set up in the 'Products Attributes' section.
NB - This setting applies to ALL pictures associated with the selected product.

Enable Tooltips (Yes/No):

'Yes': you will be able to add and edit attribute-value-specific (i.e. per thumbnail) tooltips to each image. Tooltips can be added to both PAPs-only or native attributes as required. When set to 'Yes', a column entitled 'Tooltip' will appear in the attribute-specific table below. Click on the icon corresponding to the specific attribute value to add/edit tooltip information. You will also be able to edit a variety of display settings to better integrate the tooltip display with your webpages by clicking the 'Configure Tooltips...' link next to this setting.
'No' (default): this setting will disable tooltips and hide the tooltip configuration link.

Show PAPs in Cart (Yes/No):

'Yes': if the user selects an attribute via a PAPs radio button (or if the default osCommerce dropdown box is used for the selection of an attribute which also has a PAP associated with it) and adds the item to the cart, the attribute picture will be displayed in the shopping cart instead of the default product picture.
'No' (default): the default osCommerce product picture will be displayed in the cart regardless of which product attribute (if any) has been selected by the user.

Enable Linked Attribute Pictures (Yes/No):

This feature is useful if you want users to be able to click on pictures from various attribute sets and instead of seeing pictures individually related to the attributes from each group, they see a representation of ALL the attributes that have been clicked from the various sets in one picture. So for example if they click image: 'Size:Small' and then click image: 'Color:Blue', they will see an image of a small blue product. For more information on linked attribute pictures (LAPs), see the Linked Attribute Images article.

Enable Selected Image (Yes/No):

If you want to have a vanilla gallery without using a separate larger image area to display clicked thumbnails, set this to 'No'. You can still use one of the Javascript popups in the 'Popup Type' dropdown if you want to enlarge your pictures that way.

Preload Selected Image (Yes/No):

With this option set to 'Yes', all enlarged images will be preloaded into the browser using Javascript, so that when the user activates a thumbnail in order to produce the enlarged image, the enlarged image will be displayed immediately. This option works best for relatively few numbers of images (roughly up to 30-40) per page, depending on the size of the enlarged image. It does not apply to images displayed via Javascript popups. The setting should be 'No' if you are not planning on using selected images.

Viewing Area Title:

Edit this textbox to change the main heading for PAPs viewing section on your product information page. This textbox will be reproduced for all the available languages in the store.

Viewing Area Subtitle:

Edit this textbox to change the text below the main title. This could include a brief instruction for users on how to use the viewing area. This textbox will be reproduced for all the available languages in the store.

Main Image Title:

Edit this textbox to change the text which will appear above the enlarged image which the user has selected. If you check the 'Use Option Name' checkbox next to the text box, the title of the selected (main) image will automatically revert to the attribute value whose thumbnail the user has selected. This textbox will be reproduced for all the available languages in the store.

Thumbnails Position:

Choose the appropriate layout for the viewing area on the product information page. Thumbnail positions are relative to the enlarged 'selected image' display area. If this is disabled via the 'Enable Selected Image' setting, this setting will become redundant and therefore hidden.

NOTE - If you want to enable the 'Detach From Enlarged Image' option, please ensure you have followed the additional installation step in the Optional Installation Steps section of the Installation Guide.

Overflow Panes:

If you have many pictures to display but don't want your visitors to have to scroll up and down the page in order to first select, then view the enlarged thumbnail then you should use an overflow pane. This is in effect a separate 'window' inside the web page the dimensions of which you can set. Thumbnails will be displayed inside this area and scrollbars added to the area as more pictures are added. This allows users to view all your pictures by scrolling the window (overflow pane) instead of the entire page.

Enlarge Thumbnails By:

This option is only available if 'Enable Selected Image' is set to 'Yes', since the 'selected image' is the enlarged image. You can choose the manner in which users choose to have a thumbnail enlarged in the 'selected image' area.

Popup Type:

If you want the user to have a choice of viewing an even larger image of the selected attribute picture as a popup, here you can choose the method by which the popup will be rendered. Please note - even if you have selected one of the viewers from this list, the user will only be able to activate the selected (enlarged) picture and view the popup if the image file you originally uploaded as the product attribute picture is larger than the selected (enlarged) picture. The PAPs system automatically calculates if the uploaded file's image size is larger than the enlarged picture, and creates a link to the popup if this is the case. For more information on the various viewers you can choose from, see the Popup Viewers article.

Popup Type - Create Gallery:

Some popup types support the automatic creation of image galleries which can be navigated within the popup itself. The implementation of each popup's gallery is different but generally they all include a 'previous' and 'next' button for users to change the popup image without having to click PAPs thumbnails or enlarged images.

Popup galleries support either swatch or non-swatch picture sets, or a mix of both. The popup viewers which support gallery creation are: Thickbox, Colorbox, GreyBox, Lightwindow, Fancybox and Slimbox. The 'Create Gallery' checkbox will only appear if one of these viewers is currently selected.

NOTE: if 'Enable Selected Image' is set to 'No' and a Popup Type has been selected, users will be able to activate the popups from the thumbnails themselves.

Image Effect:

PAPs includes a rich set of effects you can apply to your thumbnails, regardless of their size. They are applied across all image sets on a per-product basis. Available image effects are:

Curved Buttons - Makes rounded edges for your thumbnails.
Apple Cover Flow - Presents your thumbnails using the popular Cover Flow layout.
Shaded - Adds a shadow behind your thumbnails to make them look like they are lifted off the page.
Curled Corner - Creates a 'dog-ear' on the bottom-right corner of your tumbnails. Only applicable to one image set per product.
Blurred Edges - Adds a smoked-glass finish and slightly rounded edges to your thumbnails.
Film Roll - Frames your thumbnails within old-style film.
Shiny Buttons - Rounds the corners and applies a shine to your thumbnails.
Polaroids - Presents your thumbnails as old-style instant photos. Only applicable to one image set per product.
Photo Slides - Puts you thumbnails in old-style slide frames.

NOTE: Image effects cannot be applied to the enlarged image or Javascript popup images.

Beneath these settings, you will see one column of settings for each product attribute name that you have already uploaded pictures for. Each column consists of the following:

A 'Current Product Attributes Pictures' table -

This table shows which pictures representing attribute values (e.g. Nylon, Cotton etc.) you have already uploaded to the server, and the attribute name (e.g. Material) with which they are associated. You can also view or delete any of the pictures via this table. The fields in this table are:
- Group Name - The name of the generic group of pictures to which the group values (i.e. the names of the pictures in the group) belong.
- Group Value - A list of all the group values (i.e. names) currently associated with the group name. If 'Ignore Product Attributes' is set to 'Yes', an icon will appear next to each group value which will allow you to edit the value however you wish.
- Attribute Price - Displays the price differential of the attribute relative to the default product's price. This field will only be displayed if 'Ignore Product Attributes' is set to 'No' and 'Display Attribute Prices' is set to 'Yes'.
- Tooltip - This field displays icons which when clicked next to the desired attribute value will show a text area containing the current tooltip content. You can add extra information about each individual attribute value. It is also possible to add HTML tags within the content to further enhance the presentation of your tooltip if required. Please avoid using double quotes in your content because this may cause the tooltip feature to malfunction - single quotes or apostrophies are fine. Click 'Update' to save your changes. All changes made will be instantly accessible in your storefront once you refresh your product_info page. The 'Tootltip' field will only be displayed in this table if 'Enable Image Tooltips' is set to 'Yes'.
- View - View the uploaded image for a particular group value. This field is displayed for all non-swatch picture sets.
- Swatch - View the swatch (thumbnail) image. This field will only be displayed if the attribute set has been set up as a swatch.
- Enlarged - View the enlarged image associated with the attribute option swatch. This field will only be displayed if the attribute set has been set up as a swatch.
- Sort - Here you can change the position of the thumbnails as they are displayed in the product info page.
- [ICON] Delete - Check the box if you wish to delete a particular group value, then click 'delete' below.
NB - The fact that your uploaded pictures appear in this table does NOT necessarily mean that they are currently being displayed in the product info page.

Display Group Name:

'Yes' (default): the group name (general heading e.g. Material, Size etc.) will be displayed above the group of pictures showing the different attribute values.
'No': the attribute name is hidden.

Display Group Values:

'Yes' (default): the group value (specific title e.g. Cotton, Large etc.) will be displayed below each attribute value picture.
'No': the group value (i.e. name of the picture) is hidden.

Display Attribute Prices (only available if 'Ignore product attributes' is set to 'No'):

'Yes': the price differential (e.g. +$2.00, -$3.50) will be displayed below each attribute value picture.
NB - the price differential should already be set via the 'Products Attributes' section.
'No' (default): the price differential is hidden.

Allow Attribute Selection: (only available if 'Ignore product attributes' is set to 'No'):

'Yes': a radio button will be displayed below each attribute value picture. Customers can select which attribute value they would like to purchase by clicking on the radio button. When the item is added to the shopping cart, the attribute value will be added to the cart, together with the price differential. The standard Product Attributes dropdown menu for the attribute name will not be displayed.
'No' (default): the radio buttons will be hidden, and customers will use the standard Products Attributes dropdown menu to select which attribute value they require.

Select for Cart Using:

The method by which users will be able to select the attribute for inclusion in the cart.

Number of pictures per row:

Default: 3 - enter the maximum number of thumbnail pictures to be displayed per row next to the main selected picture frame.

Width of thumbnails (pixels):

Default: 80 - enter the width in pixels of each thumbnail (attribute value picture).

Width of selected pic (pixels):

Default: 300 - enter the width in pixels of the enlarged picture which displays the selected thumbnail.

NB - Only image widths can be set in order to maintain the aspect ratio of each image. You should always ensure that you upload pictures which are slightly larger than required because the system can reduce large images but will not increase the size of smaller images. Again, this is to maintain the quality of the image.