Images guidelines

Images in LearnOSM

Thank you for helping to grow this resource.
The following best practices are recommended for image size and naming standards.

Image Uploads

1. The longest side of any image should not be over 520 px.
2. Where possible the image should be saved in .png format.

Folder Identification

In an organization wide effort to prevent duplicates please assign your images accordingly.

1. All images are stored in the folder: /images

2. And then in a subfolder with the same name as the chapter document referring to it:

   • /images/beginner/
   • /images/coordination/
   • /images/mobile-mapping/example-fieldpapers.png
   • /images/mobile-mapping/example-fieldpapers.fr.png

Using Neutral Language

All "translations" use the "english" image.

Image: a picture of a gps receiver

/images/mobile-mapping/gps-receiver.png

Using Language Extensions

If the image contains important text or cultural meaning . Please use the the locale language code i.e. es - Spanish, en - English, de - German, etc.

Image: a picture of a gps receiver, but the text is in French

/images/mobile-mapping/gps-receiver.fr.png

Archived systems

There have been many other methods of filing images, and at present there are many duplicate images. Please ensure you are using the filing system outlined above - we are gradually updating all of the images & will be deleting the duplicates as they are located.

Alternative version of images & the link within the _posts folder

This is the format of the link. What goes in the [] will show on hover.

![]({{site.baseurl}}/images/nl_beg_ch3_image06.png)

2. Processing image names, formats and sizes in batch

After downloading google docs as webpage (.html), the images will be neatly packaged and numbered as image00, image01, etc in the images/ folder that comes with it. A few steps of processing will make it clean for the markdown posts. All process happens in the image directory and are executed in terminal.

- adding prefix and suffix

To convert imageXX.png to nl_beg_ch3_imageXX.png, run

for image in dir -d *; do echo mv $image $(basename nl_beg_ch3_$image .png).png; done

This is a dry run (without actually producing the new files). If you think what you see in terminal looks good, remove echo and the script will take effect.

for image in dir -d *; do mv $image $(base nl_beg_ch3_$image .png)_en.png; done

The following the operations require imageMagick, a software suite for manipulating images.

All process happens in the image directory and are executed in terminal.

- converting to png

for image in *.jpeg; do echo convert $image $(basename $image .jpeg).png; done

Dry run. Take away echo when executing.

- resizing

for image in *.png; do echo convert $image -resize 520x\> $(basename $image); done

Again, dry run. Take away echo when executing. The \> targets at images wider than 520px and shrinks them down to 520px.

[1]: Current images might differ from the neat-looking numbers because the conversion method at the time produced those artifacts (for example, when odt is saved as html in Libreoffice, it produces randomized UID for each image, thus the long name). This is no longer a concern. When using google drive to pipe out html, the naming scheme should be simple and clean.