Image Guide

Your site is built with the premise of "mobile first": that means, unfortunately, that image sizes are not going to be be intuitive. Since mobile-first websites have to be both responsive (i.e. many different widths to many different form factors) and also high PPI (like retina), you need to be uploading images that are twice as large as you expect them to. Below is a guide for some common image uses.

Note: all image uploads are restricted to a maximum of 3000 pixels wide, 1600 pixels tall, and 1.5mb in filesize.

 

Background images:

Page Blocks, Sliders, and Forms: these content types can have background images that can vary widely in how they are displayed, as they will stretch and change depending on the content and the viewport.

Recommendation: 2160x1215 (16:9)

 

Album:

Albums have the ability to set an aspect ratio in the Grid view and thumbnail sizes and a maximum width when displayed as a slideshow. This page is an upload-and-go situation: you should upload the highest resolution you have, in the aspect ratio you have set.

Recommendation: 2844x1600 (16:9)
Recommendation: 2400x1600 (3:2)
Recommendation: 2133x1600 (4:3)

 

Badges

Badge images will get cropped and sized to the aspect ratio you have set, divided by the columns you have set, multiplied by 2 -- for retina. Confusing, we know!

Recommendation: 1600x900 (16:9)
Recommendation: 900x900 (1:1)

 

RSS Grid
Grid
Instagram

Grid background images will be set by their maximum width: the number of set columns divided by 1600 (the maximum displayed width) or the set breakpoint == whichever is greater, multiplied by 2 for retina. The heights are computed from the resulting width. RSS grid images get pulled from the wordpress's Featured Image, or the first image in the content body it finds. Instagram does it's own thing.

Recommendation: 2160x1215 (16:9)

 

Hero Image
Page Blocks
Slider

Entry images (not backgrounds) will display at the size you upload, divided by two, for retina, and then will center vertically in the space available for display (in a side by side situation both the image and the corresponding text both center vertically). All the following recommendations produce an image 400 pixels tall:

Recommendation: 1422x800 (16:9)
Recommendation: 1200x800 (3:2)
Recommendation: 1076x800 (4:3)

 

Blurbs
Testimonial

Entry images will display at the size you upload, divided by two, for retina, and then will center vertically in the space available for display.

Recommendation: 711x400 (16:9)
Recommendation: 400x400 (1:1)

 

Info List
Text Page

These are markdown-capable content types with simple responsive media queries. There is no server-side resizing of images other than what the browser does by default. Images added to Text pages get set to 50% of the width, and alternating images get shifted left and right as they fall down the page.

Recommendation: 2844x1600 (16:9)
Recommendation: 2400x1600 (3:2)
Recommendation: 2133x1600 (4:3)

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk