Navigation
Domaines
Communes
Quartiers de Brest
Ressources
Communauté
Vie du projet
Autour de Wiki-Brest
Boîte à outils
Espaces de noms

Variantes
Actions
De Wiki-Brest

Aide:Insérer une image : Différence entre versions

(image sélection)
(→‎Placer l'image sur la page)
Ligne 30 : Ligne 30 :
  
  
−
==Placer l'image sur la page==
+
==inserer l'image sur la page==
  
 
1. Une fois l'image visualisée, sélectionner le nom de l'image sans oublier ".jpg", ".gif" ou autres. Et copier cette sélection de texte. (Si vous avez changé de page depuis, vous retrouvez votre image depuis la page '''[[Special:Newimages|"Galerie des fichiers multimédia"]]'''.)
 
1. Une fois l'image visualisée, sélectionner le nom de l'image sans oublier ".jpg", ".gif" ou autres. Et copier cette sélection de texte. (Si vous avez changé de page depuis, vous retrouvez votre image depuis la page '''[[Special:Newimages|"Galerie des fichiers multimédia"]]'''.)
Ligne 50 : Ligne 50 :
 
:N.B: La barre verticale, appelée pipe, ce fait en combinant les touches Alt+Gr et le chiffre 6.
 
:N.B: La barre verticale, appelée pipe, ce fait en combinant les touches Alt+Gr et le chiffre 6.
  
−
7. Plusieurs options permettent de choisir la manière dont l'image sera insérée :
 
−
* Pour centrer : '''<nowiki>[[Image:MonImage.jpg|300px|center]]</nowiki>'''
 
−
* Pour aligner à droite : '''<nowiki>[[Image:MonImage.jpg|300px|right]]</nowiki>'''
 
−
* Pour aligner à gauche : '''<nowiki>[[Image:MonImage.jpg|300px| left]]</nowiki>'''
 
−
* Pour afficher l'image en tant que miniature avec une légende, placée à gauche par
 
−
defaut. (Si on la veut à droite ou au centre il faut ajouter : |right ou |center)
 
−
'''<nowiki>[[Image:MonImage.jpg|thumb|La légende de l'image]]</nowiki>'''
 
−
* Pour créer une galerie d'images :
 
−
'''<nowiki><gallery></nowiki><br/>'''
 
−
'''<nowiki>Image:Exemple.jpg|La légende l'image</nowiki><br/>'''
 
−
'''<nowiki>Image:Exemple1.jpg|La légende l'image</nowiki><br/>'''
 
−
'''<nowiki>Image:Exemple2.jpg|La légende l'image</nowiki><br/>'''
 
−
'''<nowiki></gallery></nowiki>'''
 
  
  
−
--------------------------------------
+
==Placer l'image sur la page==
 +
===Image en vignette===
 +
Pour placer une image avec une présentation vignette (encadrée et légendée) il faut insérer un texte du type :
 +
<pre>[[Image:Vue brest.jpg|thumb|250px|Vue du pont de Recouvrance]]</pre>
 +
[[Image:Vue brest.jpg|thumb|250px|Vue du pont de [[Recouvrance]]]]
 +
* Image : le nom du fichier image | suivi de la légende qui apparaitra sous l'image
 +
* thumb : désigne la présentation en vignette ''(avec cadre et légende)''
 +
* 250px : entrer la largeur de l'image en pixel (sans cette info l'image sera par défaut présentée avec une largeur de 180px)
 +
* légende de l'image - il est possible de placer un lien dans la légende (recommandé)
 +
'''Cette présentation est celle qui est recommandée dans la majorité des cas. Elle est préférée a l'insertion dans le corps du texte (voir ci-dessous)'''
 +
<br><br><br><br><br><br><br>
 +
===Image dans le corps de texte===
 +
Pour placer une image dans le corp de texte il faut insérer un texte du type :
 +
<pre>[[Image:Vue brest.jpg]]</pre>
 +
Ce qui donne :
  
 
[[Image:Vue brest.jpg]]
 
[[Image:Vue brest.jpg]]
  
−
'''<nowiki>[[Image:Vue brest.jpg]]</nowiki>'''
+
Par défaut l'image se place à gauche avec sa taille d'origine.
 +
 
 +
Avec un texte du type :
 +
<pre>[[Image:Vue brest.jpg|150px|center|Vue de Brest (pont de Recouvrance)]]</pre>
 +
Il est possible de changer la place de l'image sur la page en ajoutant
 +
* ''|center'' elle sera centrée
 +
* ''|left'' elle se placera à gauche
 +
* ''|right'' elle se placera à droite
 +
 
 +
Si l'image est placée en début d'un paragraphe elle viendra justifier le texte.
  
−
[[Image:Vue brest.jpg|400px|center|Vue de Brest (pont de Recouvrance (cliquez pour agrandir)]]
+
Ce qui donne :
 +
[[Image:Vue brest.jpg|170px|left|Vue de Brest (pont de Recouvrance)]][[Image:Vue brest.jpg|80px|right|Vue de Brest (pont de Recouvrance)]] Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image.
 +
===Galeries photos===
  
−
'''<nowiki>[[Image:Vue brest.jpg|150px|center|Vue de Brest (pont de Recouvrance (cliquez pour agrandir)]]</nowiki>'''
+
Pour placer des images dans une galerie il faut insérer un texte du type :
 +
<pre>
 +
<center>
 +
<gallery>
 +
image:Jardin fleur.png|une fleur
 +
image:Jardin coccinelle.png|une coccinelle
 +
Image:Access.png|logo accessibilité
 +
Image:Bureau libre.png|Bureau libre
 +
Image:Icon-wifi.png|wifi
 +
Image:Wiki-brest.jpg|Wiki-brest
 +
</gallery>
 +
</center>
 +
</pre>
  
−
[[Image:Vue brest.jpg|thumb|Vue du pont de Recouvrance]]
+
Ce qui donne :
−
<br clear=all>
+
<center>
−
'''<nowiki>[[Image:Vue brest.jpg|thumb|Vue du pont de Recouvrance]]</nowiki>'''
+
<gallery>
 +
image:Jardin fleur.png|une fleur
 +
image:Jardin coccinelle.png|une coccinelle
 +
Image:Access.png|logo accessibilité
 +
Image:Bureau libre.png|Bureau libre
 +
Image:Icon-wifi.png|wifi
 +
Image:Wiki-brest.jpg|Wiki-brest
 +
</gallery>
 +
</center>
  
 +
Par défaut l'ensemble la galerie ce présente avec 4 colonnes mais on peut aussi choisir le nombre de colonnes en réglant le paramètre perrow de 1 à 4 en insérant un texte du type :
  
 +
<pre>
 +
<center>
 +
<gallery perrow=2>
 +
image:Jardin fleur.png|une fleur
 +
image:Jardin coccinelle.png|une coccinelle
 +
Image:Access.png|logo accessibilité
 +
Image:Bureau libre.png|Bureau libre
 +
Image:Icon-wifi.png|wifi
 +
Image:Wiki-brest.jpg|Wiki-brest
 +
</gallery>
 +
</center>
 +
</pre>
  
 +
Ce qui donne :
 +
<center>
 +
<gallery perrow=2>
 +
image:Jardin fleur.png|une fleur
 +
image:Jardin coccinelle.png|une coccinelle
 +
Image:Access.png|logo accessibilité
 +
Image:Bureau libre.png|Bureau libre
 +
Image:Icon-wifi.png|wifi
 +
Image:Wiki-brest.jpg|Wiki-brest
 +
</gallery>
 +
</center>
  
 +
=== Diaporama photos ===
 +
Pour créer un diaporama il faut insérer un texte du type :
 +
<pre>
 +
{{Images
 +
|largeur=250
 +
|titre=Diaporama n°1
 +
|Image:Exemple.jpg|Baleine
 +
|Image:Jardin fleur.png|fleur
 +
|Image:Jardin coccinelle.png|coccinelle
 +
}}
 +
</pre>
 +
{{Images
 +
|largeur=250
 +
|titre=Diaporama n°1
 +
|Image:Exemple.jpg|Baleine
 +
|Image:Jardin fleur.png|fleur
 +
|Image:Jardin coccinelle.png|coccinelle
 +
}}
 +
* Largeur : limite la largeur d'une image a un certain nombre de pixel
 +
- Les images dont la largeur est inférieur a cette dimension conserve leur largeur maximum<br>
 +
- en supprimant la ligne largeur le cadre du diaporama prend toute la largeur de la page et les images sont centrées.
 +
* titre : Le titre en gras du diaporama
 +
* Image : le nom du fichier image | suivi de la légende qui apparaitra sous l'image
  
 
==Voir aussi==
 
==Voir aussi==

Version du 20 mai 2009 à 11:43

NOUVEAUTE : Il est possible d'ajouter 10 photos à la fois, en cliquant sur "Importer plusieurs fichiers à la fois", dans la boîte à outils du menu. Attention .


Attention cependant aux noms que vous donnez à vos images. Si des images stockées sur le site portent le même nom, elles seront écrasées sans aucun avertissement. Vous pouvez faire une recherche au préalable à partir du lien "Galerie des fichiers multimédia", dans le menu, afin de vérifier si une image du même nom n'existe pas.



L'insertion d'image sur Wiki-Brest se déroule en deux étapes :

Importer l'image sur le serveur

1. Cliquer sur "Importer un fichier", dans la boîte à outils du menu.

2. L'import de média comporte quatre parties :

  • Le choix du document : Bouton "Parcourir".
  • Le nom du document : Il peut être changé sur la page de Wiki-Brest, pour éviter d'avoir à renommer le fichier d'origine. Le nom du fichier doit être le plus précis possible pour permettre une recherche par mots-clés depuis la page "Galerie des fichiers multimédia" dans le menu. Attention il faut garder .jpg
Exemples : Pardon Kérangoff.jpg / Expo arcenciel.jpg / Basket Patro Espérance.jpg
  • La description : Il est important de donner un maximum d'informations sur le média : sujet, lieu, date, source, auteur ...
  • La licence : Chaque document est associé à une licence régissant les conditions d'utilisation du document en question. Il est conseillé de déposer ces documents en licence libre, permettant la réutilisation et la modification. Mais l'auteur dispose d'autres licences pour protéger son document.
Pour plus informations consulter la page Droits et licences.

3. Cliquer sur le bouton "Importer le fichier". (il est possible qu'une autre page intermédiaire s'ouvre vous demandant de "Sauvegarder le fichier", si vous avez modifié le nom du fichier.)


inserer l'image sur la page

1. Une fois l'image visualisée, sélectionner le nom de l'image sans oublier ".jpg", ".gif" ou autres. Et copier cette sélection de texte. (Si vous avez changé de page depuis, vous retrouvez votre image depuis la page "Galerie des fichiers multimédia".)

Sélection du nom de l'image

2. Revenir à l'article où l'image sera ajoutée. (Utiliser le bouton précédent du navigateur, ou faire une recherche avec un mot du titre de la page).

3. Cliquer sur l'onglet "Modifier" de la page. Placer le curseur à l'endroit où vous souhaitez insérer l'image.

Bouton "Image insérée" de la barre d'outils

4. Cliquer sur le bouton "Image insérée" de la barre d'outils. Le texte suivant apparaît :

[[Image:Exemple.jpg]]

5. Coller le nom de l'image à la place d'Exemple.jpg.

6. Prévisualiser pour voir le résultat. généralement l'image est trop grande. Il faut la redimensionner. Ajouter le texte suivant entre les crochets pour une taille de 300 pixels.

[[Image:MonImage.jpg|300px]]
N.B: La barre verticale, appelée pipe, ce fait en combinant les touches Alt+Gr et le chiffre 6.


Placer l'image sur la page

Image en vignette

Pour placer une image avec une présentation vignette (encadrée et légendée) il faut insérer un texte du type : 

[[Image:Vue brest.jpg|thumb|250px|Vue du pont de Recouvrance]]
Vue du pont de Recouvrance
  • Image : le nom du fichier image | suivi de la légende qui apparaitra sous l'image
  • thumb : désigne la présentation en vignette (avec cadre et légende)
  • 250px : entrer la largeur de l'image en pixel (sans cette info l'image sera par défaut présentée avec une largeur de 180px)
  • légende de l'image - il est possible de placer un lien dans la légende (recommandé)

Cette présentation est celle qui est recommandée dans la majorité des cas. Elle est préférée a l'insertion dans le corps du texte (voir ci-dessous)






Image dans le corps de texte

Pour placer une image dans le corp de texte il faut insérer un texte du type : 

[[Image:Vue brest.jpg]]

Ce qui donne :

Vue brest.jpg

Par défaut l'image se place à gauche avec sa taille d'origine.

Avec un texte du type : 

[[Image:Vue brest.jpg|150px|center|Vue de Brest (pont de Recouvrance)]]

Il est possible de changer la place de l'image sur la page en ajoutant

  • |center elle sera centrée
  • |left elle se placera à gauche
  • |right elle se placera à droite

Si l'image est placée en début d'un paragraphe elle viendra justifier le texte.

Ce qui donne :

Vue de Brest (pont de Recouvrance)
Vue de Brest (pont de Recouvrance)
Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image Ceci est un test d'insertion d'image.

Galeries photos

Pour placer des images dans une galerie il faut insérer un texte du type : 

<center>
<gallery>
image:Jardin fleur.png|une fleur
image:Jardin coccinelle.png|une coccinelle
Image:Access.png|logo accessibilité
Image:Bureau libre.png|Bureau libre
Image:Icon-wifi.png|wifi
Image:Wiki-brest.jpg|Wiki-brest
</gallery>
</center>

Ce qui donne :

  • une fleur

  • une coccinelle

  • logo accessibilité

  • Bureau libre

  • wifi

  • Wiki-brest

Par défaut l'ensemble la galerie ce présente avec 4 colonnes mais on peut aussi choisir le nombre de colonnes en réglant le paramètre perrow de 1 à 4 en insérant un texte du type : 

<center>
<gallery perrow=2>
image:Jardin fleur.png|une fleur
image:Jardin coccinelle.png|une coccinelle
Image:Access.png|logo accessibilité
Image:Bureau libre.png|Bureau libre
Image:Icon-wifi.png|wifi
Image:Wiki-brest.jpg|Wiki-brest
</gallery>
</center>

Ce qui donne :

  • une fleur

  • une coccinelle

  • logo accessibilité

  • Bureau libre

  • wifi

  • Wiki-brest

Diaporama photos

Pour créer un diaporama il faut insérer un texte du type : 

{{Images
|largeur=250
|titre=Diaporama n°1
|Image:Exemple.jpg|Baleine
|Image:Jardin fleur.png|fleur
|Image:Jardin coccinelle.png|coccinelle
}}
Diaporama n°1
Baleine
fleur
coccinelle
  • Largeur : limite la largeur d'une image a un certain nombre de pixel

- Les images dont la largeur est inférieur a cette dimension conserve leur largeur maximum
- en supprimant la ligne largeur le cadre du diaporama prend toute la largeur de la page et les images sont centrées.

  • titre : Le titre en gras du diaporama
  • Image : le nom du fichier image | suivi de la légende qui apparaitra sous l'image

Voir aussi

Anti-sèche

Outils personnels