Images will make or break your online engagement portal, so it's crucial that you have a good collection of images to support your projects.

Choosing images which show the people and places related to your projects is the best way to communicate your consultations to your community.

Use the wireframe you developed in your planning process to help you inform how many images you will require for your site.

If your site is on the new Appearance editor, please look into articles related to the Appearance editor.

Big cards: 750 by 750 pixel (Only for Whitehaven theme)

Small cards: 360 by 360 pixels in first design. There is an overlay of text which differs depending on the amount of text used. Take this into consideration when choosing your image. You can see what this looks like below.

LOGO - The homepage logo must be 350 pixels in width, but can be any height as seen below.

The height of logo on the navigation bar will be 50px, so it will squeeze the logo in the space to make it fit. It will probably end up with 35px width

(Please note - On Whitehaven theme, there is no logo on the homepage since its already listed on the Intro(freestyle widget). The logo dimensions apply only for project pages)

All themes features project banners now.

The site banner and any project banners in Torquay stretch across the entire screen. The banner is responsive which means that on large screens it will be appear higher than it does on smaller screens. 

The largest screens you would ever have to cater for are probably 1700 pixels wide. The majority of your visitors will visits the site on screens with 1300 pixels width and less (typical laptop). You can easily test this by manually changing the size of your browser window.

Therefore, there is no one best width, however, we recommend you go with at least 1300 pixels in width. It can be any height.

Slider images must be exactly 1140 by 360 pixels. There is an overlay of 380 pixels to the right of the image that can NOT be removed. Take this into consideration when designing your slider images.

Images in the freestyle description card would need to be 300px X 333px. Small cards: 360 by 360 pixels as per the Whitehaven template and the larger square tiles are also 750 by 750 pixels like Whitehaven.

This theme includes a site banner on the homepage which should be at least 1440px wide as it stretches across the entire width of the screen. Banners with width more than 8000px will no longer be supported on our platform.

The theme also includes a range of different card styles.

Below you can see the card styles for two in a row. You should make the images here 270px by 270px.

Cards that appear as three in a row should be 340px by 240px as shown below.

And finally, four in a row require the images to be 250px by 170px.

If you require to change your project to a different card style the first image you uploaded will be resized to fit the new dimensions. For this reason, it's best to retain the square image dimensions of the first example to get the best reframing of your image.

All themes features project banners now.

Favicons are tiny. We recommend you use a png file with transparent background that is no larger than 15 by 15 pixels.

News Feed

The thumbnails for your news articles need to be 200x150pixels. This is a 4:3 ratio, but for consistency and to make things easier we would stick to 200x150 always.

If you upload images into your forum tool, they will appear automatically as thumbnails. As long as you stick to a 4:3 ratio, your images will look acceptable.

The image in the news article itself is determined by the width of the article container which is 660px

On mobile

All images are responsive and will change their size according to the screen they are looked it.

There is one exception to this rule. The big card in Whitehaven is NOT responsive.

Banner

A banner should be a minimum 1440 pixels wide. You should set the fixed height that you would like to use for banners across your site. All themes features project banners now.

Images that are too small and don't meet the recommendations outlined above will get stretched and therefore might look blurry such as the image below.

Images that are too high for the box in which they appear will get cut at top and bottom.

Images that are too wide and too small in terms of height will get cut left and right.

If you are uploading images into the Photo Gallery widget, you can upload any size images that you wish. Recommended width is 1120 pixels.

The image gallery will display your original image and also convert your original image dimensions into a thumbnail image.

If you'd like to maximise the size of you images for the gallery we suggest making them at least 1080px wide with a height dimension of your choosing.

On project pages, images can also appear in the following three areas. The best image sizes for these sections are determined by the width of the image.

(image should be as wide as the container - Custom widget and Photo Gallery). 

Images in your project description can never be wider than 732px. That is the maximum width of the project description container and images will be sized down if they are too large. There is no minimum width, neither is there a maximum height. 

The recommended size for a team member photo is a square photo that is at least 200x200 pixels large. The corners will be cut out automatically.

NOTE: Any image you upload should never exceed 1MB. The larger the file, the longer it will take to load for visitors, especially on mobile phones and slower internet connections.

Images should always be uploaded as either JPG, GiFS or PNG files.

Learn how to setup your engagement team.