Voir la source de Gérer les images

{{Infobox-page-technique
|image           = [[Fichier:RB-realisations 06VR.jpg|250px]]
|nom-image       = Dessin 3D (Sketchup)
|Nom             = Images dans les pages
|page            = Gérer les images
|objet           = savoir charger et utiliser des images
|categorie       = Aide
|date            = 4/04/2018
|langage         = wiki
|reference       = Références
|redaction       = R. Birot
|langue          = FR
|info            = Tutoriel complet d'insertion d'image
|facebook        = [https://www.facebook.com/RBrealisations cliquez ICI]
|contact         = [[Fichier:email2.jpg|22px|link=Spécial:Contact]]
}}

{{Encadré
|color=lightblue
|titre=A noter
|image=[[Fichier:Images_outil.jpg|50px|gauche|Barre d'outils : images]]
|texte= Si vous avez installé l'extension '''WikiEditor''', l'outil "'''Fichier inséré'''" (icône à gauche) de la barre d'outils permet de charger et d'insérer une image très facilement
}}
== Paramétrage général ==
'''Tout ce qu'il faut savoir pour insérer des images dans un article.'''
 <span style="color:red">IMPORTANT : l'image doit être préalablement chargée avec l'option '''"Importer un fichier"''' du menu de gauche (Fichiers).<br />
Les paramètres (en dehors de Fichier...) sont optionnels. Seul le format "aucun" permet de choisir la largeur et/ou la hauteur.</span>
<pre> La syntaxe et ses paramètres :
[[Fichier:nom du fichier contenant l'image
|alignement position de l'image par rapport au texte : néant, centré, gauche, droite
|légende (titre de l'image)
|format de l'image  (vignette, cadre, sans cadre, aucun)
|largeur de l'image  (en pixels, exemple : 200px)
|hauteur de l'image  (en pixels précédé de x, exemple : x15px)
]]
</pre>

{{Encadré
|color=lightblue
|titre=Information
|image=
[[Fichier:information_02.jpg|50px|gauche]]
|texte=Le positionnement de l'image se fait avec les codes suivants :<nowiki> |gauche| , |centre| , |droite|</nowiki>. Pour définir une imagette, utiliser les paramètres <nowiki>|vignette|nombrepx|</nowiki>
}}
==Image placée au centre==
<pre> la syntaxe : texte...[[Fichier:Batiment_01.jpg|centré|]] ...suite du texte... donne l'image suivante :</pre>
''(texte standard)''Lorem ipsum dolor sit amet Integer congue dapibus lacus, quis pellentesque felis. Cras eget bibendum ante, at dapibus lacus. Proin consequat nulla in metus viverra laoreet. Sed eu venenatis augue, non euismod neque. Integer imperdiet lectus pellentesque tortor bibendum, id facilisis metus consequat. Nunc molestie. In non dui ex. Cras nec Accumsan lectus. 
[[Fichier:Batiment_01.jpg|centre|]]
''(suite du texte'')Lorem ipsum dolor sit amet Integer congue dapibus lacus, quis pellentesque felis. Cras eget bibendum ante, at dapibus lacus. Proin consequat nulla in metus viverra laoreet. Sed eu venenatis augue, non euismod neque. Integer imperdiet lectus pellentesque tortor bibendum, id facilisis metus consequat. Nunc molestie. In non dui ex. Cras nec Accumsan lectus.

==Imagette zoomable placée à droite du texte auquel elle fait référence== 
<pre>syntaxe d'insertion d'image : [[Fichier:Batiment_01.jpg|droite|ACRIV|vignette]] texte ... donne le résultat suivant :</pre>
[[Fichier:Batiment_01.jpg|droite|ACRIV|thumb|200px]]
''(texte standard)''Lorem ipsum dolor sit amet Integer congue dapibus lacus, quis pellentesque felis. Cras eget bibendum ante, at dapibus lacus. Proin consequat nulla in metus viverra laoreet. Sed eu venenatis augue, non euismod neque. Integer imperdiet lectus pellentesque tortor bibendum, id facilisis metus consequat. Nunc molestie. In non dui ex. Cras nec Accumsan lectus.

Lorem ipsum dolor sit amet Integer congue dapibus lacus, quis pellentesque felis. Cras eget bibendum ante, at dapibus lacus. Proin consequat nulla in metus viverra laoreet. Sed eu venenatis augue, non euismod neque. Integer imperdiet lectus pellentesque tortor bibendum, id facilisis metus consequat. Nunc molestie. In non dui ex. Cras nec Accumsan lectus.

==Imagette zoomable placée à gauche du texte auquel elle fait référence==

<pre>syntaxe d'insertion d'image : [[Fichier:Batiment_01.jpg|gauche|ACRIV|vignette]] texte... donne le résultat suivant :</pre>
[[Fichier:Batiment_01.jpg|gauche|ACRIV|thumb|200px]]
''(texte standard)''Lorem ipsum dolor sit amet Integer congue dapibus lacus, quis pellentesque felis. Cras eget bibendum ante, at dapibus lacus. Proin consequat nulla in metus viverra laoreet. Sed eu venenatis augue, non euismod neque. Integer imperdiet lectus pellentesque tortor bibendum, id facilisis metus consequat. Nunc molestie. In non dui ex. Cras nec Accumsan lectus.

Lorem ipsum dolor sit amet Integer congue dapibus lacus, quis pellentesque felis. Cras eget bibendum ante, at dapibus lacus. Proin consequat nulla in metus viverra laoreet. Sed eu venenatis augue, non euismod neque. Integer imperdiet lectus pellentesque tortor bibendum, id facilisis metus consequat. Nunc molestie. In non dui ex. Cras nec Accumsan lectus.<br>
<br>
<br>

== Image cliquable avec lien ==
<pre>[[Image:Batiment_01.jpg|x150px|centré|lien=https://www.acriv.org]]</pre>
[[Image:Batiment_01.jpg|x150px|centré|lien=https://www.acriv.org]]
<br>

== Images dans un tableau centré ==

<pre>
{| class="wikitable" style="margin: auto;"
|-
| [[Image:Batiment_01.jpg|x150px]] || [[Image:acriv-nuit.jpg|x150px]]
|}
</pre>
<br>
{| class="wikitable" style="margin: auto;"
|-
| [[Image:Batiment_01.jpg|x150px]] || [[Image:acriv_nuit.jpg|x150px]]
|}
<br>

== créer une galerie ==
=== les paramètres ===
s'indiquent avec l'option <pre>mode="parametre"</pre>
     '''traditional''' est le type de galerie d'origine utilisé par MediaWiki.
     '''nolines''' est similaire au traditionnel, mais sans lignes de bordure.
     '''packed''' fait que les images ont la même hauteur mais des largeurs différentes, avec peu d'espace entre les images. Les lignes de ce mode réactif s'organisent en fonction de la largeur de l'écran.
     '''packed-overlay''' montre la légende superposée sur l'image, dans une boîte blanche semi-transparente.
     '''packed-hover''' est similaire à packed-overlay, mais la légende et la boîte ne s'affichent qu'au survol.
     '''slideshow''' crée un diaporama des images.

Pour créer une galerie, il suffit de cliquer sur l'icône "[https://fr.wikipedia.org/wiki/Aide:Galerie/avanc%C3%A9e générer une galerie]" dans la barre d'outils de la zone de modification de page (ou d'article) : 
[[Fichier:creer-galerie_01.jpg|400px]]
Ce qui génère les codes suivants :
 <pre>
<gallery>
Exemple.jpg|Description 1
Exemple.jpg|Description 2
</gallery>
</pre>
=== Exemple 1 ===
Il suffit de mettre les bons fichiers et les bonnes descriptions pour chaque "vignette" et d'ajouter les lignes pour les vignettes supplémentaires.

Exemple : ''(les balises <nowiki>'''<center>''' et'''</center>'''</nowiki> servent à centrer la galerie)''
<pre>
<center>
<gallery caption="dessins 3D">
RB-realisations_04.jpg|GIMSAO/SIERA 3D
RB-realisations_05.jpg|GIMSAO/SIERA 3D
RB-realisations_06.jpg|GIMSAO/SIERA 3D
RB-realisations_06VR.jpg|GIMSAO/SIERA 3D Vray
</gallery>
</center>
</pre> 
<center>
<gallery caption="dessins 3D">
RB-realisations_04.jpg|GIMSAO/SIERA 3D
RB-realisations_05.jpg|GIMSAO/SIERA 3D
RB-realisations_06.jpg|GIMSAO/SIERA 3D
RB-realisations_06VR.jpg|GIMSAO/SIERA 3D Vray
</gallery>
</center>
<br>

=== Exemple 2 ===
avec le paramètre : '''mode="packed-hover"''' 
<pre> 
<gallery class="center" mode="packed-hover">
RB-realisations_04.jpg|GIMSAO/SIERA 3D
RB-realisations_05.jpg|GIMSAO/SIERA 3D
RB-realisations_06.jpg|GIMSAO/SIERA 3D
RB-realisations_06VR.jpg|GIMSAO/SIERA 3D Vray
</gallery>
</pre>
<gallery class="center" mode="packed-hover">
RB-realisations_04.jpg|GIMSAO/SIERA 3D
RB-realisations_05.jpg|GIMSAO/SIERA 3D
RB-realisations_06.jpg|GIMSAO/SIERA 3D
RB-realisations_06VR.jpg|GIMSAO/SIERA 3D Vray
</gallery>
<br>

== Bonus 1 : créer un "favicon.ico" ==
 Rappel : le "favicon.ico" est la petite image que l'on voit à gauche du nom de son site dans la barre adresse des navigateurs.

Pour réaliser cette image :
[[Fichier:Icon 01.jpg|vignette|gauche|favicon.ico]]
* créer son logo dans une image carrée réduite à 64x64 pixels
* sauvegarder l'image en bitmap (.BMP )
* renommer l'image en "favicon" si nécessaire
* modifier son extension en ".ICO"
* la copier dans le dossier contenant le wiki (racine du wiki)<br>

== Bonus 2 : insérer son logo en bas de chaque page ==
 '''Toutes les pages créées avec MediaWiki ont son logo en bas de chacune d'elles. Si vous préférez avoir votre propre logo et un lien vers un de vos sites, voici la séquence à installer en fin de fichier "LocalSettings.php" en remplaçant les données de ce wiki par les vôtres. Le fichier image contenant votre logo, ici "FooterIcon.png", doit être mis sous la racine du wiki.'''
<pre>
$wgFooterIcons = [
	"copyright" => [
		"copyright" => [], // placeholder for the built in copyright icon
	],
	"poweredby" => [
		"mediawiki" => [
			// ********** Modifications par RB Realisations
			// Defaults to point at
			// "$wgResourceBasePath/resources/assets/poweredby_mediawiki_88x31.png"
			// plus srcset for 1.5x, 2x resolution variants.
			"src" => "https://wiki.rb-realisations.fr/FooterIcon.png",
			"url" => "https://www.facebook.com/RBrealisations/",
			"alt" => "RB Réalisations Facebook",
				"height" => "47", 
				"width" => "151", 
		]
	],
];
</pre>
<br>
{{#seo:
|title=RB Realisations
|titlemode=append
|keywords=wiki, mediawiki, wikipedia, programmation, rb-realisations, Rene Birot realisations, construction wiki, sites internet, wordpress, dotclear, lmsoft, word creator, cms, blog
|description=Site de mise au point de wiki construit avec MediaWiki
}}

== Création du bandeau en-tête==

Pour créer une image bandeau (et éventuellement un texte) qui sera en haut de chaque page, il faut charger l'image dans une page spéciale : MediaWiki:Sitenotice.
L'image doit avoir une taille plus large que haute pour ne pas occuper trop d'espace vertical. 
Afin que les pages soit affichables sur smartphone et sur tablette, je conseille de limiter l'image afficher à une largeur de 750 px et de la placer dans un "encadré".
<br><br>

Exemple pour le bandeau de ce site :
<br>

<pre>
{{Encadré
|color=
|titre=
[[Fichier:Logo-bandeau 02.jpg|750px|centré|RB Réalisations]]
|image=
|texte=<div align="center"><big>Site d’aide à la création d’un wiki avec MédiaWiki (mais pas que...)</big></div>
}}
</pre>
{{Encadré
|color=
|titre=
[[Fichier:Logo-bandeau 02.jpg|750px|centré|RB Réalisations]]
|image=
|texte=<div align="center"><big>Site d’aide à la création d’un wiki avec MédiaWiki (mais pas que...)</big></div>
}}


[[Catégorie:Aide]]