Item images should follow these guidelines:

  • Must be PNG, JPG or GIF
  • Item images should be a minimum of 255 pixels wide
  • Size is flexible BUT huge image files will slow down your site substantially - use 400 x 600 as a rough guideline
  • Recommendation: Save at 70 percent image quality - looks the same but loads up to 20 times faster

Thumbnails

Givecloud automatically manages your item image thumbnails for you. There is a new setting in Settings & Admin > Advanced for Image Thumbnail Size.

This setting allows you to modify the size of the item thumbnail image created for new images. It does not change the thumbnail size of existing images as the thumbnail images are created when product images are uploaded.

You can specify either or both of the thumbnail image width and/or height. The default value (300x?) sets the image width to 300 px and the ? allows Givecloud to choose the image height based on the aspect ratio of the uploaded image. Please note that if you set both the width AND height, Givecloud is forced to crop images based on the implied aspect ratio. If you decide to set both the width AND height, images will be automatically cropped to meet the implied aspect ratio (based on the stated height with respect to the stated width).

Examples:

300x? - fixes width at 300px, height variable
?x300 - fixes height at 300px, width variable
200x300 - fixes width at 200px and height at 300px and new images will be cropped if their aspect ratio does not match 200x300

Please Note: The typical default behaviour is to fix only the width and allow Givecloud to decide on the thumbnail image height based on the aspect ratio of the original image.

Images in Page Editor Templates

For any templates using images such as the 'cards' template where the image is at the top

The dimensions don't matter as much as just using images that are all the same size. This is because you can adjust the dimensions of the image in Givecloud to be 100% x auto, which means the image will adjust to be 100% width of the container/card that it is within, and the height will scale automatically according to the aspect ratio of the image.

For example, in this section I have used the '3 cards' template and have inserted three different images. All of these images are 600 x 400 and I have set the dimensions on them to 100% x auto which means they fit nicely within their container and are all the same height as seen below.

As opposed to if I upload one image that is a different size, for example 1440 x 809 which I then set to 100% x auto

For any templates where the image is set as a background, such as any of the 'Headline' templates or 'Content Feature', we recommend a minimum of 1920px wide and the height can be variable.

Did this answer your question?