frendeitpt

pdf-gallery

Pdf
Cette action permet de proposer la visualisation et le téléchargement de tous les fichiers PDF d'un dossier.
 

🆙 pdf_gallery : Affiche une liste des PDF contenus dans un dossier

Cliquer pour lire la documentation

syntaxe {up pdf-gallery=dossier}
Template pour définir le rendu
##name## : nom et extension du fichier sans le prefixe date
##full-name## : nom et extension du fichier avec le prefixe date
##human-name## : nom du fichier sans les tirets
##size## : taille du fichier
##date## : date du fichier ou prefixe date du nom de fichier
##info## : fichier .info de même nom que le PDF avec texte descriptif
##image## : fichier jpg ou png de même nom que le PDF
##image-view## : idem ##image## avec lien pour afficher PDF dans fenêtre modale
##btn-view## : lien pour afficher PDF dans fenêtre modale. Texte selon btn-view-text
##btn-download##, ##name-download## : lien pour télécharger le PDF. Texte selon btn-download-text
##preview## : vue du PDF avec la méthode jsviewer de l'action PDF.
ATTENTION ##preview## charge tous les fichiers PDF lors de l'affichage de la page
@author: LOMART @version: UP-2.8 @license: GNU/GPLv3 @credit: Mozilla PDF.js @tags: File
  • pdf_gallery: chemin du dossier contennat les PDF
  • file-mask: pour sélectionner les fichiers d'un dossier. ex: fic-*
  • template (item-template) = ##human-name## [small](##size## - ##date##)[/small] ##btn-view## ##btn-download##: modele pour affichage (bbcode et motcle)
  • format-date = lang[en=m/d/Y H:i;fr=d/m/Y H:i]: format pour la date. ex: 'd/m/Y H:i'
  • main-tag = ul: balise principale. 0 = aucune
  • item-tag = li: balise pour le bloc d'un fichier. 0 = aucune
  • msg-no-file = en=no file;fr=aucun fichier: message si aucun fichier PDF dans le dossier
  • preview-width = 100%: largeur du bloc pour preview
  • preview-height = 500px:
  • preview-background: couleur fond perdu du PDF (preview et modal) au format #rrggbb
  • popup-width = 0: largeur de la fenêtre popup avec unité. Ex: 90vw, 80%, ...
  • popup-height = 0: hauteur de la fenêtre popup avec unité. Ex: 90vh, 500px, ...
  • popup-close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
  • btn-download-text = en=Download;fr=Telecharger: texte pour le bouton 'télécharger'
  • btn-download-style: classe et style inline pour le bouton 'télécharger'
  • btn-view-text = Voir: texte pour bouton 'voir'
  • btn-view-style: classe et style inline pour le bouton 'voir'
  • image-style: classe et style pour l'image
  • info-style: classe et style pour le contenu du fichier .info. Ajoute un bloc DIV
  • sort-by = name: tri des fichiers. name ou date. Voir la demo
  • sort-order = asc: sens du tri. asc ou desc
  • prefix-date-size = 0: ou le nombre de caractères pour définir la date. 13 si YYYYMMDDHHMM-, 11 si YYYY-MM-DD-
  • add-sitename: texte à ajouter au début des fichiers téléchargés
  • class: classe(s) pour bloc parent
  • style: style inline pour bloc parent
  • item-style: classe et style inline pour un bloc fichier
  • css-head (base-css): règles CSS ajoutés dans le HEAD

    Un exemple simple

    Pour la démonstration, je vais utiliser les PDF proposés sur la page téléchargements de ce site.

    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

    Mise en forme du résultat

    Par défaut, les fichiers sont présentés sous la forme d'une liste (UL/LI).

    Nous pouvons modifier le type avec les options main-tag et item-tag. Le style de ces blocs est réalisé avec les options class et style et item-style. Ces options acceptent le mélange de styles et de classes à condition de le séparer par des points-virgules
    btn-view-text et btn-view-style personnalisent le bouton qui affiche le PDF dans une fenêtre modale. Le principe est identique pour le bouton de téléchargement.

    Vous noterez que pour éviter de lister à nouveau tous les fichiers, j'utilise l'option file-mask qui utilise la syntaxe bien connue pour limiter la liste aux fichiers ayant le mot doc dans leur nom.

    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 doc actions v2.8 fr
    782.14 ko - 06/05/2022 15:34 📥 🔍
    UP doc actions v2.8 gb
    758.6 ko - 06/05/2022 15:34 📥 🔍

    Les mots-clés

    Cette action utilise un mécanisme de mots-clés et de 🆙 BB-Code by UP

    Le modèle peut être indiqué comme argument de l'option template ou comme contenu entre le shortcode ouvrant et fermant.

    mot-clé description
    ##name## le nom du fichier sans le chemin et l'extension .pdf et un éventuel préfixe pour la date
    ##full-name## le nom complet du fichier sans le chemin et l'extension .pdf. L'éventuel préfixe pour la date est conservé
    ##human-name## le nom du fichier sans extension et préfixe date. Les tirets simples sont remplacés par un espace. Les doubles tirets par un simple.
    ##size## la taille du fichier. L'unité est calculée pour faciliter la lecture
    ##date## la date et heure dans le format défini par l'option format-date. Voir "Préfixe date" ci-dessous.
    ##btn-view## le lien permettant d'afficher le PDF dans une fenêtre modale.
    L'option btn-view-text permet de définir le contenu du lien. %s dans le texte sera remplacé par le nom du fichier PDF. exemple : voir %s.
    L'option btn-view-style permet d'indiquer des classes et des styles pour la présentation.
    preview_background permet de changer la couleur du fond. Le format doit être #rrvvbb. popup-close-left met la croix de fermeture à gauche.
    ##btn-download## le lien pour télécharger le PDF.
    L'option btn-download-text permet de définir le contenu du lien. %s dans le texte sera remplacé par le nom du fichier PDF.  
    L'option btn-download-style permet d'indiquer des classes et des styles pour la présentation.
    ##info## pour afficher une description du fichier PDF, il est possible d'utiliser un fichier de même nom que le PDF avec une extension .info. Le format HTML est admis.
    ##image## pour afficher un aperçu du fichier PDF sans utiliser trop de ressources, je vous conseille de faire une copie d'écran du document à la taille d'utilisation dans votre page. Enregistrez l'image au format jpg ou png avec le même nom que le fichier PDF.
    ##image-view## idem à ##image## mais un clic sur l'image affichera le fichier PDF dans une fenêtre modale
    ##preview## affiche le fichier PDF. Pour éviter un long temps de chargement et un poids excessif de la page, je vous déconseille cette possibilité si vous avez beaucoup de fichiers.
    preview_width et preview_height sont disponibles pour gérer la taille d'affichage. preview_background permet de changer la couleur du fond. Le format doit être #rrvvbb

    Tri et préfixe date

    Par défaut, les fichiers sont affichés dans l'ordre alphabétique de leur nom.

    Le tri par date est délicat, car il est courant que les dates soient forcées à la date du jour lors d'une opération de copie ou de restauration du site.

    Pour éviter ce risque, il est possible d'ajouter la date au début du nom de tous les fichiers du dossier.

    Un fichier nommé YYYY-MM-DD-nom-du-fichier.pdf, sera :

    • affiché par le mot-clé ##name## comme nom-du-fichier.pdf
    • affiché par le mot-clé ##full-name## comme YYYY-MM-DD-nom-du-fichier.pdf
    • affiché par le mot-clé ##human-name## comme Nom du fichier
    • trié sur la date indiquée en préfixe
    • téléchargé sous le nom YYYY-MM-DD-nom-du-fichier.pdf

    Important :

    • l'option prefix-date-size doit indiquer le nombre de caractères utilisé pour définir la date. Soit 11 dans notre exemple
    • tous les fichiers PDF du dossier doivent avoir un prefixe de même longueur.

    Combinez les shortcodes

    Dans l'exemple précédent, nous avons utilisé les options "style" pour mettre en forme le résultat. Il est possible d'inclure le shortcode pdf-gallery dans celui d'une autre action de UP.

    flexauto

    {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 memo CSS v2.7

    Sur une seule page, toutes les classes CSS mises à disposition par UP

    475.8 ko - 06/05/2022 15:34

    📥 Télécharger
    UP-memo-CSS-v2.7.pdf

    Voir UP-memo-CSS-v2.7.pdf
    UP memo actions v2.8 fr



    42.87 ko - 06/05/2022 15:34

    📥 Télécharger
    UP-memo-actions-v2.8-fr.pdf

    Voir UP-memo-actions-v2.8-fr.pdf
    UP memo actions v2.8 gb



    43.39 ko - 06/05/2022 15:34

    📥 Télécharger
    UP-memo-actions-v2.8-gb.pdf

    Voir UP-memo-actions-v2.8-gb.pdf
    UP memo developpeur v2.8



    358.8 ko - 06/05/2022 15:34

    📥 Télécharger
    UP-memo-developpeur-v2.8.pdf

    Voir UP-memo-developpeur-v2.8.pdf
    UP memo redacteur v2.8



    179.61 ko - 06/05/2022 15:34

    📥 Télécharger
    UP-memo-redacteur-v2.8.pdf

    Voir UP-memo-redacteur-v2.8.pdf

    table-par-lignes et csv2table

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

    Aperçu Nom Taille Date Télécharger
    UP memo CSS v2.7 475.8 ko 06/05/2022 15:34 Telecharger
    UP memo actions v2.8 fr 42.87 ko 06/05/2022 15:34 Telecharger
    UP memo actions v2.8 gb 43.39 ko 06/05/2022 15:34 Telecharger
    UP memo developpeur v2.8 358.8 ko 06/05/2022 15:34 Telecharger
    UP memo redacteur v2.8 179.61 ko 06/05/2022 15:34 Telecharger

     

    Suggestions

    Trier

    Par défaut, les fichiers sont affichés dans l'ordre alphabétique de leur nom.

    Pour trier les fichiers par date, l'action propose 2 méthodes :

    • Date du fichier. Attention, cette date peut être modifiée lors de la copie ou restauration du site.
    • Date avant le nom du fichier. Exemple : 20221225-joyeux-noel.pdf. Cette méthode oblige l'ajout de la date pour tous les fichiers du dossier, mais elle garantit que la date ne sera jamais modifiée.
    Les options impliquées dans le tri

    sort-by : name ou date

    Le tableau interne $fileSort

        prefix-date-size  
        0 (path/nom.pdf) > 0 (path/YYYYMMDD-nom.pdf)
    sort-by name ["path/nom.pdf"] = "nom.pdf" ["path/nom.pdf"] = "nom.pdf"
      date ["path/nom.pdf"] = YYYYMMDD du fichier ["path/nom.pdf"] = "YYYYMMDD-nom.pdf"

    $date = '202203151200';

    echo date('d/m/Y H\hi', strtotime($date));

    $filename = '20220318-nom-du-fichier.pdf';
    list($date,$name) = explode('-',$filename, 2);

    echo '<br>' . $name . ' du ' . date('d/m/Y H\hi', strtotime($date));

    Préfixe

    Pour être sûr que tous les fichiers téléchargés sur votre site contiennent bien son nom, il pourrait être possible d'ajouter un préfixe au téléchargement. Exemple: UP-