Difference between revisions of "Help/Upload-a-Photo-How"

From Polyglot Club WIKI
Jump to navigation Jump to search
 
(41 intermediate revisions by 2 users not shown)
Line 1: Line 1:
'''How to upload an original photo on your page?'''
{{Help-menu}}
 
<div class="pg_page_title">How to add a Photo on a Language Lesson</div>
You are creating an article on the Polyglotclub WIKI and you want to add a picture in it. How to do this ?
You are creating an article on the Polyglotclub WIKI and you want to add a picture in it. How to do this ?


== Create your own image (do not copy from the web) ==  
== Create your own image (do not copy from the web) ==  


First, be aware that it is not allowed to simply copy images on the web without modification because of Copyright and [https://en.wikipedia.org/wiki/Duplicate_content Duplicate Content].
First, be aware that it is not allowed to simply copy images on the web without modification because of Copyright and [https://en.wikipedia.org/wiki/Duplicate_content Duplicate Content] reasons.


To create your own original image, you can use softwares like [https://picasa.google.com/ Picasa], [http://www.adobe.com/products/photoshop.html Photoshop] or [http://www.adobe.com/products/fireworks.html Fireworks].
To create your own original image, you can use softwares like [https://picasa.google.com/ Picasa], [http://www.adobe.com/products/photoshop.html Photoshop] or [http://www.adobe.com/products/fireworks.html Fireworks].
<span style="color:red;">'''Warning : create an image at least 700 px wide.'''</span> The image must be large enough to appear on the lessons thumbnails.


== Upload the image on the article ==
== Upload the image on the article ==


[[File:help-upload-image.jpg]]
Once your image is created, you can add it on your wiki page.


Once your image is created, you can add it on your article.
===Edit tab===
:#Click on the '''Edit''' tab.
:#Click the button '''INSERT > MEDIA''' and follow the steps


:#Choose the tab "Edit wikicode"
===Edit source tab===
:#Click on the '''Edit source''' tab.
:#Click the button (small green arrow)
:#Click the button (small green arrow)
:#Select the file from your computer
[[File:upload-photo-lesson.jpg|border|small green arrow]]
:#Click the upload link
*Select the file from your computer
:#Add the image code on the page
*Click the '''Upload this file''' link
[[File:upload-photo-lesson2.jpg|border|Upload this file]]
*Add the image code in the page: click the '''Insert picture''' link
[[File:upload-photo-lesson3.jpg|border|Insert picture]]
*Format the code if needed


==Formatting your image==
==Formatting your image==


For example, if you have just uploaded an image with the following name : Onomatopoeias.png
For example, if you have just uploaded an image with the following name : My_pic.png


Then, use the following codes (edit your page with the Edit Source button) :
Then, use the following codes (edit your page with the Edit Source button) :


So your page is best view in mobile devices, it is best to use a width of 300px. I know it's small but, so far, mediawiki do not provide responsive design which automatically adapt to all devices mobile or desktops.
So your page can be viewed with any device, it is best to use a width of 300px. If you are using a desktop device, it's small but, so far, mediawiki do not provide responsive design which automatically adapt images to all devices mobile or desktops.


*Image with a width of 300px:
*Image with a width of 300px:
<code><nowiki>[[File:Onomatopoeias.png|300px]]</nowiki></code>
<code><nowiki>[[File:My_pic.png|300px]]</nowiki></code>
 
[[File:Onomatopoeias.png|300px]]


*Image with a caption "your text":
*Image with a caption "your text":
<code><nowiki>[[File:Onomatopoeias.png|your text]]</nowiki></code>
<code><nowiki>[[File:My_pic.png|your text]]</nowiki></code>


[[File:Onomatopoeias.png|300px|your text]]
[[File:Onomatopoeias.png|300px|your text]]


*Image with a link:
*Image with a link:
<code><nowiki>[[File:Wiki.png|300px|link=http://polyglotclub.com]]</nowiki></code>
<code><nowiki>[[File:My_pic.png|300px|link=http://polyglotclub.com]]</nowiki></code>


[[File:Onomatopoeias.png|300px|link=http://polyglotclub.com]]
[[File:Onomatopoeias.png|300px|link=http://polyglotclub.com]]
*Image with a border:
<code><nowiki>[[File:My_pic.png|300px|border]]</nowiki></code>
[[File:Onomatopoeias.png|300px|border]]
*Thumbnail image:
<code><nowiki>[[File:My_pic.png|thumb|none]]</nowiki></code>
[[File:Onomatopoeias.png|thumb|none]]


Learn more about the [https://www.mediawiki.org/wiki/Help:Images wiki code syntax for images]
Learn more about the [https://www.mediawiki.org/wiki/Help:Images wiki code syntax for images]

Latest revision as of 01:24, 30 January 2022

Write a lesson: Why? How? FAQ
How to add a Photo on a Language Lesson

You are creating an article on the Polyglotclub WIKI and you want to add a picture in it. How to do this ?

Create your own image (do not copy from the web)[edit | edit source]

First, be aware that it is not allowed to simply copy images on the web without modification because of Copyright and Duplicate Content reasons.

To create your own original image, you can use softwares like Picasa, Photoshop or Fireworks.

Upload the image on the article[edit | edit source]

Once your image is created, you can add it on your wiki page.

Edit tab[edit | edit source]

  1. Click on the Edit tab.
  2. Click the button INSERT > MEDIA and follow the steps

Edit source tab[edit | edit source]

  1. Click on the Edit source tab.
  2. Click the button (small green arrow)

small green arrow

  • Select the file from your computer
  • Click the Upload this file link

Upload this file

  • Add the image code in the page: click the Insert picture link

Insert picture

  • Format the code if needed

Formatting your image[edit | edit source]

For example, if you have just uploaded an image with the following name : My_pic.png

Then, use the following codes (edit your page with the Edit Source button) :

So your page can be viewed with any device, it is best to use a width of 300px. If you are using a desktop device, it's small but, so far, mediawiki do not provide responsive design which automatically adapt images to all devices mobile or desktops.

  • Image with a width of 300px:

[[File:My_pic.png|300px]]

  • Image with a caption "your text":

[[File:My_pic.png|your text]]

your text

  • Image with a link:

[[File:My_pic.png|300px|link=http://polyglotclub.com]]

Onomatopoeias.png

  • Image with a border:

[[File:My_pic.png|300px|border]]

Onomatopoeias.png

  • Thumbnail image:

[[File:My_pic.png|thumb|none]]

Onomatopoeias.png

Learn more about the wiki code syntax for images