Skip to content

Tips and Rules for adding Images

This article contains helpful tips, rules and best practices associated to inserting images into Tips, Popups and Carousels.

  • As a general rule - It is is better to upload higher quality (higher resolution) images than required. It is better to scale down the size of the image to fit into the tip etc rather than try to stretch the image to fit the required size.

  • An Image’s height and width can not exceed the containers maximum height and width. A container is defined by the outer edge of any tip, popup or carousel.

  • If no height or width is set for the image then the image will attempt to be displayed at original size.

  • An image will always retain it’s aspect ratio unless you set both height and width to a ratio different to the Images natural ratio.

  • By default if you only set an images height or width, the image will maintain its aspect ratio and be sized to the H or W that you set.

  • If you wish to change the aspect ratio of the image you can do so by setting the DP for both the height and width of the image.

  • The easiest way to make an image full screen in the container is to set the container DP (through appearance Tab) and the image DP the same. This way the image will display full screen in both landscape and Portrait mode.

  • If using percentages the same effect can be achieved but when a user changes from portrait to landscape the image and tip may get distorted due to the differences in resolution from portrait to landscape mode on mobile devices.

  • If you set an image DP over the size of the container then image will scale to fit the container.

  • If the user wants an image to be bigger than the container (so that some of the image is cropped), it is better to edit the image in an image editor then re-upload the image through our Dashboard.

  • If you set a container to have a corner radius and the image has also been set to full width or height of the container, the corners of the image will be cropped. See image below.