In the old homepage editor, each theme had different image dimensions for various sections like the project tiles, banners and other sections. When changing to a different theme, the images had to resized or they would appear squished or stretched.
With the new Appearance editor, there is no need to have different images for the various templates. All the images uploaded will automatically adjust to the required dimensions. This has been added to ensure there is a seamless switch between various templates available with the Appearance editor. It is now possible to simply switch templates and upload the images without having to frantically worry about changing the dimensions for the new template.
Another new option available with the appearance editor is to edit these images. You can crop, cut, or resize these images within the editor.
These are the various options present while editing the images on Appearance editor.
Another option while uploading images is the Images by Unsplash. This is a collection of millions of images which can be used by you for the banner, project tiles, and other sections of the home page.
With this option, you can access to a large collection of various type of images which can then be used on your site. Simply click on Images by Unsplash, search with the relevant key word like for ex. Sydney. You will be presented with a lot of images which you can select for the various sections of the home page.
Image sizes on project pages
Images on the project pages will not be affected with the appearance editor or changes made to it.
A project image can be of any height and maximum width of 700 px. Anything larger than this will be automatically resized.
Favicons are tiny. We recommend you use a png file with transparent background that is no larger than 15 by 15 pixels.
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
All images are responsive and will change their size according to the screen they are looked it.
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
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.
- Custom widget best width: 320px
- FAQ. max width: 1110px
- Photo library. best width: 1120px
(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.
Who's Listening widget
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.