Following the "Shedding light" aesthetic theory, backgrounds, flows and photographs can give pages, blocks and posts a unique impact.
Using a diagonal flow as a tool, our new design connects PEOPLE and ISSUES. These diagonals are like beams of light illuminating a story or an issue that drives the user to explore or act. In poetic terms, think of it like beams of light glistening underwater or the way light filters through the trees in a forest.
We call this design solution, Shedding Light. Greenpeace sheds light on the issues and we as people take action. For Planet 4 we have the same general requirements as for the rest of the organisation. i.e. –
We need related images to be provided in Wide Web format. (1920 x 1080). We can downsize from there.
|Image Type||Mobile||Tablet Portrait||Tablet landscape||Wide Web|
|Carousel – header||360px x 510px|
Ratio : 2/3 (30px bleed/cut-off vertical)
|770px x 760|
Ratio : 2/2 (10px bleed/cut-off horizontal)
|1024px x 760|
Ratio : 4/3 (8px bleed/cut-off horizontal)
|1440px x 775|
Ratio : 16/9 (25px bleed/cut-off vertical)
|Thumbnails / featured images (Articles)||330px x 240px|
Ratio : 4/3 (7.5px bleed/cut-off)
|270px x 194px|
Ratio : 4/3 (8px bleed/cut-off vertical)
|230px x 220px|
Ratio : 5/4 (12px bleed/cut-off vertical)
|350px x 230px|
Ratio : 3/2 (3px bleed/cut-off vertical)
|Image Carousel||360px x 240px|
Ratio : 8/6 (7.5px bleed/cut-off)
|770px x 497px|
Ratio : 6/4 (16px bleed/cut-off vertical)
|1024px x 655px|
Ratio : 3/2 (27px bleed/cut-off vertical)
|1106px x 714px|
Ratio : 16/10 (25px bleed/cut-off vertical)
All P4 sites come with a WordPress Media Library, from which (when logged in) you can manage Images and Videos in both List and Grid views.
Go To Admin > Media and enjoy the magic!
Our in-house made P4 plugin allows P4 connection with the awesome Greenpeace Media Library. When you receive both Staging and PRODUCTION sites, the plugin is already configured and working with standard API credentials. More info in Set up the P4 Settings.
|== PLEASE READ ME == |
The Greenpeace Media Library grants image access to Greenpeace staff based on the following guidelines:
To add Greenpeace Media Library images to a P4 post or page, click “Add Media” in the edit mode.
On the left side, click “GPI Media Library”
PLEASE NOTE: for a couple of seconds, nothing may appear while the site communicates with the GP Media Library.
When images show up, type what you want to search for in the field. If the image you are looking is not there, you can load more results by clicking on “Show More Results”
When you find the image you are looking for, select it, and click the “Insert into WP media and post“. The image size imported may arrive with up to a maximum of 2500 pixels width, but it usually gets resized to 1200 pixels width, enough for most graphic needs.
Once inserted into “WP media and post”, that image exists in your normal P4 WordPress media library. If you want to use it again, you don’t need to search for it again in the GP Media Library. Size-wise, imported images won’t get larger than 1MB.
|== IMPORTANT == |
Original images uploaded from the Greenpeace Media library are not re-touched or modified. Multiple thumbnails are created for various usages though. In most places in the html code you can see a tag srcset that has multiple versions of the same image, so in any device an image is used in the correct size.
P4 image automatic compression (Option #6 of this github tests) works this way:
Image URL-wise, each P4 image will have 2 types of URLs:
We are working to remove the attachment page URL, which seems to be a WordPress standard feature, but de facto creates pages each time we upload an image. Annoying.
In v2.49 a “lightbox” solution was adopted. When clicked, all P4 images are now displayed by filling the screen and dimming out the rest of the web page.
Whether a JPEG (or JPG), PNG or GIF, large images take longer to load and can slow down your site. By large, we refer to file size rather than to the dimensions of an image, i.e. the value in KB, MB, GB etc.
Optimizing images means resizing the image file size without impacting the image quality.
To optimize your images:
1) Save the right dimensions
2) Save Images for the Web
3) Compress images for the Web with online tools
For content images the max width is 1140px. To ensure quality please supply images with a width of no less than 1140px. An ideal width would be 1440 pixels to allow for any minimal cropping.
Applicable to Default, #Tag, ISSUE and evergreen pages, backgrounds allow you to create context for the page, forming a foundation for the content to sit upon. That’s why a background image should always say something about the page’s subject matter.
As a rule, the image component of the background forms the top third. This then fades into the background colour. The default is white #FFFFFF. The next layer up is the diagonal gradient.
The diagonal line creates the rays of light graphic. This is set so readability always works.
It may happen that you will notice additional space beyond the footer. This is due to a combination of an image with excessive height (e.g. 3000px or above) coupled with a lack of content to make up for all of that space.
When using an image of great height, please consider the use of blocks (gallery, video, happy point, etc), this would avoid the background extending beyond the footer.
Recommended fixes if the background image extend beyond the footer:
The main difference between Take Action pages and all other pages (see above) is that Covers (see below) dictate the background.
This means that whatever you choose as the background for your Take Action Page MUST be also the featured image. That’s it, really. Why? For functionality reasons.
The standard set of backgrounds follows the naming convention:
To upload the standard set of P4 Backgrounds:
Planet 4 has ‘engage’ as one of its core tasks. We want supporters to feel empowered. This is why we create a space called ‘Act’ where they can quickly choose stories to Take Action.
Each Take Action page has a “Take Action Cover”. Just like traditional book covers, they have titles and a strong cover image, inviting users to “discover” the action. On rollover of the cover, they reveal a summary of the Action and a “Call To Action” button becomes illuminated.
As mentioned before, Covers dictate the Take Action page background, and can either be illustrations (download the standard set) or photographs.
We explored just having them as enter on click and losing the rollover, but we felt that the sense of discovery encouraged engagement and reduced the amount of impact and “noise” on the page. More info on Block: Take Action Cards
The super cool Block: 4 columns allows you to select a series of icons and manually determine navigation using visuals.
When choosing images for your Home page carousel header, you should look for engaging images that not only reflect the issue but also people taking action. The point of focus should be central or on the right hand side. When choosing groups of images, try to balance the environment vs people. Organise them as alternates, for ex environment > action > environment > action
For Carousel header images our max width is 1920px. To ensure quality, please supply images with a width of no less than 1920px. An ideal width would be 2500px to allow for any minimal cropping.
Captions are placed at the bottom of the image. There is a maximum of 3 lines of text. The padding around the text establishes depth. More on Block: Carousel header
Use a set of High Quality images (access a set of P4 HQ Images with captions and credits) to convey high quality content, such as a picture of the amazing Greenpeace Ships. More on Block: Gallery
To ensure quality, please supply images with a width of no less than 1140px. An ideal width would be 1440 pixels to allow for any minimal cropping.
For Publication posts (see Post vs Pages for more info), the max size is 255px x 363px.
To ensure quality when deciding to use the Block: articles and listing all publications related to the same #Tag, please supply images with a width of no less than 255px.
Here’s what a list of publications using the Block: articles looks like when featured images have the right sizes. Not bad, right?
Thumbnails are related to the Search results and the sizes of in-page images.
For Search results, Pages and Posts Thumbnails are determined by the Featured Image. These are automatically cropped and resized with a 150px x 150px ratio.
For in-page image sizes, the default sizes are:
As a P4 Administrator, you can change those sizes in P4 > Settings > Media
Max width is 1920px. Minimum width is 1750. To ensure quality, please supply images with a width of no less than 1920px. An ideal width would be 2500px to allow for any minimal cropping. More in Block: happy point
Due to their complex nature, Infographics often have different versions for different media. The sizes are as follows:
Check this 2018 P4 Infographic with the right width, optimised for web (source files).
GIFs (Graphics Interchange Format) are super cool ways to display content. You can embed GIFs in P4 (here’s our giphy channel) just by pasting a GIF URL in the body. Just resize it to a maximum of 1140px, like the one below:
You can also upload a GIF in P4 (and still embed it just by pasting the GIF URL), but since the image size is 10MB, it cannot be a huge one.
Here’s an example of a GIF we created and uploaded in P4 (image size 9.6MB):
Need to produce Planet-4 related visuals for Engagement or project documentation? No problem, here’s the (public) Drive with all versions of the icons, logos and texts.
Planet 4 uses WordPress default settings for the favicon. And most sites use the rounded Greenpeace “G”, with green background (see below). See >> Set up the P4 Key Content for instructions on how to set it up in your P4 site.
Planet 4 posts and pages allow emojis. You can copy and paste them from any Emoji websites, like this one.
Our aspect ratio is 16:9. Our preferred video size is 720p : 1280 x 720
Formatting and sizes for Videos
As a rule, we build for social media and Youtube is our prefered video platform. With this in mind, we use a 16:9 aspect ratio in our video format. Try wherever possible to keep the resolution high. These are the sizes we recommend.
Please check the Design System here.