Okendo

Banner images can be uploaded for quizzes to customize the styling of the Intro, Questions &amp; Recommendations pages. There are two layout modes and three image positions available to adjust the images to match your store's layout guidelines.

To add header images to a quiz, follow the below steps:

Edit a quiz and navigate to the Configure tab.

Expand either the Intro, Questions or Recommendations Page sections depending on where you would like the header image(s) to display.

Upload an image in one of the accepted formats: JPG, JPEG, PNG or GIF. The recommended width is less than 2,400px. 

1. Logo - The images will maintain their aspect ratios and scale up to the minimum width between the image's natural width and the maximum width value provided. Best suited for brand logos.
 
 
 
2. Banner - The images will maintain their aspect ratios but will be resized to fit the container height. The container height is determined by the quiz height multiplied by the smaller value between the image's natural width and the provided maximum width. Best suited for rich banner images related to the quiz's content.

1. Image Above - The header image will be displayed above the quiz's content. Landscape images work best for this position. 
 1. Max Image Height - Set the maximum height for the image as it scales depending on the screen size. 
2. Left of Content/Right of Content - The image will be displayed to the left or right of the quiz's content. The image will usually display above the quiz content on smaller screen sizes such as mobile devices. Portrait images work best for this position. 
 
 
 1. Image Width Measurement - Choose between Pixels &amp; Percentage. Pixels will set a fixed maximum width and scale the image depending on the screen size whereas Percentage will set what proportion of the screen should be taken up for each screen size.
 2. Max Image Height (Narrow) - If the image width is set too wide for the layout, the quiz content will collapse under the header image. This setting controls the the maximum height of the image when the layout is collapsed.

Once the images have been uploaded, test the quiz in various screen and window sizes to ensure they scale as expected.

1. Edit a quiz and navigate to the Configure tab.
2. Expand either the Intro, Questions or Recommendations Page sections depending on where you would like the header image(s) to display. 

3. Upload an image in one of the accepted formats: JPG, JPEG, PNG or GIF. The recommended width is less than 2,400px. 
4. Select the image layout:
 1. Logo - The images will maintain their aspect ratios and scale up to the minimum width between the image's natural width and the maximum width value provided. Best suited for brand logos.
 
 
 
 2. Banner - The images will maintain their aspect ratios but will be resized to fit the container height. The container height is determined by the quiz height multiplied by the smaller value between the image's natural width and the provided maximum width. Best suited for rich banner images related to the quiz's content. 
 
 
5. Select the image position:
 1. Image Above - The header image will be displayed above the quiz's content. Landscape images work best for this position. 
 1. Max Image Height - Set the maximum height for the image as it scales depending on the screen size. 
 2. Left of Content/Right of Content - The image will be displayed to the left or right of the quiz's content. The image will usually display above the quiz content on smaller screen sizes such as mobile devices. Portrait images work best for this position. 
 
 
 1. Image Width Measurement - Choose between Pixels &amp; Percentage. Pixels will set a fixed maximum width and scale the image depending on the screen size whereas Percentage will set what proportion of the screen should be taken up for each screen size.
 2. Max Image Height (Narrow) - If the image width is set too wide for the layout, the quiz content will collapse under the header image. This setting controls the the maximum height of the image when the layout is collapsed.
6. Once the images have been uploaded, test the quiz in various screen and window sizes to ensure they scale as expected.