Gérer les images

Images dans les pages
Dessin 3D (Sketchup)
Page	Gérer les images
Objet	savoir charger et utiliser des images
Catégorie	Aide
Création	4/04/2018
Langage	wiki
Références
Rédaction	R. Birot
Langue	FR
Information	Tutoriel complet d'insertion d'image
Facebook	cliquez ICI

A noter

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.

IMPORTANT : l'image doit être préalablement chargée avec l'option "Importer un fichier" du menu de gauche (Fichiers).

Les paramètres (en dehors de Fichier...) sont optionnels. Seul le format "aucun" permet de choisir la largeur et/ou la hauteur.

 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)
]]

Information

Le positionnement de l'image se fait avec les codes suivants : |gauche| , |centre| , |droite|. Pour définir une imagette, utiliser les paramètres |vignette|nombrepx|

Image placée au centre

 la syntaxe : texte...[[Fichier:Batiment_01.jpg|centré|]] ...suite du texte... donne l'image suivante :

(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.

(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

syntaxe d'insertion d'image : [[Fichier:Batiment_01.jpg|droite|ACRIV|vignette]] texte ... donne le résultat suivant :

ACRIV

(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

syntaxe d'insertion d'image : [[Fichier:Batiment_01.jpg|gauche|ACRIV|vignette]] texte... donne le résultat suivant :

ACRIV

(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.

Image cliquable avec lien

[[Image:Batiment_01.jpg|x150px|centré|lien=https://www.acriv.org]]

Images dans un tableau centré

{| class="wikitable" style="margin: auto;"
|-
| [[Image:Batiment_01.jpg|x150px]] || [[Image:acriv-nuit.jpg|x150px]]
|}

créer une galerie

les paramètres

s'indiquent avec l'option

mode="parametre"

    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 "générer une galerie" dans la barre d'outils de la zone de modification de page (ou d'article) : Ce qui génère les codes suivants :

<gallery>
Exemple.jpg|Description 1
Exemple.jpg|Description 2
</gallery>

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 '''<center>''' et'''</center>''' servent à centrer la galerie)

<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>

• dessins 3D
• 

  GIMSAO/SIERA 3D

• 

  GIMSAO/SIERA 3D

• 

  GIMSAO/SIERA 3D

• 

  GIMSAO/SIERA 3D Vray

Exemple 2

avec le paramètre : mode="packed-hover"

 
<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>

• 

  GIMSAO/SIERA 3D

• 

  GIMSAO/SIERA 3D

• 

  GIMSAO/SIERA 3D

• 

  GIMSAO/SIERA 3D Vray

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 :

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)
  

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.

$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", 
		]
	],
];

{{#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é".

Exemple pour le bandeau de ce site :

{{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>
}}

Site d’aide à la création d’un wiki avec MédiaWiki (mais pas que...)