Images in LearnOSM

[severinmenard]

HI,

I would like to create screenshots for the first version. I have three questions:
1 where to store them?

2 if these broken links are normal within GitHub or not?https://github.com/hotosm/learnosm/blob/e1f4f5b4c650b8b555c5a28a7a0f7707d7969d44/_posts/fr/0200-12-23-editing-with-josm.md

3 how to set the images sizes as currently either too big or too small? http://learnosm.org/fr/beginner/editing-with-josm/

[skorasaurus]

3] I think you have to manually resize the images in your own program ?

[MappingKat]

Hey @severinmenard,

I assume you are asking about the french images for the beginning content? If so, then please put those images in the "images" folder. I am trying to organize all images so that they have the language_section_chapternumber_image number. For example, eng_beg_ch5_image00. For the most part you may be able to copy the English versions... but unfortunately I have not yet matched all the images up with their new names.

2. I think only recently github has allowed you to view pictures, so anytime I can view a picture I consider that a bonus. I think that is a question for the support team at Github. I am quite sure why it is not working. There is also a problem with the images in all the chapters.

3. As @skorasaurus the best way to do that is to fork the repo, get those images on your computer and manually change the sizes. I believe the widest width you can have is 520px (@jueyang told me that). I like to use PICPICK or INKSCAPE.

Hopefully, that answers most of your questions...

[severinmenard]

On Tue, Jul 23, 2013 at 6:07 PM, Katrina Engelsted <[email protected]

wrote:

Hey @severinmenard https://github.com/severinmenard,

I assume you are asking about the french images for the beginning content?
If so, then please put those images in the "images" folder. I am trying to
organize all images so that they have the
language_section_chapternumber_image number. For example,
eng_beg_ch5_image00. For the most part you may be able to copy the English
versions... but unfortunately I have not yet matched all the images up with
their new names.

Hmm is this not a bit risky to put chapter numbers as it seems there are
some discussions to potentiall reorganize the chapters? Same things within
the chapters: you might want to switch section or add new ones, and it
would become complicated with image00, etc.

2. I think only recently github has allowed you to view pictures, so
   anytime I can view a picture I consider that a bonus. I think that is a
   question for the support team at Github. I am quite sure why it is not
   working. There is also a problem with the images in all the chapters.

OK, so basically there is no way to preview the final result before a push.
Wow, one another reason I am not thrilled at all by editing a book on
GitHub

3. As @skorasaurus https://github.com/skorasaurus the best way to do
   that is to fork the repo, get those images on your computer and manually
   change the sizes. I believe the widest width you can have is 520px (
   @jueyang https://github.com/jueyang told me that). I like to use
   PICPICK or INKSCAPE.

OK. Without having a chance to preview the result?

Hopefully, that answers most of your questions...

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/118#issuecomment-21425310
.

[lxbarth]

Try prose.io. It's much improved + much faster now.

[MappingKat]

Hey @severinmenard,
I agree with you. We could change the images so that they use keywords instead of chapter names.

eng_beg_gps_img03

This route would take more time and organization. What do you think?

[severinmenard]

OK, as there is no way to access easily or put some images in
https://github.com/hotosm/learnosm/blob/intermediate/images/intermediate/and
basically because I just want to translate Pages and not having to
pass
a 15 days long developer expert training before, I just attached the
pictures I need to be put in this folder. If one nice geek can do it, she
or he will get my eternal reward

On Tue, Jul 23, 2013 at 7:42 PM, Alex Barth [email protected]:

Try prose.io. It's much improved + much faster now.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/118#issuecomment-21432124
.

[pierzen]

severinmenard wrote

OK, so basically there is no way to preview the final result before a push. Wow, one another reason I am not thrilled at > all by editing a book on GitHub
3) As @skorasaurus https://github.com/skorasaurus the best way to do that is to fork the repo, get those images on > your computer and manually change the sizes. I believe the widest width you can have is 520px ( @jueyang
https://github.com/jueyang told me that). I like to use PICPICK or INKSCAPE.
OK. Without having a chance to preview the result?

This Github help shows how to embed images in a markdown document
https://help.github.com/articles/how-do-i-add-images-to-my-wiki

The solution is to use the baseurl https://raw.github.com/ instead of https://github.com/.
In the following example it works when harcoding the url https://github.com/pierzen/learnosm/blob/gh-pages/fr-0300-12-30-edit-in-detail.md.

We could simply hardcode hotosm master repository baseurl.

But one problem stays : What solution to propose to less techie users to simply transfer images to the Github Repository without using an unecessary complicated solution (ie. install git software on individual computer, clone repo on it, and learn all this Formula 1 type of mechanic) ?

Funny that I can upload an image through this Comment Issue window.

[pyrog]

the best way to do that is to fork the repo, get those images on your computer and manually change the sizes.

💡 Some Jekyll plugins could automatically resize images, but I think you can't see the result with your favorite editor, except if it use plugins…

[pyrog]

@severinmenard

OK, so basically there is no way to preview the final result before a push.
Wow, one another reason I am not thrilled at all by editing a book on GitHub

I look deeply a prose.io doc and source code: with an appropriate settings of prose, it's easy to upload pictures, drag'n drop them to the page… and preview them 😄

@pierzen

We could simply hardcode hotosm master repository baseurl.

Did you would say hardcode in the .md like this ?

![Screen Copy]({{site.baseurl}}/images/a-screen-copy.png)

In practice, you don't (and mustn't) have to do that.

[Nick-Tallguy]

If you create an issue an drop an image onto the 'write box' it is added to the issue, but is stored as a file eg
![selection_059](https://cloud.githubusercontent.com/assets/6763965/6279872/6f8f8bd4-b89d-11e4-9cd3-61dfa274f680.png)

which could be retrieved later by another editor or just referred to by the person submitting it

[Nick-Tallguy]

Like this (this had better work!)

[Nick-Tallguy]

In comments on this issue in July & August 2013 @severinmenard & @pierzen were trying to work out how to get images into the website.
One simple solution is to drag & drop them into a an issue. They can then either be captured as a screenshot by someone else updating the site & transferred into or used in the method outlined by me here

https://github.com/Nick-Tallguy/Testing_learnosm/blob/master/images.md

The image is the one created by pierzen & used in his comment on the issue above.

This gives a not very elegant, but working, solution to part of the issue outlined above (the issue has become very wide.

[althio]

Thanks for the clarification, I understand your point. It is certainly a working solution. The image is then hosted at https://f.cloud.github.com/assets/ It is available and but for keeping our repo tidy it still needs a github helper to add the file internally to https://github.com/hotosm/learnosm/tree/gh-pages/images/ At least the non-tech contributor can easily upload the image.

[pierzen]

Should we do translations directly into a tracker issue to assure to preview immediately the result? Otherwise, how to use the link to the image, insert it in the markdown document and preview the result?

Or should we have tool elsewhere that gives same functionalities. Once the document would be completed, tech people would take care to transfer to Github.

Working on translation, we need a workflow that let work easily, concentrate on the content, not continually about the technical aspects. As you can see, our comments from august 2013 have not been answered so far. And less people are ready to continue contributing to translation.

In a writer application, you import easily an image, you setup the size and position and see immediatel the result. Prose.io is supposed to provide such functionalities but developpers did not fix the problem of importing images in github.

[Nick-Tallguy]

Hi,

I've created this http://nick-tallguy.github.io/en/contribute/translator-images/ at the moment on the staging site but I will add to the main site soon. Accessible from 'contribute' . - the pencil symbol.

I think this guide plus the use of transifex answers all the questions in this issue.

Closing

[Nick-Tallguy]

See also #526