Shedding Light

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.


Sizes and ratio p/device

Image TypeMobileTablet PortraitTablet landscapeWide Web
Carousel – header360px 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 Carousel360px 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)

The P4 Media Library

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!


Images from the Greenpeace Media Library

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:
  1. All content is protected by copyright and must be credited
  2. The user agrees that the content of a photograph will NOT be changed, cropped or manipulated in any way
  3. The user may receive links to 2500 pixel still images and broadcast resolution video media releases for a 14 day period from initial release (30 days for video). As an authorized representative, users are allowed to grant usage directly related to Greenpeace campaigns on the following basis: no resale, no archives, editorial use only, not for marketing or advertising campaigns, credit line compulsory
  4. The user agrees that photos greater than 800 pixels will not be posted on any external website without the Greenpeace Media Library permission
  5. The user agrees to read and respect any additional restrictions displayed with an image (e.g. Credits obligatory, not to be inserted in publications etc.)

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.

Image storage, auto-compression and urls

The P4 setups use a feature called “Google Cloud Storage“. This means that P4 images are stored in Google Cloud, using a WordPress 3rd party plugin called wp-stateless. 

P4  image automatic compression  (Option #6 of this github tests) works this way:

This is an image automatically adjusted to 1024 px width, weighting 140 KB – still good quality but way lighter to load!

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.


Image optimization

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.

You can download a handy Photoshop action (.atn) created by our GP New Zealand colleagues, learn how to open ATN files or keep reading for tips.

To optimize your images:

1) Save the right dimensions

2) Save Images for the Web 

3) Compress images for the Web with online tools 


Columns usage of images

Content / body images

Applicable to Blocks Two Column, Split Two Column, Gallery, Four Column, Articles, Covers and generally to posts and pages bodies.

  • KEY INFO >>  The Maximum upload file size is 10 MB.

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.


Pages background images

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.  

  • KEY INFO >> For background images the minimum 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. For height, anything beyond 2500px should work for all graphic needs. 
Background image used in a Tag page – International website

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:


Take Action pages – backgrounds

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.

  • KEY INFO >> When setting up your P4 site, you should upload first of all the P4 Standard set of backgrounds, these are all at 1920px width for wide web.

The standard set of backgrounds follows the naming  convention:

To upload the standard set of P4 Backgrounds:

  1. Access the “Backgrounds” Drive
  2. Download all images in .zip format on your machine
  3. Go to Planet 4 PRODUCTION > Admin Menu > Media
  4. Upload the assets (please do not rename the “Out Of The Box” images you got from the “Backgrounds” Drive!)

Take Action pages – covers

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

  • KEY INFO >>  The “Featured Image” of the Take Action page determines the image of the Cards. In Take Action pages, background and featured image must be the same.
  • KEY INFO >>  The “Excerpt” determines the text that will appear when hovering over the Card itself.

Institutional icons (4 column block)

The super cool Block: 4 columns allows you to select a series of icons and manually determine navigation using visuals.

Institutional icons used in a 4 column block –  snapshot of the Hindi staging site.
  • TIP >>  Always make your institutional icons the same colour of the navigation, the flashy #074365 .

Carousel – Header (Homepage slider)

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.

Images

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


Image Gallery / Slide Shows

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.


PDF / Publication images

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.

  • KEY INFO >>  The “Featured Image” of the Publication post determines the image that will be extracted by the Block: articles

Here’s what a list of publications using the Block: articles looks like when featured images have the right sizes. Not bad, right?


Thumbnails / Featured images

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


Call to Action (Happy Point) images

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


Types of visuals

Infographics

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

GIFs (Graphics Interchange Format) are super cool ways to display content. You can embed GIFs in P4 (here’s our giphy channeljust 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.

  • TIP >> Do you need to upload your GIF but it’s bigger than 10MB? Try to resize it with online tools like Ezgif

Here’s an example of a GIF we created and uploaded in P4 (image size 9.6MB):


P4 icons

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.


P4 site favicon

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.


Emojis

Planet 4 posts and pages allow emojis. You can copy and paste them from any Emoji websites, like this one.

🕶🐸🐧🌈☀🌎🌍🌏💫🍄💐🐬🐋🦈🦍🦑🐶💚☢🏳️‍🌈🇺🇳🙏🙌💪🤙🖖🤟👌👾🤖👽👻👺👹😱🥶🥵✍


Videos

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.


Design Specifications : Captions

The design specification files for the image Captions are here


Templates & Links