Image Sizes

All you need to know about adding images:

Below is all the information on the different types, size and places where you can add images to the builder and where they show in your STQRY app.

Please note that we resize the image for the display on our end - you don’t have to make them smaller before upload. 

Collection Places Images

 Background Image:

Located in a collection list where the header layout is set to Background/logo. It shows in the collection list at the top of the screen. The aspect ratio is 16:9. Please note that this image scales depending on the screen size and can get cropped on larger screens. So it's best to add any text to the logo image or if you do have text on the background image then make you have a sizeable border for any cropping that may occur.

iVBORw0KGgoAAAANSUhEUgAABS0AAAo4CAYAAAC8JoK_AAABgmlDQ1BzUkdCIElFQzYxOTY2LTIu-2_3.PNG

Logo (Optional): 

Located in a collection list where the header layout is set to Background/logo.It shows in the collection list at the top of the screen. The logo is overlaid on the background image. The logo doesn't have an aspect ratio. It takes up 30% of the height. So you can upload a wide image and it will expand to the right. The image can be solid or have a transparent background. Adding a logo is optional.

 iVBORw0KGgoAAAANSUhEUgAABS0AAAo4CAYAAAC8JoK_AAABgmlDQ1BzUkdCIElFQzYxOTY2LTIu-2_3.PNG

Collection Tour Images

Tour Large

Located in a Collection Tour where the layout. It shows in the tour overview at the top of the screen. The aspect ratio is 16:9

iVBORw0KGgoAAAANSUhEUgAABS0AAAo4CAYAAAC8JoK_AAABgmlDQ1BzUkdCIElFQzYxOTY2LTIu-2_2.PNG

List Large

Located in a Collection List where the list layout is set to Wide List. The Wide list has wider icons in a single list. It shows the icons in the list overview screen. The image aspect ratio is 4:3. If no i is added it will be show as a blank greyish icon.

 Screen_Shot_2020-08-27_at_14.12.55.pngiVBORw0KGgoAAAANSUhEUgAABS0AAAo4CAYAAAC8JoK_AAABgmlDQ1BzUkdCIElFQzYxOTY2LTIu-2.PNG

 

List Square

Located in a Collection List where the list layout is set to Grid List. It shows in the tour overview at the top of the screen. The image aspect ratio is 4:3

Screen_Shot_2020-08-27_at_14.07.18.pngiVBORw0KGgoAAAANSUhEUgAABS0AAAo4CAYAAAC8JoK_AAABgmlDQ1BzUkdCIElFQzYxOTY2LTIu-2_4.PNG

Menu Icon

Located on the Screen Story options page the square icon is for the menu. It shows in the tour stop menu list. The image aspect ratio is 1:1

 

iVBORw0KGgoAAAANSUhEUgAABS0AAAo4CAYAAAC8JoK_AAABgmlDQ1BzUkdCIElFQzYxOTY2LTIu-2_5.PNG

 

Gallery Image

Located on the Screen Story page when you add a + New Item. It on the tour stop page. There is no aspect ratio for the gallery images but they are scaled proportionally to fit the space.

iVBORw0KGgoAAAANSUhEUgAABS0AAAo4CAYAAAC8JoK_AAABgmlDQ1BzUkdCIElFQzYxOTY2LTIu-2_2.PNG 

Ratio reference:

  • A common 1:1 ratio is 1080 x 1080 pixels.
  • A common resolution in the 4:3 ratio is 1024 x 768 pixels.
  • Common resolutions in the 16:9 ratio are 1920 x 1080 pixels and 1280 x 720 pixels.

 

 

Was this article helpful?
1 out of 1 found this helpful