Writing Guide/Image gallery - Revision history

Craftjenn: /* Slideshow with caption */

2023-10-18T08:51:50Z

‎Slideshow with caption

Craftjenn at 08:49, 18 October 2023

2023-10-18T08:49:07Z

Craftjenn at 08:39, 18 October 2023

2023-10-18T08:39:26Z

Craftjenn: Created page with "{{TIP|DE=4|EN=1|ES=|FR=0|RU=}} {{Trad|DE=Anleitung zum Schreiben/Bildergalerie|FR=Guide de rédaction/Galerie d'images|EN=Writing Guide/Image gallery|palette=wiki|H..."

2023-10-18T08:32:59Z

Created page with "{{TIP|DE=4|EN=1|ES=|FR=0|RU=}} <noinclude>{{Trad|DE=Anleitung zum Schreiben/Bildergalerie|FR=Guide de rédaction/Galerie d'images|EN=Writing Guide/Image gallery|palette=wiki|H..."

New page

{{TIP|DE=4|EN=1|ES=|FR=0|RU=}}
<noinclude>{{Trad|DE=Anleitung zum Schreiben/Bildergalerie|FR=Guide de rédaction/Galerie d'images|EN=Writing Guide/Image gallery|palette=wiki|H=1}}</noinclude>

If you have several images, you can use the "Picture gallery".

* Using the toolbar in wiki edit mode: click on Advanced to expand Advanced Mode as in the image above, so as to see the icon just to the right of "Insert".

[[File:Barreswiki.png|cadre|center|In page editing mode, this is the [[BarreOutilsW#Outils|toolbar]] d'édition du wiki, in '''Advances Mode''']]
* Or directly via the wiki code - which in this case is simplest, by inserting this simple code for example:
<div style="margin:0em; padding:1em 2em;border: thin inset #{{ColorAtys|type=dark|group=HRP}};background:#{{ColorAtys|type=light|group=HRP}};color:#{{ColorAtys|type=fg|group=HRP}};">
<poem><nowiki>
<gallery>
Image1.png|Description, lucio's date...
Dummy.png|Description 2
</gallery>
</nowiki></poem></div>

This makes it easier to read/modify the wiki code, because with gallery tags, each image will be on one line (in the wiki code), with a simple syntax: filename.jpg the "vertical bar" ('''AltGr+6'') and a description (which can be formatted, contain links to other pages, ...) :

<noinclude>
[[Category:Help|Picture gallery]]
</noinclude>

@@ Line 111: / Line 111: @@
 </div>
-Similar (2 images) with lower height (heights="20px") is {{KO}}
+Similar (2 images) with lower height (heights="20px") is KO {{KO}}
 <gallery heights="20px" mode=slideshow>
 Dummy.png|Description 1

@@ Line 1: / Line 1: @@
-{{TIP|DE=4|EN=1|ES=|FR=0|RU=}}
+{{TIP|DE=4|EN=3|ES=|FR=0|RU=}}
 <noinclude>{{Trad|DE=Anleitung zum Schreiben/Bildergalerie|FR=Guide de rédaction/Galerie d'images|EN=Writing Guide/Image gallery|palette=wiki|H=1}}</noinclude>
@@ Line 118: / Line 118: @@
 == Syntax ==
+Source : https://en.wikipedia.org/wiki/Help:Gallery_tag
 === Useful attributes and values ===

← Older revision		Revision as of 08:39, 18 October 2023
Line 18:		Line 18:
	This makes it easier to read/modify the wiki code, because with gallery tags, each image will be on one line (in the wiki code), with a simple syntax: filename.jpg the "vertical bar" ('''AltGr+6'') and a description (which can be formatted, contain links to other pages, ...) :		This makes it easier to read/modify the wiki code, because with gallery tags, each image will be on one line (in the wiki code), with a simple syntax: filename.jpg the "vertical bar" ('''AltGr+6'') and a description (which can be formatted, contain links to other pages, ...) :

		+	== Some examples ==
		+	* The code <nowiki><gallery>....</gallery></nowiki>, used above uses traditional mode by default.

		+	With many images of similar size, with caption, widths and heights tags :<br />
		+	code: <nowiki><gallery caption="A title with caption" widths="180px" heights="120px" >></nowiki>
		+	<gallery caption="A title with caption" widths="180px" heights="120px" >>
		+	Dummy.png\|The ASA emblem, ex de gallery
		+	Wiki-bar-insimg.png\|A long description, but necessary for the page on which this image gallery appears, because you can also ''format'' it!
		+	Dummy.png\|Titre 1
		+	Dummy.png\|Titre 2
		+	Dummy.png\|Titre 3
		+	Dummy.png\|Titre 4
		+	Dummy.png\|Titre 5
		+	</gallery>


		+	And the same with the code <nowiki><gallery caption="in 50px" heights="50px" >></nowiki>
		+	<gallery caption="in 50px" heights="50px" >>
		+	Dummy.png\|The ASA emblem, ex de gallery
		+	Wiki-bar-insimg.png\|A long description, but necessary for the page on which this image gallery appears, because you can also ''format'' it!
		+	Dummy.png\|Titre 1
		+	Dummy.png\|Titre 2
		+	Dummy.png\|Titre 3
		+	Dummy.png\|Titre 4
		+	Dummy.png\|Titre 5
		+	</gallery>
		+
		+
		+	=== the same with the code <nowiki><gallery mode=nolines></nowiki>===
		+	<gallery mode=nolines>
		+	Barreswiki.png\|Edit mode toolbar for this wiki
		+	Dummy.png\|The ASA emblem, ex de gallery
		+	Wiki-bar-insimg.png\|A long description, but necessary for the page on which this image gallery appears, because you can also ''format'' it!
		+	Dummy.png\|Titre 1
		+	Dummy.png\|Titre 2
		+	Dummy.png\|Titre 3
		+	Dummy.png\|Titre 4
		+	Dummy.png\|Titre 5
		+	</gallery>
		+
		+	=== <nowiki><gallery mode=packed></nowiki> ===
		+	Images are displayed with the same height, although the width may vary to respect the original ratio.
		+	<gallery mode=packed>
		+	Barreswiki.png\|Barre d'outil du mode édition de ce wiki
		+	Dummy.png\|L'emblème de l'ASA, ex de gallerie
		+	Wiki-bar-insimg.png\|Une description longue mais nécessaire à la page où figure cette galerie d'image, car on peux aussi ''mettre en forme'' !
		+	</gallery>
		+
		+	With <nowiki><gallery mode=packed></nowiki> less wide image: centered and space-saving
		+	<gallery mode=packed>
		+	Dummy.png\|L'emblème de l'ASA, ex de gallerie
		+	Wiki-bar-insimg.png\|Une description longue mais nécessaire à la page où figure cette galerie d'image, car on peux aussi ''mettre en forme'' !
		+	Dummy.png\|Titre 1
		+	Dummy.png\|Titre 2
		+	Dummy.png\|Titre 3
		+	Dummy.png\|Titre 4
		+	Dummy.png\|Titre 5
		+	</gallery>
		+
		+	=== <nowiki><gallery mode="packed-hover" heights=64px perrow=7 ></nowiki> ===
		+	<gallery mode="packed-hover" heights=64px perrow=7 >
		+	File:Atrium_(GM)_guild.png\|Support
		+	File:Animation guild-icon.png\|Animation
		+	File:Level-Design guild icon.png\|Level-Design
		+	File:Lore Team guild-icon.png\|Lore
		+	File:Ryzom Forge Graphics guild-icon.png\|Graphics
		+	File:Ryzom InCode Developers guild-icon.png\|Developers
		+	File:Translation Team guild-icon.png\|Translation
		+	</gallery>
		+
		+	=== mode=packed-overlay ===
		+	<nowiki><gallery mode=packed-overlay></nowiki>
		+	<gallery mode=packed-overlay>
		+	Dummy.png\|Ex 1
		+	Wiki-bar-insimg.png\|Ex 2
		+	Dummy.png\|Titre 1
		+	Dummy.png\|Titre 2
		+	Dummy.png\|Titre 3
		+	Dummy.png\|Titre 4
		+	Dummy.png\|Titre 5
		+	</gallery>
		+
		+	=== Slideshow with caption ===
		+	<nowiki><div style="max-width: 350px;"> <gallery caption="Title example" mode=slideshow>... </gallery>
		+	</div></nowiki>
		+	<div style="max-width: 350px;">
		+	<gallery caption="Titre exemple" mode=slideshow>
		+	Dummy.png\|Description 1
		+	Wiki-bar-insimg.png\|Une description longue mais nécessaire à la page où figure cette galerie d'image, car on peux aussi ''mettre en forme'' !
		+	Dummy.png\|Description 2
		+	</gallery>
		+	</div>
		+
		+	Similar (2 images) with lower height (heights="20px") is {{KO}}
		+	<gallery heights="20px" mode=slideshow>
		+	Dummy.png\|Description 1
		+	Dummy.png\|Description 2
		+	</gallery>
		+
		+	== Syntax ==
		+
		+	=== Useful attributes and values ===