diff --git a/README.md b/README.md index 1ca09c9c3..29a450f5a 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,11 @@ Any updates in the gh-pages branch automatically update the site within minutes. ## Contributing +### Translators - How to add localised images + +Please see [this guide in draft form](/en/contribute/translator-images/) + + For minor edits, simply locate the post you are interested in via the [posts](_posts) directory, and use the [edit](https://help.github.com/articles/editing-files-in-another-user-s-repository/) feature to fix typos, grammar and other minor items. To learn how to translate, run the site locally or develop new content, check out [CONTRIBUTING.md](CONTRIBUTING.md) for more on how to contribute directly to LearnOSM. diff --git a/_posts/0100-06-20-images-translator.md b/_posts/0100-06-20-images-translator.md new file mode 100644 index 000000000..b219e2232 --- /dev/null +++ b/_posts/0100-06-20-images-translator.md @@ -0,0 +1,108 @@ +--- +layout: doc +permalink: /en/contribute/translator-images/ +lang: en +title: Translators - adding localised images for your language +category: contribute +nosearch: true +--- + +Translators - How to add local images for your language +====================================================== + +**This guide is still at the draft stage.** + +Although the eventual aim is to have your nice new images on the main LearnOSM site, initially it is best to add them to our testing site, which you can find on Github at + +- TOC +{:toc} + +Login to Github +----------------- + +You will need a login for + +### Fork the staging site + +Once you have a login to Github you will need to navigate to the testing and staging site at and **fork** the site by clicking on the **fork** button to the top right ![fork][]{: height="24px"} + +![Github 1][] + +Your fork of the site will be an exact copy of the site at the time you created it - as the site is updated, your fork will be *behind* the staging site, and you will have to update it - more on this later, and if you are uploading images only once, you may never have to update your fork. + +Images - preparation +-------------------- + +### png format +It is possible to use other formats, such as .gif, but for a simple static image the easiest format is .png + +### image size + +Maximum of 520 px (pixels) on the longest side. The site is viewed throughout the world, and has to load quickly. For static images there is currently a limit of 520px imposed to ensure fast loading, even in areas of the world such as Africa where internet access may be limited. + +### Filenames for your image + +Using **0200-12-27-start-osm.md** as an example and the image **start-osm_website.png** which has text on it in English. + +The files you have been translating are all in the _posts folder. +Navigate to the file on **your fork of the repository** - this link if for the testing site - make sure you go to your fork instead and look for the image you want to replace. When you find the image, click on it, and it will load as separate page, and the image will be identified as **Nick-Tallguy.github.io/images/beginner/start-osm_website.png** + +Assuming you have a new image, and your language is **Italian** (Transifex identifies your language with the code **it**), you should name your new image **start-osm_website_it.png**. In other words, you have taken the original filename and added **_it** to it, just before it's identifier of .png. + +Uploading the image +-------------------- + +Navigate to the correct folder **of your fork**. The images are stored in a folder **images** and a sub-folder named after the category + +At the top of the file **0200-12-27-start-osm.md** you will see the header information; + + --- + layout: doc + title: OpenStreetMap.org + permalink: /en/beginner/start-osm/ + lang: en + category: beginner + --- + +From this, you can see your category is **beginner**, and you should navigate to that folder within the images folder - - you should be able to see the original **start-osm_website.png** image in this folder. + +The top of the web page will look like this + +![Github 1][] + +To the right you can see the buttons ![Github 2][]{: height="24px"} and you should click on the **Upload files** button and upload each of your images that you have prepared. + +Having uploaded your images, you will need to submit a **pull request** - more info on this when I have screenshots etc.. + + +Updating Transifex so your new images display +--------------------------------------------- + +Return to Transifex, and at the foot of the module you have prepared the images for, you will see the image location and name, for instance + + [website]: /images/beginner/start-osm_website.png + +which you now change to + + [website]: /images/beginner/start-osm_website_it.png + +Go through each of the images that you have uploaded a new image for, updating the filename. + +Finally - the images will display within a day or two +------------------------------------------------------ + +One of the site admin's will need to merge your pull request, and then your images will appear on the staging site and you can view them there + + and navigate to the correct language and module. + +Any problems, please make contact - + +- open an issue on the staging site, or +- send an email from the website, or +- raise an issue on Transifex +- all of these means (and some others!) make their way to the same team. + +[Github 1]: /images/contribute/translate-image-header.png +[Github 2]: /images/contribute/translate-image-upload.png +[fork]: /images/contribute/translate-image-fork.png +[Github 2]: /images/contribute/translate-image-upload.png diff --git a/images/contribute/translate-image-fork.png b/images/contribute/translate-image-fork.png new file mode 100644 index 000000000..465fa1d6f Binary files /dev/null and b/images/contribute/translate-image-fork.png differ diff --git a/images/contribute/translate-image-header.png b/images/contribute/translate-image-header.png new file mode 100644 index 000000000..cbd918cad Binary files /dev/null and b/images/contribute/translate-image-header.png differ diff --git a/images/contribute/translate-image-upload.png b/images/contribute/translate-image-upload.png new file mode 100644 index 000000000..307012959 Binary files /dev/null and b/images/contribute/translate-image-upload.png differ