file-in-content

File in content
affiche un bloc selon un template à partir d'un fichier texte et d'une image.

Cette action facilite la publication d'informations par un simple dépôt de fichiers comme dans cet exemple sur le site vagabondages.reseau-bretagne.com 

 

🆙 file_in_content : Utilise tous les fichiers d'un dossier pour construire un article

Cliquer pour lire la documentation

syntaxe {up file-in-content=fichier ou dossier}
Mots-clés
##title## : le nom du fichier txt
##content## : le contenu du fichier txt
##image## : fichier image de même nom que le fichier texte
##date## : la date du fichier
@author: LOMART @version: UP-2.8..1 @license: GNU/GPLv3 @tags: file
  • file_in_content: chemin et nom du fichier
  • file-mask: pour sélectionner les fichiers d'un dossier sur le serveur. ex: fic-*
  • maxi: nombre maxima de fichier (selon sort-order).
  • sort-order = desc: sens du tri. asc ou desc. Tri selon date
  • msg-no-file = en=no file;fr=aucun fichier: message si aucun fichier PDF dans le dossier
  • template (item-template) = [h2]##title##[/h2][div]##image####content##[/div]: modèle pour affichage

balise et style du bloc contenant les différents fichiers

  • main-tag (block) = div: balise pour le bloc externe (si main-tag<>0)
  • main-style: idem class & style

balise et style du bloc d'un fichier

  • item-tag = div: balise pour le bloc d'un fichier (si item-tag<>0)
  • item-style: style et classe pour le bloc d'un fichier

Définition pour ##image##

  • image-style: style et classe pour l'image
  • image-popup: 1 pour afficher en grand dans fenêtre modale
  • image-extension = jpg,JPG,jpeg,JPEG,png,PNG: liste des extensions acceptées

Formattage

  • HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
  • EOL: forcer un retour à la ligne
  • 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'

style et options secondaires

  • id: identifiant
  • class: classe(s) pour bloc (si main-tag<>0)
  • style: idem class
  • css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

Un exemple simple

{up file-in-content=images/actions-demo/file-content
 | maxi=1}

Le contenu ci-contre est affiché à l'aide de ce shortcode.

Ce shortcode affiche un bloc d'information avec le contenu d'un fichier texte et une image de même nom dans le dossier "images/actions-demo/file-content". L'option "maxi=1" affiche uniquement le plus récent.

Par défaut, le template pour la mise en page est :

[h2]##title##[/h2][div]##image####content##[/div]

  • ##title## : le nom du fichier texte (.txt)
  • ##image## : le fichier image (.jpg ou .png) de même nom que le fichier texte
  • ##content## : le contenu du fichier texte (.txt) HTML admis.

UP le plugin universel

Découvrez l'extension aux 150 actions qui va favoriser votre imagination et créativité.
Toutes les informations sur up.lomart.fr

Le dossier utilisé pour les démonstrations

  • images/actions-demo/file-content
    • 202207010900-LM-custom-module-personnalisé.png
    • 202207010900-LM-custom-module-personnalisé.txt
    • 202207040717-LM--SCSS--compiler.txt
    • 202207040717-LM--SCSS--compiler.txt.png
    • 202207300724-UP_le_plugin_universel.jpg
    • 202207300724-UP_le_plugin_universel.txt
    • index.html

Ce dossier contient 3 groupes de fichiers avec le même nom, mais des extensions différentes. .txt pour le texte et .jpg ou .png pour les images.

A la première lecture d'un fichier, Up ajoute un timestamp (AAAAMMJJHHMM) devant le nom du fichier. Cette astuce permet de neutraliser le changement de date des fichiers durant une restauration du site.

Le nom des fichiers images peut reprendre ou non l'extension .txt

Avec du style

UP le plugin universel

Découvrez l'extension aux 150 actions qui va favoriser votre imagination et créativité.
Toutes les informations sur up.lomart.fr

LM-SCSS-compiler

Un plugin pour compiler tous les SCSS d'un site. Fonction map intégrée.

LM custom module personnalisé

LM-Custom est un module qui permet de saisir du code HTML, PHP, Javascript, CSS. Il permet aussi de charger des ressources. Il existe en version frontend et backend.
{up file-in-content=images/actions-demo/file-content
 | main-style=ph1;bd-brun
 | item-style=float-clear;bg-beige;p1;mv1
 | image-style=float:left;mr1;max-width:100px
 | css-head=#id h2[margin:0 0 10px 0;padding:0;border:0;color:var(--brun)]
}

Pour obtenir ce résultat, il faut définir des styles CSS à l'aide d'options.

  1. on utilise la totalité des fichiers du répertoire
  2. main-style : le bloc principal a une bordure brune. un padding est ajouté en haut et en bas
  3. item-style : le style de chacun des blocs internes neutralise les éventuels blocs flottants. un fond beige et une bordure rouge habille chaque bloc. on ajoute un padding et une marge au-dessous
  4. image-style : l'image flotte à gauche avec marge sur sa droite. On limite sa taille à 100px
  5. css-head : permet d'annuler les styles du template pour le titre h2. Sa couleur est le brun défini par UP

En collaboration avec une autre action

UP le plugin universel

Découvrez l'extension aux 150 actions qui va favoriser votre imagination et créativité.
Toutes les informations sur up.lomart.fr

LM-SCSS-compiler

Un plugin pour compiler tous les SCSS d'un site. Fonction map intégrée.

LM custom module personnalisé

LM-Custom est un module qui permet de saisir du code HTML, PHP, Javascript, CSS. Il permet aussi de charger des ressources. Il existe en version frontend et backend.
{up flexauto=3blocs}
   {up file-in-content=images/actions-demo/file-content
   | main-tag=0
   | item-style=float:clear;bg-blanc;bd-rougeFonce;bd2
   | image-style=float:right;max-width:150px
   | template=##image##[h2 class="bg-rougeFonce t-jaune p1 m0 bd0"]##title##[/h2][div class="ph1"]##content##[/div]
   }
{/up flexauto}
  1. nous utilisons l'action flexauto pour la mise en page sur 3 colonnes responsives
  2. l'action file-in-content utilise tous les fichiers du dossier
  3. l'option main-tag=0 indique de ne pas mettre de bloc autour des blocs item puisque l'action flexauto s'en charge
  4. le style de chaque item annulera le float de l'image et ajoute une bordure
  5. l'image flottera à droite avec une largeur maximale de 150px
  6. l'option template définit la mise en page. Les classes sont directement ajoutées dans les balises. On utilise la syntaxe bbcode.

Les autres options

Options description
file_in_content chemin et nom du fichier
file-mask pour sélectionner les fichiers d'un dossier sur le serveur. ex: fic-*
maxi nombre maxima de fichier (selon sort-order).
sort-order sens du tri. asc ou desc (par défaut). Tri selon date
msg-no-file message si aucun fichier PDF dans le dossier
template (item-template) modèle de mise en forme.
main-tag balise pour le bloc externe ( aucune si main-tag=0)
main-style idem class & style
item-tag balise pour le bloc d'un fichier (si item-tag<>0)
item-style style et classe pour le bloc d'un fichier
image-style style et classe pour l'image
image-popup 1 pour afficher en grand dans fenêtre modale
image-extension liste des extensions acceptées
HTML 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
EOL forcer un retour à la ligne
block (bloc) balise principale
format-date format pour la date. ex: 'd/m/Y H:i'
class classe(s) pour bloc (si main-tag<>0)
style idem class
css-head (base-css) règles CSS définies par le webmaster (ajout dans le head)

 

Pour info, cette page utilise 14 action(s) :
box (1) upactionslist (1) flexauto (4) file-in-content (3) div (1) folder-list (1) flexbox (1) csv2table (1) jcontent-info (1)
Détails