pdf-gallery

Le shortcode

{up pdf-gallery=files/doc}

Il suffit d'indiquer le chemin vers le dossier contenant les PDF.

La gestion du contenu consiste à ajouter et supprimer des fichiers.

Le résultat

• UP Memo actions v3.1 (fr) (45.59 ko - 26/09/2023 12:21) Voir Telecharger UP-Memo-actions-v3.1-(fr).pdf
• UP Memo actions v3.1 (gb) (43.52 ko - 26/09/2023 12:21) Voir Telecharger UP-Memo-actions-v3.1-(gb).pdf
• UP doc actions v3.1 (fr) (1.54 Mo - 26/09/2023 12:21) Voir Telecharger UP-doc-actions-v3.1-(fr).pdf
• UP doc actions v3.1 (gb) (1.52 Mo - 26/09/2023 12:21) Voir Telecharger UP-doc-actions-v3.1-(gb).pdf
• UP memo CSS v3.0 (489.68 ko - 26/09/2023 12:21) Voir Telecharger UP-memo-CSS-v3.0.pdf
• UP memo developpeur v3.1 (fr) (365.8 ko - 26/09/2023 12:21) Voir Telecharger UP-memo-developpeur-v3.1-(fr).pdf
• UP memo developpeur v3.1 (gb) (365.09 ko - 26/09/2023 12:21) Voir Telecharger UP-memo-developpeur-v3.1-(gb).pdf
• UP memo redacteur v3.1 (fr) (399.7 ko - 26/09/2023 12:21) Voir Telecharger UP-memo-redacteur-v3.1-(fr).pdf
• UP memo redacteur v3.1 (gb) (418.4 ko - 26/09/2023 12:21) Voir Telecharger UP-memo-redacteur-v3.1-(gb).pdf
• UP unicode top100 v3.0 (364.37 ko - 26/09/2023 12:21) Voir Telecharger UP-unicode-top100-v3.0.pdf

Le shortcode

{up pdf-gallery=files/doc | file-mask=*doc*
| main-tag=div | style=border:#369 2px solid;ph1
| item-tag=div | item-style=border:#369 1px solid;p1;mv1;bg-jauneClair
| template=[h5]##human-name##[/h5][small] ##size## - ##date##[/small] ##btn-download## ##btn-view##
| btn-view-text={up icon=Ux1F50D}  | btn-view-style=btn
| btn-download-text={up icon=Ux1F4E5}  | btn-download-style=btn
}

Le résultat

{up flexauto=3 | tablet=2 | bloc-style=border:1px solid #999; padding:10px | class=tc fg-gap}{up pdf-gallery=files/doc | file-mask=*memo*
    | main-tag=0 
    | item-tag=div
    | template=[h5]##human-name##[/h5][p]##info##[br]##image##[br][small] ##size## - ##date##[/small][/p] 
               ##btn-download## [br] ##btn-view##
    | btn-view-text=Voir %s  | btn-view-style=badge-vert;text-decoration:none
    | btn-download-text={up icon=Ux1F4E5} Télécharger[br]%s  | btn-download-style=btn;btn-info;mb1
  }{/up flexauto}

Le premier shortcode définit une grille responsive de 1 à 3 cellules selon la taille de l'écran. Nous ajoutons quelques styles pour le décor.

Le shortcode pdf-gallery liste tous les fichiers PDF contenant le mot "memo".
Pour être conforme aux attentes de flexauto, nous supprimons la présence d'un bloc principal (main-tag=0) et chaque ligne sera dans un bloc div (item-tag=div)
L'option template ne doit pas vous poser de problème.
Notez l'utilisation de ##info## et ##image## pour afficher des descriptions propres à chaque fichiers.

{up table-by-rows}
  {up csv2table | model=blue
    | header=Aperçu;Nom;Taille;Date;Télécharger
    | col=c10-l50-c10-c20-c10
    | css-head=#id img[max-height:60px]#id td[vertical-align:middle]}
    {up pdf-gallery=files/doc | file-mask=*memo*
      | main-tag=0 
      | item-tag=p
      | template=##image-view##;##human-name##;##size##;##date##;##btn-download##   
    }
  {/up csv2table}
{/up table-by-rows}

Nous utilisons l'action csv2table pour convertir la liste des fichiers en tableau. L'action table-by-rows se chargeant de la rendre responsive.

Les options de csv2table définissent le modèle de rendu (model=blue), le titre, la justification et la largeur des colonnes.
css-head nous permet d'agir sur le centrage vertical des cellules du tableau et limite la hauteur des images récupérées avec le mot-clé ##image-view##

pdf-gallery se contente de fournir les informations au format csv. Chaque champ est séparé par un point-virgule. Le bloc externe étant fourni par l'action cssv2table, on l'annule avec main-tag=0. Par contre, chaque ligne est retourné dans un bloc P.