Image sizes and dimensions
Guidance and advice on recommended image sizes and proportions for optimal display across all sections of your website.
Last updated
Code Nation
Candidate (English)
Guidance and advice on recommended image sizes and proportions for optimal display across all sections of your website.
Last updated
You can optimise your images using tinypng.com before uploading them to your site.
These are the photos you can upload to a page under "Settings" > "Featured content sliders". They appear at the top of the page as a header image (or a slider of header images when multiple are uploaded).
We recommend using 1800 x 600 (i.e. an aspect ratio of 3:1). That said, there is no hard limit or required proportions for these images, so some general rules to follow for optimal display are to ensure:
a minimum width of 1800px (to guarantee sufficient resolution)
an aspect ratio between 3:1 and 2:1 (i.e. landscape photos at least twice as wide as they are high, and not more than three times as wide as they are high)
a uniform size for all header images on the page (i.e. cropping all the photos in your featured content slider to a consistent aspect ratio before you upload them). This ensures a smooth transition between featured content slides if you are using the carousel feature.
These are the photos that appear automatically when showing a stream of subpages or posts on a page (e.g. in the Latest News section or when using the Show Subpages feature).
We recommend using image dimensions as recommended by Facebook. Currently Facebook recommends 1200 x 630px. You can upload these images by navigating to the relevant page in the backend and selecting "Settings" then clicking "Social Media".
Note that on redirect pages, you can navigate to the Social Media settings by going to the page settings, and clicking on the thumbnail image that appears underneath the page name. This will be the site logo by default (i.e. clicking the Candidate logo in the screenshot below)
These are the images that appear when using the Show Profile feature
For optimal display, we recommend using square profile images. You can crop your photos to ensure consistent proportions before you upload them to each profile page in “Settings” > “Social Media”. To ensure sufficient resolution, we recommend using images that are 800px wide by 800px high.
This category refers to any images you wish to add through NationBuilder's content editor (also known as the "WYSIWYG" editor).
You can add photos to the content of any NationBuilder page using the image upload tool visible in the screenshot below. The size, spacing and display of these images is controlled by the settings you apply through that content editor, rather than any styles in the theme. You can also click and drag to resize the image once you've uploaded it, just like in this example gif.
When adding images to a page's content, you should always set the image height to 'auto', as shown in the screenshot below. This ensures that the image's height will resize on smaller screens, rather than maintaining its height and appearing distorted and overly large.
Responsive/fluid-width images
One option you have is to set your image sizes to be "fluid" or "responsive" by applying a percentage width, rather than a fixed pixel width. You can also then allow the height to be determined automatically based on the natural proportions of the image.
For example, you may wish to set your images to span the full width of the content section on any device, which is best suited to images with a landscape orientation (i.e. more wide than tall). You can do this in the content editor by selecting the image and clicking the "Insert/edit image" icon in the editor toolbar (labelled "1" in the screenshot above). In the edit dialogue simply enter a width of 100% and a height of auto in the fields labelled "Dimensions". If you decide to display an image at 100% width you should ensure the file you upload is at least 1400px wide to look great on all screen sizes. The screenshot below shows those example settings:
For more complex requirements, you can open the "Advanced" tab within that "Insert/edit image" dialogue to enter vertical or horizontal spacing or even CSS styles.
Image alignment
NationBuilder's WYSIWYG implementation provides a useful option to align images to the left, right or center of the page content. You can see those icons in the editor toolbar.
It's also possible to float images so they sit alongside the text on your page. However, those float options used to wrap text around images generally don't work smoothly across screen sizes and can lead to poor results on smaller devices, so make sure to run a thorough review if experimenting with those options.
Further information and support
Given the size, spacing and display of these content images is controlled by the settings you apply through the NationBuilder WYSIWYG not the Candidate theme, please review the following NationBuilder documentation for more information:
