Dotclear

Vous n'êtes pas identifié(e).

Annonce

13 février 2024 Sortie de Dotclear 2.29

#1 2018-11-08 17:07:01

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

tpl:LoopPosition, une histoire de modulo ?

Bonjour à tous,

Dans le cadre d'un casse-tête pour mon association, j'essaie de mettre un coup de peinture neuf au thème que j'avais développé.

J'essaie de faire une boucle à l'intérieur de <tpl:Entries> afin d'afficher :

- Les 2 premiers billets avec leur présentation
- Les billets suivants encadrés dans un <div> spécifique toutes les 3 répétitions.

Avec la lecture de la documentation, j'ai découvert un nouvel attribut modulo. Hiha, ça ressemblait à un truc qui ferait mon bonheur :)

Sauf que... je n'arrive pas au résultat espéré !

Voici le code testé :

<!-- # Start the two first entries -->
<tpl:LoopPosition start="1" length="1">
<div class="card-deck-wrapper">
  <div class="card-deck">
    </tpl:LoopPosition>
    
    <tpl:LoopPosition start="1" length="2">
    <article class="card {{tpl:EntryIfOdd}} {{tpl:EntryIfFirst}}" id="p{{tpl:EntryID}}" lang="{{tpl:EntryLang}}" role="article">
      <a href="{{tpl:EntryURL}}" style="height: 250px;">{{tpl:EntryFirstImage class="h-100 card-img-top" size="m" with_category="1"}}</a>
      
      <div class="card-body">
        <h4 class="card-title d-inline-block text-truncate mw-100">
          <a href="{{tpl:EntryURL}}" title="{{tpl:EntryTitle encode_html="1"}}" data-toggle="tooltip" data-placement="left">{{tpl:EntryTitle encode_html="1"}}</a>
        </h4>
        
        <!-- # --BEHAVIOR-- publicEntryBeforeContent -->
        {{tpl:SysBehavior behavior="publicEntryBeforeContent"}}
        
        <tpl:EntryIf has_excerpt="1">
        <p class="card-text hidden-xs-down">{{tpl:EntryExcerpt encode_html="1" remove_html="1" cut_string="300"}}</p>
        </tpl:EntryIf>
        
        <!-- # --BEHAVIOR-- publicEntryAfterContent -->
        {{tpl:SysBehavior behavior="publicEntryAfterContent"}}
      </div>
      
      <div class="card-footer text-muted">
        <small>
          <i class="far fa-calendar-alt mr-1"></i> {{tpl:EntryDate}}
        </small>
        <small class="float-right">
          <a href="{{tpl:EntryURL}}#comments" class="text-muted border-0">
            <i class="fas fa-comment-alt mr-1"></i> {{tpl:EntryCommentCount none="0" one="1" more="%s"}}</a>
        </small>
      </div>
    </article>
    </tpl:LoopPosition>
    <tpl:LoopPosition start="2" length="1">
  </div> <!-- # End card-desk -->
</div> <!-- # End car-desk-wrapper -->
</tpl:LoopPosition> 
<!-- # End the two first entries -->

<!-- # Start now the next entries -->
<tpl:LoopPosition start="3" modulo="3">
<div class="card-deck-wrapper mt-5">
  <div class="card-deck">
    </tpl:LoopPosition>
    
    <tpl:LoopPosition start="3">
    <article class="card {{tpl:EntryIfOdd}} {{tpl:EntryIfFirst}}" id="p{{tpl:EntryID}}" lang="{{tpl:EntryLang}}" role="article">
      <a href="{{tpl:EntryURL}}" style="height: 150px;">{{tpl:EntryFirstImage class="h-100 card-img-top" size="m" with_category="1"}}</a>
      
      <div class="card-body">
        <h4 class="card-title d-inline-block text-truncate mw-100">
          <a href="{{tpl:EntryURL}}" title="{{tpl:EntryTitle encode_html="1"}}" data-toggle="tooltip" data-placement="left">{{tpl:EntryTitle encode_html="1"}}</a>
        </h4>
        
        <!-- # --BEHAVIOR-- publicEntryBeforeContent -->
        {{tpl:SysBehavior behavior="publicEntryBeforeContent"}}
        
        <tpl:EntryIf has_excerpt="1">
        <p class="card-text hidden-xs-down">{{tpl:EntryExcerpt encode_html="1" remove_html="1" cut_string="40"}}</p>
        </tpl:EntryIf>
        
        <!-- # --BEHAVIOR-- publicEntryAfterContent -->
        {{tpl:SysBehavior behavior="publicEntryAfterContent"}}
      </div>
      
      <div class="card-footer text-muted">
        <small>
          <i class="far fa-calendar-alt mr-1"></i> {{tpl:EntryDate}}
        </small>
        <small class="float-right">
          <a href="{{tpl:EntryURL}}#comments" class="text-muted">
            <i class="fas fa-comment-alt mr-1"></i> {{tpl:EntryCommentCount none="0" one="1" more="%s"}}
          </a>
        </small>
      </div>
    </article>
    
    <tpl:LoopPosition length="1" modulo="3">
  </div>
</div>
</tpl:LoopPosition>
    </tpl:LoopPosition>

Voici le rendu :(
Voir la cata'


Quelqu'un aurait une idée ?


Merci !

Dernière modification par Mathieu M. (2018-11-08 17:11:05)

Hors ligne

#2 2018-11-08 19:02:03

Philippe
Stagiaire
Lieu : Toulon
Inscription : 2004-06-13
Site Web

Re : tpl:LoopPosition, une histoire de modulo ?

Dans la deuxième partie, tu commences à ouvrir deux blocs div avec

<tpl:LoopPosition start="3" modulo="3">
<div class="card-deck-wrapper mt-5">
  <div class="card-deck">
    </tpl:LoopPosition>
    
    <tpl:LoopPosition start="3">

Tout cela est fermé avec

<tpl:LoopPosition length="1" modulo="3">
  </div>
</div>
</tpl:LoopPosition>
    </tpl:LoopPosition>

Le dernier </tpl:LoopPosition> me semble mal placé, il devrait être avant la fermeture des div (card-deck-wrapper et card-deck), car il ferme <tpl:LoopPosition start="3">

Ce qui donnerait à la fin

    </tpl:LoopPosition>
    <tpl:LoopPosition length="1" modulo="3">
  </div>
</div>
</tpl:LoopPosition>

Sans avoir pu tester...

Hors ligne

#3 2018-11-08 19:40:25

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

Re : tpl:LoopPosition, une histoire de modulo ?

Ca semble pire : voir en direct

Le code actuel est le suivant avec la modif que tu proposes :

<!-- # Start the two first entries -->
<tpl:LoopPosition start="1" length="1">
<div class="card-deck-wrapper mb-5">
  <div class="card-deck">
    </tpl:LoopPosition>
    
    <tpl:LoopPosition start="1" length="2">
    <article class="card {{tpl:EntryIfOdd}} {{tpl:EntryIfFirst}}" id="p{{tpl:EntryID}}" lang="{{tpl:EntryLang}}" role="article">
      <a href="{{tpl:EntryURL}}" style="height: 250px;">{{tpl:EntryFirstImage class="h-100 card-img-top" size="m" with_category="1"}}</a>
      
      <div class="card-body">
        <h4 class="card-title d-inline-block text-truncate mw-100">
          <a href="{{tpl:EntryURL}}" title="{{tpl:EntryTitle encode_html="1"}}" data-toggle="tooltip" data-placement="left">{{tpl:EntryTitle encode_html="1"}}</a>
        </h4>
        
        <!-- # --BEHAVIOR-- publicEntryBeforeContent -->
        {{tpl:SysBehavior behavior="publicEntryBeforeContent"}}
        
        <tpl:EntryIf has_excerpt="1">
        <p class="card-text hidden-xs-down">{{tpl:EntryExcerpt encode_html="1" remove_html="1" cut_string="300"}}</p>
        </tpl:EntryIf>
        
        <!-- # --BEHAVIOR-- publicEntryAfterContent -->
        {{tpl:SysBehavior behavior="publicEntryAfterContent"}}
      </div>
      
      <div class="card-footer text-muted">
        <small>
          <i class="far fa-calendar-alt mr-1"></i> {{tpl:EntryDate}}
        </small>
        <small class="float-right">
          <a href="{{tpl:EntryURL}}#comments" class="text-muted border-0">
            <i class="fas fa-comment-alt mr-1"></i> {{tpl:EntryCommentCount none="0" one="1" more="%s"}}</a>
        </small>
      </div>
    </article>
    </tpl:LoopPosition>
    <tpl:LoopPosition start="2" length="1">
  </div> <!-- # End card-desk -->
</div> <!-- # End car-desk-wrapper -->
</tpl:LoopPosition> 
<!-- # End the two first entries -->

<!-- # Start now the next entries -->
<tpl:LoopPosition start="3" modulo="3">
<div class="card-deck-wrapper mt-5">
  <div class="card-deck">
    </tpl:LoopPosition>
    
    <tpl:LoopPosition start="3">
    <article class="card {{tpl:EntryIfOdd}} {{tpl:EntryIfFirst}}" id="p{{tpl:EntryID}}" lang="{{tpl:EntryLang}}" role="article">
      <a href="{{tpl:EntryURL}}" style="height: 150px;">{{tpl:EntryFirstImage class="h-100 card-img-top" size="m" with_category="1"}}</a>
      
      <div class="card-body">
        <h4 class="card-title d-inline-block text-truncate mw-100">
          <a href="{{tpl:EntryURL}}" title="{{tpl:EntryTitle encode_html="1"}}" data-toggle="tooltip" data-placement="left">{{tpl:EntryTitle encode_html="1"}}</a>
        </h4>
        
        <!-- # --BEHAVIOR-- publicEntryBeforeContent -->
        {{tpl:SysBehavior behavior="publicEntryBeforeContent"}}
        
        <tpl:EntryIf has_excerpt="1">
        <p class="card-text hidden-xs-down">{{tpl:EntryExcerpt encode_html="1" remove_html="1" cut_string="40"}}</p>
        </tpl:EntryIf>
        
        <!-- # --BEHAVIOR-- publicEntryAfterContent -->
        {{tpl:SysBehavior behavior="publicEntryAfterContent"}}
      </div>
      
      <div class="card-footer text-muted">
        <small>
          <i class="far fa-calendar-alt mr-1"></i> {{tpl:EntryDate}}
        </small>
        <small class="float-right">
          <a href="{{tpl:EntryURL}}#comments" class="text-muted">
            <i class="fas fa-comment-alt mr-1"></i> {{tpl:EntryCommentCount none="0" one="1" more="%s"}}
          </a>
        </small>
      </div>
    </article>
    
    </tpl:LoopPosition>
    <tpl:LoopPosition length="1" modulo="3">
  </div>
</div>
</tpl:LoopPosition>

Hors ligne

#4 2018-11-09 07:14:01

Philippe
Stagiaire
Lieu : Toulon
Inscription : 2004-06-13
Site Web

Re : tpl:LoopPosition, une histoire de modulo ?

Mathieu M. a écrit :

Ca semble pire

Et je n'en suis pas trop surpris, désolé, c'était tenter un peu ma chance ;)

Hors ligne

#5 2018-11-09 08:39:15

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : tpl:LoopPosition, une histoire de modulo ?

Ce n'est pas un problème de tags (enfin pas uniquement) c'est un problème de maths !!!!

Tu prends les deux billets ensemble, jusque là pas de soucis.
Ensuite tu prends les billets 3 par 3 à partir du troisième, pas de soucis non plus. Le soucis se situe pour les ouvertures de bloc card-deck.
Il faudrait faire :
- ouverture du bloc card-deck
- 3 billets
- fermeture du bloc card-deck

Sauf que tu fais :
- ouverture du bloc card-deck
- 1 billet
- fermeture du bloc card-deck
- 2 billets

etc

Cela ne me semble pas simple de faire cela sans rien modifié. En revanche je mettrais les billets à partir du troisième dans un unique bloc card-deck et je jouerais en css sur la taille de chaque article pour afficher 3 billets par ligne. En jouant avec des medias queries tu dois pouvoir gérer le fait d'en afficher 3, puis 3 pour les écrans plus petits, puis 1 seul.
Cela ne répond pas directement à ta question mais je pense que tu dois pouvoir t'en sortir. Qu'en penses-tu ?


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#6 2018-11-09 19:04:13

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

Re : tpl:LoopPosition, une histoire de modulo ?

Ok, cela règle une partie du problème, ce qui est déjà pas mal :)

Le "défaut" de ne pas passer chaque ligne de 3 billets dans un <div class="card-desk">, c'est la perte de "l'égalisation" des hauteurs de chaque sous-bloc.

Hors ligne

#7 2018-11-10 08:16:03

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : tpl:LoopPosition, une histoire de modulo ?

Du coup il va falloir écrire un peu de code. J'essaie de regarder. Je te tiens au courant, que je trouve quelque chose ou pas.


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#8 2018-11-10 08:54:09

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : tpl:LoopPosition, une histoire de modulo ?

Je mets à disposition chez moi un fichier _public.php qui propose un certain nombre de marqueurs de template dont EntryIfNotFirst et EntryIfNotOdd qui peuvent servir dans le cadre d'une boucle, notamment en stylant certains blocs selon la position de l'entrée. En complément de la balise <tpl:EntryIf>

Hors ligne

#9 2018-11-10 15:58:00

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

Re : tpl:LoopPosition, une histoire de modulo ?

@nikrou : merci par avance pour ton retour ;)

@Mirovinben : soit je ne comprends pas, soit je ne vois pas ce que les 2 balises pourraient m'apporter dans ce contexte précis. A la rigueur, il faudrait 2 marqueurs <tpl:EntryIfEvery posts="3"> par exemple :)

Hors ligne

#10 2018-11-11 05:41:58

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : tpl:LoopPosition, une histoire de modulo ?

Les deux balises dont je parle permettent d'ajouter d'un texte personnalisé en fonction de la position/parité de chaque entrée. Ce texte peut être placé où l'on veut dans la boucle, notamment (et surtout ?) au niveau de déclarations CSS "class" et/ou "id" permettant ainsi de styler la balise concernée par cette class/id en fonction du rang de l'entrée.

Exemples chez moi :

<tpl:DateHeader><div class="day-date {{tpl:EntryIfFirst}} {{tpl:EntryIfNotFirst}}"></tpl:DateHeader>

qui, selon le cas, donne :

<div class="day-date first ">

ou

<div class="day-date next">

ou, un peu plus exhaustif :

<article id="p{{tpl:EntryID}}" class="post-item title {{tpl:EntryIfOdd}} {{tpl:EntryIfNotOdd}} {{tpl:EntryIfFirst}} {{tpl:EntryIfNotFirst}} cat-{{tpl:PackedCategoryName}} {{tpl:EntryMyMetaValue id="typePost" key="1"}} {{tpl:EntryMyMetaValue id="moreCSS" key="1"}} {{tpl:EntryMyMetaValue id="imageWidth" key="1"}}"  lang="{{tpl:EntryLang}}" >

qui, selon le cas, donne :

<article id="p2218" class="post-item title odd  first  cat-japon2012 dc-photo  "  lang="fr" >

ou

<article id="p2219" class="post-item title  even  next cat-japon2012 dc-photo  "  lang="fr" >

par exemple...

Après, la main passe au thème.

Hors ligne

#11 2018-11-11 14:10:45

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : tpl:LoopPosition, une histoire de modulo ?

Bon j'ai bricolé un truc. Cela semble marcher mais ce n'est pas forcément très générique. Je te laisse l'adapter (en changeant le nom des balises, ...) ou me demander si tu n'y arrives pas.
Si le nombre de billets ne tombe pas juste j'ai choisi de fermer le bloc même s'il n'y en a pas 3.

Pour que tout cela fonctionne, il faut ajouter du code dans le fichier _public.php du thème utilisé. Je l'ai fait dans le thème berlin et du coup il y aura surement des trucs à modifier.

$core->tpl->addBlock('EntryHeaderIfEvery', array(__NAMESPACE__.'\tplBerlinTheme', 'EntryHeaderIfEvery'));
$core->tpl->addBlock('EntryFooterIfEvery', array(__NAMESPACE__.'\tplBerlinTheme', 'EntryFooterIfEvery'));

class tplBerlinTheme
{
    public function EntryHeaderIfEvery($attr, $content)
    {
        $start  = isset($attr['start']) ? (integer) $attr['start'] : '0';
        $modulo = isset($attr['modulo']) ? (integer) $attr['modulo'] : 'null';


        $res = '<?php if (($_ctx->posts->index() >= ' . $start . ') && (($_ctx->posts->index() + ' . $start .') % ' . $modulo.')==0) : ?>';
        $res .= '<?php $_ctx->index_end_block = $_ctx->posts->index() - 1 + ' . $modulo . ';?>';
        $res .= $content;
        $res .= "<?php endif; ?>";

        return $res;
    }

    public function EntryFooterIfEvery($attr, $content)
    {
        $start  = isset($attr['start']) ? (integer) $attr['start'] : '0';
        $modulo = isset($attr['modulo']) ? (integer) $attr['modulo'] : 'null';

        $res = '<?php if (($_ctx->posts->index() >= ' . $start . ') &&  (($_ctx->posts->index() == $_ctx->index_end_block) || $_ctx->posts->isEnd())) : ?>';
        $res .= $content;
        $res .= "<?php endif; ?>";

        return $res;
    }
}

Après dans le template home.htmlj'ai fait quelque chose comme ça :

	<tpl:SysIf current_mode="default">
	    <tpl:LoopPosition start="1" length="1">
		<div class="card-deck-wrapper">
		    <div class="card-deck">
	    </tpl:LoopPosition>

	    <tpl:LoopPosition start="1" length="2">
		<article class="card {{tpl:EntryIfOdd}} {{tpl:EntryIfFirst}}" id="p{{tpl:EntryID}}" lang="{{tpl:EntryLang}}" role="article">
		    <a href="{{tpl:EntryURL}}" style="height: 250px;">{{tpl:EntryFirstImage class="h-100 card-img-top" size="m" with_category="1"}}</a>

		    <div class="card-body">
			<h4 class="card-title d-inline-block text-truncate mw-100">
			    <a href="{{tpl:EntryURL}}" title="{{tpl:EntryTitle encode_html="1"}}" data-toggle="tooltip" data-placement="left">{{tpl:EntryTitle encode_html="1"}}</a>
			</h4>

			<!-- # --BEHAVIOR-- publicEntryBeforeContent -->
			{{tpl:SysBehavior behavior="publicEntryBeforeContent"}}

			<tpl:EntryIf has_excerpt="1">
			    <p class="card-text hidden-xs-down">{{tpl:EntryExcerpt encode_html="1" remove_html="1" cut_string="300"}}</p>
			</tpl:EntryIf>

			<!-- # --BEHAVIOR-- publicEntryAfterContent -->
			{{tpl:SysBehavior behavior="publicEntryAfterContent"}}
		    </div>

		    <div class="card-footer text-muted">
			<small>
			    <i class="far fa-calendar-alt mr-1"></i> {{tpl:EntryDate}}
			</small>
			<small class="float-right">
			    <a href="{{tpl:EntryURL}}#comments" class="text-muted border-0">
				<i class="fas fa-comment-alt mr-1"></i> {{tpl:EntryCommentCount none="0" one="1" more="%s"}}
			    </a>
			</small>
		    </div>
		</article>
	    </tpl:LoopPosition>

	    <tpl:LoopPosition start="2" length="1">
		    </div>
		</div>
	    </tpl:LoopPosition>

	    <tpl:EntryHeaderIfEvery start="1" modulo="3">
		<div class="card-deck-wrapper mt-5">
		    <div class="card-deck">
	    </tpl:EntryHeaderIfEvery>

	    <tpl:LoopPosition start="3">
		<article class="card {{tpl:EntryIfOdd}} {{tpl:EntryIfFirst}}" id="p{{tpl:EntryID}}" lang="{{tpl:EntryLang}}" role="article">
		    <a href="{{tpl:EntryURL}}" style="height: 150px;">{{tpl:EntryFirstImage class="h-100 card-img-top" size="m" with_category="1"}}</a>

		    <div class="card-body">
			<h4 class="card-title d-inline-block text-truncate mw-100">
			    <a href="{{tpl:EntryURL}}" title="{{tpl:EntryTitle encode_html="1"}}" data-toggle="tooltip" data-placement="left">{{tpl:EntryTitle encode_html="1"}}</a>
			</h4>

			<!-- # --BEHAVIOR-- publicEntryBeforeContent -->
			{{tpl:SysBehavior behavior="publicEntryBeforeContent"}}

			<tpl:EntryIf has_excerpt="1">
			    <p class="card-text hidden-xs-down">{{tpl:EntryExcerpt encode_html="1" remove_html="1" cut_string="40"}}</p>
			</tpl:EntryIf>

			<!-- # --BEHAVIOR-- publicEntryAfterContent -->
			{{tpl:SysBehavior behavior="publicEntryAfterContent"}}
		    </div>

		    <div class="card-footer text-muted">
			<small>
			    <i class="far fa-calendar-alt mr-1"></i> {{tpl:EntryDate}}
			</small>
			<small class="float-right">
			    <a href="{{tpl:EntryURL}}#comments" class="text-muted">
				<i class="fas fa-comment-alt mr-1"></i> {{tpl:EntryCommentCount none="0" one="1" more="%s"}}
			    </a>
			</small>
		    </div>
		</article>

	    </tpl:LoopPosition>

	    <tpl:EntryFooterIfEvery start="1" modulo="3">
		    </div>
		</div>
	    </tpl:EntryFooterIfEvery>
	</tpl:SysIf>

Si tu n'arrives pas à adapter à ton thème, n'hésite pas à me demander.


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#12 2018-11-14 09:58:53

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

Re : tpl:LoopPosition, une histoire de modulo ?

Merci nikrou, je teste ta solution dans la semaine et je reviens te donner le résultat ! ;)

Hors ligne

#13 2018-11-14 19:18:21

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : tpl:LoopPosition, une histoire de modulo ?

Mathieu M. a écrit :

Merci nikrou, je teste ta solution dans la semaine et je reviens te donner le résultat ! ;)

Ok ça marche. N'hésite surtout pas si tout n'est pas clair.


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

Vous n'êtes pas identifié(e).

Pied de page des forums

Sites map