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

edit

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

edit

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

edit

Standards

edit

How it works

edit
  • 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

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

Image size

edit
  • 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

edit

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

edit

How do I help?

edit
Cropping to a 2100:300 fixed ratio in GIMP

Creating a banner

edit

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.

edit
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

edit

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

Cropping banners at Commons using CropTool

edit
CropTool allows easy banner creation, without installing any software

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.

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

Adding the banner to the article

edit
  • 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

edit
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

edit
Bad banner
Good banner
  1. 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.
  2. 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.
  3. 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

edit

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

edit
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

edit

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

edit

Out of 32870 eligible articles in the Wikivoyage mainspace, 32889 have implemented the banner template. -19 articles in mainspace do not have a banner.

100.058 % complete

Custom banner images

edit

Of the 30675 implementations of the banner template on pages eligible for a custom banner, 22857 already have a custom banner image and 7,818 still require a custom banner image.

22857 / 30675 = 74.513% complete

Standard banner images

edit

Out of 2217 disambiguation pages, 2214 have the standard banner.

2214 / 2217 = 99.865% complete

Missing banners

edit