[Wayfinder] how to get an incremented number

pierrot10 · January 5, 2022, 9:57pm

Hello and happy new year!!!

I am building a new web site with MODx.
For each resources, I create two Template variable

One is the introduction text for the related page
the second is for an image related to the page

Let’s say, I have 5 pages

On my home page, I would like to display 5 sections with the following HTML

<div class="row py-5" data-aos="fade-left">
      <div class="col-md-4">
        <figure>
          <img src="img/lecture-bio.png" class="img-fluid" title="Image of the related page" alt="Image of the related page"/>
        </figure>
      </div>
			<div class="col-md-8">
				<h2>Intro</h2>

      			<p>
        			Intro text
        		</p>
      			<p>
      				<a href="" class="read-more">
        				Read more (Link to the page)
      				</a>
      			</p>
			 </div>
		</div>

As you can see there is
data-aos="fade-left"
and the first colom has a image

My goal is to do that my first colomn has
data-aos="fade-left"
and the second
data-aos="fade-right"
the the third
data-aos="fade-left"
and the fourth
data-aos="fade-right"

and so one.

Same for the image
The first section, the image is on the first column, for the second, the image is in the second column, and so on,

How would you do that with wayfinder?

Let me provide you more information about how I setup wayfinder.

I create two Chunck
outerTplHome

	[[+wf.wrapper]]

and rowTplHome

<div [[+wf.classes]] data-aos="fade-left">
	<div class="col-md-4">
		<figure>
          [[+imagePage]]
    	</figure>
	</div>
	<div class="col-md-8">
			[[+introForHomePages]]
		<p>
			<a href="[[+wf.link]]" class="read-more" title="[[+wf.title]]" [[+wf.attributes]]>
				En savoir plus
    		</a>
    	</p>
	</div>
</div>

and here is my call

[[!Wayfinder? &startId=0 &level=1 &rowTpl=rowTplHome &outerTpl=outerTplHome &outerClass=outerClass &rowClass=row py-5 &levelClass=level &hideSubMenus=0 &hereClass=current &rowIdPrefix=1]]

My idea is to generate an incremental id on the row level.

and in my column level
<div [[+wf.classes]] data-aos="fade-left">

In that way, I could use the if plugin. The idea, if I can find a way the get a pair or impair number, I could print data-aos="fade-left" or data-aos="fade-right"

same for the column, I can build columns in consequence of the pair or impair number

Any idea about the best way to get my goal with a wayfinder parameter??
Note: I saw rowIdPrefix=1 but that do nothing

Many thanks

halftrainedharry · January 5, 2022, 10:16pm

Why exactly do you use Wayfinder for this?

You probably can use getResources (or pdoResources) instead. getResources has a tplOdd property and an [[+idx]] placeholder for such use cases.

pierrot10 · January 5, 2022, 11:01pm

Hello,
First, I just updated my first post because my rowTplHome and outerTplHome was wrong

Because, wayfinder goes to all pages of the first level, excepted the page I exclude. Additionally, I can exctract the description, the title, the content or a TV

In my point of view, it looked easier, but I can be wrong

I am going to see getRessource… I once use it as the following

[[getResources? 
    &parents=`[[*id]]` 
    &includeContent=`1` 
    &tplWrapper=`@INLINE <div class="accordion">[[+output]]</div>` 
    &tpl=`@INLINE <h4 class="accordeon">[[+pagetitle]]</h4><div class="panel">[[+content]]</div>`
	&sortby=`{"id":"ASC"}`
	&limit=`0`
	&showUnpublished=`0`
	&showHidden=`1`
]]

but the pages I need to get , have no parent page, but I am going to bette investigate on that option

servingpixels · January 5, 2022, 11:16pm

on solution is to use pdoResources / Snippets / pdoTools / docs.modx.pro

you can use &tplOdd to alternate between them or you can use one template and then alternate between them by using

e.g.

[[pdoResources?
    &parents=`0` //goes through all
    &depth=`1` // only 1 depth
	&limit=`100` // 100 max 
	&showUnpublished=`0` //dont show unpub
	&showHidden=`1 //show hidden
&resources=`-5` // resource you dont want included
    &includeContent=`1`  // incl content
&tpl=`@INLINE data-aos="fade-left"` // normal template its just an example
&tplOdd=`@INLINE data-aos="fade-right"` /odd one is just an example
]]

pierrot10 · January 5, 2022, 11:41pm

I just tried this with a better result


[[getResources? 
				&parents=`0`
				&resources=`5,6,7,8`
				&includeContent=`1` 
				&tplWrapper=`@INLINE <div class="1">[[+output]]</div>` 
				&tpl=`@INLINE <div class="row py-5" data-aos="fade-left">
				<div class="col-md-4">
					<figure>
          				[[+imagePage]]
    				</figure>
				</div>
				<div class="col-md-8">
					[[+introForHomePages]]
					<p>
						<a href="[[~[[+id]]]]" class="read-more" title="[[+pagetitle]]" [[+wf.attributes]]>
						En savoir plus
    					</a>
    				</p>
				</div></div>`
				&tplOdd=`@INLINE <div class="row py-5" data-aos="fade-right">
				<div class="col-md-8">
					[[+introForHomePages]]
					<p>
						<a href="[[~[[+id]]]]" class="read-more" title="[[+pagetitle]]" [[+wf.attributes]]>
						En savoir plus
    					</a>
    				</p>
				</div>
				<div class="col-md-4">
					<figure>
          				[[+imagePage]]
    				</figure>
				</div></div>`
				&sortby=`{"id":"ASC"}`
				&limit=`0`
				&showUnpublished=`0`
				&showHidden=`1`
			]]

Above, it does work perfectly because the TV are not displayed, but the order works

I also try to install pdoResources, but I can not find

Should not be listed there?

halftrainedharry · January 5, 2022, 11:44pm

pdoResources is part of the extra pdoTools.
So you have to install pdoTools in order to use pdoResources.

halftrainedharry · January 5, 2022, 11:49pm

With getResources the placeholders for the TVs have a prefix “tv.” (e.g. [[+tv.myTemplateVar]]).
So either change your placeholders or change the &tvPrefix property.

lucy · January 6, 2022, 7:37pm

While it’s always fascinating to me to see the power of the templating system of getResources/pdoResources, they (the odd and even templates) are not necessary for what (I think) you’re trying to achieve, and are too rigid to be the best solution imo. All you need is one line of CSS.

From the classes you have in your markup, I assume you are using Bootstrap 4. You can leverage the column order switching that is built into BS4. (Can do the same with any markup using flexbox.)

You can fetch all the content using a single template, in an order that makes sense semantically and structurally, and then use CSS to reorder the columns visually. You just need to add 3 classes and literally 1 CSS selector. Here is a code pen showing how to do this with your markup.

Note: a great benefit of doing it this way is the flexibility to change the display on smaller screens using media queries. In my codepen I show how you might have the photos remain first in order on smaller screens.

pierrot10 · January 6, 2022, 8:23pm

Dear Lucie, Thanks a lot. It’s very interresting what you wrote, Note, I have ti keep this
data-aos=“fade-left” and data-aos=“fade-right”. That allow me to have the section fading from left or right, while we scroll the page.

Additionally, I beleive, I will need getResource or pdoResource anyway, because those section are generate with the content (or a TV) of the other pages. But your comment is very interessting

lucy · January 6, 2022, 9:34pm

Yes I expected that you would still need to use get/pdoResources to grab the content from your resources.

I missed the importance of the data attribute for your purpose, and sadly there is no way that I know of to change the value of a data attribute using CSS. You could write a javascript to do it, but again, seems like overkill.

Do you really only have 4 resources going into this? If so, and you know the order they will be called in, you could just give each one the correct data-attribute in a TV.