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



Gérer les images

De Wiki rb-realisations.fr
Aller à : navigation, rechercher
Images dans les pages
RB-realisations 06VR.jpg
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
Barre d'outils : images

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
Information 02.jpg

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.

Batiment 01.jpg

(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]]
Batiment 01.jpg


Images dans un tableau centré

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


Batiment 01.jpg Acriv nuit.jpg


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) : Creer-galerie 01.jpg 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>


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>


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


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