Skip to main content

How to use images

Here is some information about how to use images.

Content images​

Images that you display on a page or an article using a content card will never be cropped – it will only be resized to a certain width. This means it will always be displayed in its entirety. A few tips:

  • As a rule of thumb, resize images to a width of about 1600 pixels before uploading them to Wings.
  • You may optimize the file size further by using a service such as TinyPNG.

Campaign header images​

Campaigns (petitions, fundraisers, events and signups) may have a header image. It is important to understand the following:

  • part of this image will be invisible, as the campaign form will be superimposed on it;
  • the part that will be invisible will vary, based on the screen size /dimensions;

  • The same image will be used on the /confirmed/ page that users will see after clicking the confirmation link in the email they will receive
  • Generally speaking, the header image should be illustrative; it is best not to rely on it to display crucial information.
  • It is best to use an imag with landscape orientation, for example 1600 x 900 px.

Article header images​

Article header images have the same issue: their purpose is to fill up the entire browser window regardless of screen size or resolution, so a part of the image will always appear cropped.

This is by design – if you do not want to use it, simply do not set a header image. It is advisable not to rely on the image to display critically important visual content, as it may not be visible to some users, depending on their screen size & dimensions.

If you use a Nodes card to show a grid of pages, articles or campaigns, the featured image will be displayed:

The image displayed here will be shown as a card of 366 x 489 pixels, part of which will be invisible, as a rectangle with the title (and on hover, a description) will be superimposed on it. Wings will crop the image, but if you want to have full control over the image, use a 732 * 978 sized image, and consider that the lower part with a height of 338px will not be visible upon hover. You may also download this PSD template.