Wikivoyage:Banner Expedition

The Banner Expedition is a Wikivoyage Expedition to collaboratively develop and implement a page-top picture banner and horizontal Table of Contents for Wikivoyage guides. If you'd like to join the effort, please add your signature to the section below!

Rationale

Our default page layout has served us well, but it is not without its issues. The Table of Contents (TOC) can take up a lot of space and its placement can interfere with the layout of bullet points, pictures and text. Moreover our guides look kind of "texty", like an encyclopedia. The aim of creating a page-top banner is:

create a clean start to the page by having a lead image and horizontal TOC at the top before the article begins
make the first impression of our guides more eye-catching
give our guides a fresh and more modern look

The page banner can be much more than just 'decoration' for an article. The best banners offer a visual introduction to an area and challenge people's preconceived ideas.

Goals

The principal goal of the expedition today is to create a custom banner image for every article on Wikivoyage! See #Progress to get an idea of how close we are getting to this goal.

Other goals of this expedition are:

Incorporate on mobile site?
Spruce up breadcrumb trail & geo icon display
Other features that come up!

Expedition members

Shaundd (talk)
JamesA ^>talk
Traveler100
Curtaintoad (user · talk · contribs)
Nick (talk)
Peter ^Talk
PerryPlanet (talk)
PrinceGloria (talk)
Globe-trotter (talk)
Texugo (talk)
Peter (Southwood) ^(talk):
Massimo Telò (talk)
Jonboy (talk)
Epolk (talk)
TheChampionMan1234 (talk) 07:03, 1 September 2014 (UTC)[reply]
Missvain (talk) 04:25, 2 September 2014 (UTC)[reply]
Andrewssi2 (talk)
Hshook (talk) 13:44, 7 March 2015 (UTC)[reply]
ויקיג'אנקי (talk)
T.seppelt (talk)
Wauteurz (talk)
—Granger (talk · contribs)
MartinJacobson (talk)
Selfie City (talk | contributions) on February 12, 2019 UTC
Mbrickn (talk)
TagaSanPedroAko (talk)
SHB2000 (talk | contribs | meta.wikimedia)

Standards

How it works

The banner is displayed when the {{pagebanner}} template is inserted at the top of the page.
If only {{pagebanner}} is inserted, the default banner will display. Data will be fetched from Wikidata.
To display a photo in the banner, add the name of the photo. E.g., {{pagebanner | picturename.jpg}}
Other options are available to customize the appearance of the banner. These are discussed more fully at Template:Pagebanner.

Usage

Banners should be used on all destination guides, itineraries, phrasebooks, and travel topics, so the site has a consistent look and feel. They should not be used on project pages. If you want one for your user page, please use {{Userbanner}}.
Default banners are as follows (used automatically if you add the appropriate keyword, such as "Africa" for Africa south of Sahara, see the template page):
- File:Pagebanner default.jpg for anything not covered by another default banner
- File:Mena-asia_default_banner.jpg for Middle East, North Africa and much of Asia
- File:S-amer africa default banner.jpg for South America and much of Africa
- File:Caribbean default banner.jpg
- File:Australia-oceania default banner.jpg
- File:NZ default banner.jpg New Zealand
- File:TT Banner.jpg for all travel topics not covered by another default travel topic banner
  - File:Generic flying banner.jpg Travel topics related to flying
  - File:Default Scuba diving banner.JPG
  - File:Itinerary banner.jpg
The standard disambiguation banner File:Disambiguation banner.png should be used for all disambiguation pages.

Do not re-use banners for multiple articles, unless there is a consensus to make a special exception.

Malformed banners (too small or wrong aspect ratio) should be corrected or replaced, or the page tagged with {{crop}} so that they are categorized for maintenance. Banners can also be categorised on Commons with commons:Category:Wikivoyage banners needing resizing, and commons:Category:Wikivoyage banners needing renaming.

Image size

Banners have a 7:1 width to height ratio.
Banners need to be at least 1800 pixels wide to accommodate wide screens (images do not scale up to fit the size of the screen). The recommended dimensions are 2100 x 300 pixels.

Image sources

All images must be in the public domain or be CC-compatible. You can easily find a large-sized, properly licensed image that can be turned into a banner by using this search query (replace "Paris" with the article name).

Saving images

Banner images should be uploaded to Commons, in the appropriate subcategory of commons:Category:Wikivoyage banners; for Destination banners and Itinerary banners this is the geographic subcategory. Travel topic banners are in commons:Category:Wikivoyage banners of travel topics, and Phrasebook banners are in commons:Category:Wikivoyage banners of phrasebooks.

How do I help?

Creating a banner

To create a banner, first find a suitable image—there are many options on Wikimedia Commons. The full size image should be wider than 2100px, since the banner itself will need to be that width. Download the image and open it using GIMP (or another image editor of your choice). A simple online picture editor can be found at Pixlr.

With GIMP, Rotate the image if necessary to get the horizon level, using (Shift+R) or Tools->Transform tools->Rotate. crop the image using the crop tool (Shift+C) after setting the crop tool to a fixed aspect ratio of 2100:300 in the "tool options" window. (If you don't see the tool options window, click Windows -> Dockable Dialogs -> Tool Options.) When you have adjusted the image boundaries to your taste, hit enter to crop the image. Then click Image -> Scale Image and enter 2100 for width and 300 for height, then click Scale. Lastly, use File -> Export to save the cropped image as a jpg.

If you're on Mac OS X, you can use "Preview" to easily crop the images.

Banner file names

Nutshell: A banner file name is in three parts in ordinary text:; The required first part is the location name with optional clarification in parentheses, so we know where it can be used.; The required second part is the word banner; The optional but recommended third part is a short description of the image, so users can have some idea of what the banner looks like.; this is followed by the file type suffix, usually .jpg.

Banners for travel topics, itineraries and phrasebooks may use the same structure, or may be adapted as necessary. Try to follow precedent or create a more useful alternative.

Detail

Unless there are copyright issues, banner files are uploaded to Wikimedia Commons.
Location name is the name of the destination or region. It should be at city or district level if possible, or be the name of a national park or generally accepted name of a geographical feature when outside of a city. This identifies the lowest level article where the banner may be used.
If you think the location name is obscure or ambiguous, add a region and/or country name in parentheses directly after the location name as a disambiguator.
An optional numeral to distinguish the banner from other banners with similar names may be added at the end of the name. For example: London banner Thames 1.jpg, Western Cape banner Table mountain 3.jpg, etc.
The word Wikivoyage is not a standard part of the name. If you include it, put it just before the word"banner", ie. Wikivoyage banner. It does not add anything useful to the name, as the file must be categorized under commons:Category:Wikivoyage banners anyway.
Try not to use unnecessarily long or complicated names, and the use of punctuation. Use conventional spelling and separate words with single spaces.

Functions: Identifies a destination or region for which the banner applies.; Disambiguates or clarifies which particular usage of the name is relevant (if necessary); The word banner identifies the file as a banner and splits the name so that other language users can easily identify which part is the location identifier and which is the deacription.; Provides some description of the actual image. This should be provided in more detail in the description section of the file documentation.

The specified order of the components allows for easiest identification of usable banners for a given article, particularly where the language of the file name is not familiar to the user.

Examples: File:Perth (Scotland) banner Bridge over the Tay.jpg (Ambiguous destination: Scotland identifies which city with the name Perth is relevant).; File:Au in der Hallertau (Bayern) banner Clock tower.jpg (Obscure destination: Bayern identifies the region in which this destination can be found); (Examples needed of other languages, particularly with non-latin text)

Uploading to Commons

Now upload it to Commons, add it to the appropriate category (e.g., Category:Wikivoyage banners of Vienna).

Cropping banners at Commons using CropTool

Alternatively, banners can be cropped online using CropTool without editing them in an external picture editor. Another advantage is that most of the necessary file information (author, description, license) is added automatically.

Open existing source the file in Commons
Select CropTool from the Tools panel on the left
(The first time, you have to authorize the tool)
Select Aspect ratio: 7:1, press Preview
Check the preview, select Upload as new file and type the new file name according to the above instructions
Press Upload
After successful upload, check the new file and add it to the appropriate category "Category:Wikivoyage banners of "

Adding the banner to the article

If there is no page banner, please check that you are editing a main space article. Page banners should not be used on project or talk pages.
Edit the article and remove the default banner file name from the template. It will look something like like {{pagebanner | Asia_default_banner.jpg}}, and the text to remove is Asia_default_banner.jpg, or equivalent, leaving {{pagebanner}}. Save the edit.
Look in the left sidebar in section "Toolbox" and click on "Data item". This will open the page in Wikidata for the destination.
Click on the "Add" link below the "Statements" table.
Type "Wikivoyage banner" in the first field, insert the file name of the new banner image in the second field (for instance "Cool-banner-name.jpg") then click "save".
Optional: For further customization, you may also want to add a {{Pagebanner}} template, the basic syntax is: {{Pagebanner | Cool-banner-name.jpg}}.

If you would like to add a caption to the banner, which will appear when a reader hovers their mouse cursor over the image, add the parameter "caption=" with the text as shown - {{Pagebanner | Cool-banner-name.jpg | caption= Caption about this cool banner}}.

If the article has a lead image, consider moving that image down below some text in order to keep it from being edged against the banner.
Currently page banners are used in most Wikivoyage language versions.

Changing a banner

Default banners

Default banner images are displayed on thousands of articles. They should not be changed without consensus. Proposed changes may be discussed on the Banner Expedition talk page or the Travellers' pub.
New default banners for travel topics or subsets of a default template range should also be discussed before application. When applied they must be applied consistently throughout the range for which they are intended.

Changing custom banners

Poor quality banners may be replaced by better quality banners. Banners may be replaced by more appropriate banners. Correctly sized banners are by default more appropriate than incorrectly sized banners. Leave an edit summary explaining why the new banner is more appropriate. If anyone disagrees with a substitution for reasons other than correct sizing or image quality, temporarily replace the banner with the appropriate default banner and get consensus on the article talk page.

How to make a quality banner

Find an amazing high-resolution image. Banners should give an outstanding view of a destination, and should make readers want to go there. Thus, banners should be made from fantastic images that really make a destination shine. Don't use washed out, blurry snapshots you took with your mobile phone while cycling through a valley in rainy weather at night. Use awesome pictures that look professional, colorful, sharp and have a great composition. Let's be honest here, quality of self-made pictures is often flaky, so it's better to use outstanding freely-licensed images available on the web. Try the Wikimedia Commons categories Featured pictures by country, Quality images by country or Valued images by country, or do a search for freely licensed images on Google Images or Flickr.
Make a good composition. Most images, even panoramas, don't have an aspect ratio of 7:1, so you'll need to crop the original image in photo-editing software. By cropping you'll need to make a new composition that is different from the original. Make sure that the composition you choose is making the destination look fantastic! You can either focus on a certain detail of the original image or you can scale the original image down and show as much of it as possible in the banner. While editing, only scale images down and never upscale them. By upscaling, image data is lost and the banner will look blurry and bad. A big no-no. Also keep in mind that the page title will take up the upper left part of the banner, so the best part of the image is ideally placed at the right side of the banner. Getting a good composition is difficult—some outstanding images from Commons will simply never look good in banner form. If so, ditch the image and find a different one. When cropping an image, do not be tempted to make the aspect ratio different from 7:1. It takes no more effort to do it correctly, and it will have to be corrected when found. When resizing images you should ensure that you keep the correct aspect ratio in order to avoid distortion.
Save with maximum quality. If you found a nice image, and turned it into a nice banner with a good composition, then it's time to save the image in JPG format. Always save files with maximum image quality, else ugly artifacts will mess up your banner. If done right, your banner will have a size of around 600KB to 1MB. If your banner has a file size that's considerably lower, you need to work with a higher resolution base image.

Guidelines for quality

Quality is subjective, but there are some general principles:

Try to include iconic landmarks, natural or man-made.
Try to vary the themes of banner motifs within the same geographic region. A good method to display diversity within a country, could be by using sceneries of nature for provinces, skylines for big cities, and building exteriors or interiors for city districts or small cities.
Avoid motifs with too much controversy, that would offend the locals.
For neutrality and intellectual property reasons, avoid commercial billboards, brand names and logotypes. They can be considered if they are iconic for a destination.
To respect privacy and personality rights, avoid high-resolution images of people's faces. Public figures at a destination, such as performing artists or royal guards, can be displayed. See also Commons:Photographs of identifiable people.
Travel topic banners which apply to the whole world, should preferrably represent the topic, rather than any destination or country.

Composite images: Collages, photomontages etc, are a lot of work to do well, and unless you are particularly skilled at this kind of work and don't mind having your efforts rejected due to differences in taste, probably not worth the effort. Use them at your own risk - each proposed application must be accepted by consensus.

The best banners: For a selection of the best banners on Wikivoyage and the opportunity to recognise the images that you think are beautiful, check out Star standard banners.

Other ways to help

Help us locate spectacular photos to make banners from

If you can't do the image manipulations, and have found a really nice, suitable panorama that is reasonably proportioned, but not quite 7:1 you can use it, but put {{crop}} under the banner template to label the banner for maintenance.
If you find a nice non panoramic image that you think would be great for a specific article banner, leave a message on WV:Banner expedition/Banner suggestions with a link to the image and a link to the article for which it could be the banner. The source image must be at least 1800 pixels wide.

Progress

This section keeps track of the progress we have made in terms of implementing the template in articles in the mainspace, and how many of the banner templates have custom images.

Sitewide implementation

Out of 32849 eligible articles in the Wikivoyage mainspace, 32869 have implemented the banner template. -20 articles in mainspace do not have a banner.

100.061 % complete

Custom banner images

Of the 30655 implementations of the banner template on pages eligible for a custom banner, 22841 already have a custom banner image and 7,814 still require a custom banner image.

22841 / 30655 = 74.51% complete