Writing Guide/Image gallery

From EncyclopAtys

Jump to: navigation, search
    Script edit.png Translation StatusThis page is one of the 25 we would like to see translated into English.
De.png ÜbersetztGb.png Translation requestedEs.png No traducidoFr.png OriginalRu.png Не переведено
de:Anleitung zum Schreiben/Bildergalerie en:Writing Guide/Image gallery fr:Guide de rédaction/Galerie d'images
 
UnderConstruction.png
Translation to review
Don't blame the contributors, but come and help them 😎

Reference text ( Maintained text, used as reference ) :
Notes: (Craftjenn, 2023-10-18)


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".
In page editing mode, this is the 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:


<gallery>
Image1.png|Description, lucio's date...
Dummy.png|Description 2
</gallery>

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 <gallery>....</gallery>, used above uses traditional mode by default.

With many images of similar size, with caption, widths and heights tags :
code: <gallery caption="A title with caption" widths="180px" heights="120px" >>


And the same with the code <gallery caption="in 50px" heights="50px" >>


the same with the code <gallery mode=nolines>

<gallery mode=packed>

Images are displayed with the same height, although the width may vary to respect the original ratio.

With <gallery mode=packed> less wide image: centered and space-saving

<gallery mode="packed-hover" heights=64px perrow=7 >

mode=packed-overlay

<gallery mode=packed-overlay>

Slideshow with caption

<div style="max-width: 350px;"> <gallery caption="Title example" mode=slideshow>... </gallery> </div>

Similar (2 images) with lower height (heights="20px") is

Syntax

Useful attributes and values