
Translators - How to add local images for your language Most of the images on LearnOSM contain English words, but it is easy to add images which have the words in your language. This will also make understanding much easier for visitors to the site. Images are added to the LearnOSM repository on Github at https://github.com/hotosm/learnosm with a pull request. Once one of the site admins has merged it, your images are on the main LearnOSM site, and you can check them alongside your translations on the staging site https://staging.learnosm.org/en/. Translators - How to add local images for your language Login to Github Fork the LearnOSM repository Images - preparation png format image size Filenames for your image Uploading the image Submit a pull request Updating Transifex so your new images display Finally - the images will display within a day or two Any problems, please make contact Login to Github You will need a login for https://github.com/ Fork the LearnOSM repository Once you have a login to Github you will need to navigate to the LearnOSM repository at https://github.com/hotosm/learnosm and fork the site by clicking on the fork button to the top right 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 LearnOSM repository, 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 and for static images there is currently a limit of 520px imposed. 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 is for the main repository - make sure you go to your fork instead https://github.com/hotosm/learnosm/blob/gh-pages/_posts/en/0200-12-27-start-osm_en.md and look for the image you want to replace. When you find the image, click on it, and it will load as a separate page, and the image will be identified as learnosm/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 - https://github.com/hotosm/learnosm/tree/gh-pages/images/beginner - 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 To the right you can see the buttons 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 These images showing the flow should help or follow this guide GitHub beginners guide - recommended! https://guides.github.com/activities/hello-world/ 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 admins will need to merge your pull request. Your Transifex changes appear on the staging site https://staging.learnosm.org/en/ within a day, and once everyone is happy with the images and links, the translated files will be added to https://learnosm.org/en/. Any problems, please make contact send an email to learnosm@hotosm.org send an email from the contribute section of https://learnosm.org/en/, or raise an issue on Github at https://github.com/hotosm/learnosm/issues, or raise an issue on Transifex All of these means (and some others!) make their way to the same team. Return to top of page Was this chapter helpful? Let us know and help us improve the guides!

Translators - How to add local images for your language

Most of the images on LearnOSM contain English words, but it is easy to add images which have the words in your language. This will also make understanding much easier for visitors to the site.

Images are added to the LearnOSM repository on Github at https://github.com/hotosm/learnosm with a pull request. Once one of the site admins has merged it, your images are on the main LearnOSM site, and you can check them alongside your translations on the staging site https://staging.learnosm.org/en/.

Translators - How to add local images for your language

You will need a login for https://github.com/

Fork the LearnOSM repository

Once you have a login to Github you will need to navigate to the LearnOSM repository at https://github.com/hotosm/learnosm and fork the site by clicking on the fork button to the top right fork

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 LearnOSM repository, 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 and for static images there is currently a limit of 520px imposed.

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 is for the main repository - make sure you go to your fork instead https://github.com/hotosm/learnosm/blob/gh-pages/_posts/en/0200-12-27-start-osm_en.md and look for the image you want to replace. When you find the image, click on it, and it will load as a separate page, and the image will be identified as learnosm/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 - https://github.com/hotosm/learnosm/tree/gh-pages/images/beginner - 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 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

These images showing the flow should help

pull-request

comment-pull

compare-fork

or follow this guide GitHub beginners guide - recommended! https://guides.github.com/activities/hello-world/

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 admins will need to merge your pull request. Your Transifex changes appear on the staging site https://staging.learnosm.org/en/ within a day, and once everyone is happy with the images and links, the translated files will be added to https://learnosm.org/en/.

Any problems, please make contact

send an email to learnosm@hotosm.org
send an email from the contribute section of https://learnosm.org/en/, or
raise an issue on Github at https://github.com/hotosm/learnosm/issues, or
raise an issue on Transifex

All of these means (and some others!) make their way to the same team.

Return to top of page

Was this chapter helpful? Let us know and help us improve the guides!