Web artwork

From Ecotopia Biketour Wiki
Revision as of 06:36, 27 December 2015 by Candid (talk | contribs) (Created page with "Here is an overview over which graphics exist and what details to pay attention to when creating them. == Website banner == Displayed on top of the website. The dimensions n...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Here is an overview over which graphics exist and what details to pay attention to when creating them.

Website banner

Displayed on top of the website. The dimensions need to be 900×250 px. Note that on the top left there needs to be a gap for the language picker (~115×45 px) and on the top right for the RSS and Facebook link (~110×45 px, note that they move down when you point the mouse at them).

Facebook cover

The Cover Photo is shown as the banner on the Facebook page. The dimensions need to be 828×315 px (otherwise it will be scaled and the text will look blurry. Facebook claims the dimensions need to be 851×315 px, but this is wrong), so in total it is less wide than the website banner. An area about 40 px high will be covered on the bottom due to the buttons, where the name of the page is written it will be about 60 px.

The profile picture is covering an area of about 185×140 px on the bottom left. Note that this part is not visible when looking at the page, but when clicking on the cover photo it will be visible.

Facebook event cover

Events also have cover photos, but those have different dimensions. The dimensions need to be 784×295 px. An area about 65 px high should be left free of text on the bottom of the photo, as there will be the name of the event.

Profile picture

This is the small square photo on the top left of the Facebook page. The photo must be at least 180×180 px, but will be scaled down to 160×160 px and 40×40 px on computers and 140×140 px or 50×50 px on phones. So it will always be scaled. Do make sure that it doesn't get blurry, it is the best to create it as 1120×1120 px, as that is the common multiple of 160×160 px and 140×140 px.

Currently we have a seamless profile picture, so the profile picture looks like it is part of the cover photo. To create that in Inkscape, set your document size to 160×160 px, paste your cover photo (dimensions 851×315 px) and put it to the position X: -20 px, Y: 23 px. When exporing it as a PNG, make sure to select “Page” under “Export area”, and setting the image size to 1120×1120 px.


The thumbnail is displayed when posting a link on Facebook. It is shown next to the page title of the link preview. Normally Facebook takes the first image it finds on the linked page and scales it to either 470×245 px (and then displays it as 470×246 px), or to 158×158 px. The details are described here.

For blog posts and pages on our website, you can manually define the preview picture by clicking “Set Featured Image” on the bottom right when editing a page or post. As we don’t want to do this for every post, and the first image that Facebook would find on a page without pictures would be the “Move Commons” logo at the bottom of our website, there is a default Facebook thumbnail set up. It is hard-coded into the theme, go to Appearance → Editor, select “header.php” on the right, and find the following line:

<link rel="image_src" href="https://www.ecotopiabiketour.net/wp/wp-content/uploads/biketour//2015/11/yellow-banner-2016_v1_facebook_thumbnail.png" />

The attachment page for the current one is here.