for loop for page array doesn't work

[joe_ma]

Hello

I'd like to build an unordered list for a front page that looks like this:

<ul class="topCircles" role="navigation">
            <li class="circle"><a href="#texte">texte</a></li>
            <li class="circle"></li>
            <li class="circle"><a href="logos.html">logos</a></li>
            <li class="circle"><a href="plakate.html">plakate</a></li>
            <li class="circle"><a href="events.html#">events</a></li>
            <li class="circle"><a href="krimitage.html">krimitage</a></li>
            <li class="circle"><a href="fotografie.html">fotografie</a></li>
            <li class="circle"></li>
            <li class="circle"><a href="sonstiges.html">sonstiges</a></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"><a href="ideen.html">ideen</a></li>
            <li class="circle"><a href="ueber.html">über</a></li>
            <li class="circle"><a href="mit.html">mit</a></li>
        </ul>

It's a 4×4 set of circles, some of them with links in it, some without. Redactors should be able to choose, at what position a certain page should be linked to.

So I put an integer field (front_position) into the template for these pages, where redactors indicate the desired position for the pages. I tried to achieve all of this with this code:

    $content .= '<main class="front">'; // Container for circles
    $content .= '<ul class="topCircles" role="navigation">';  // nav list 

    // Output of 16 li elements with links at the chosen postions

    $items = $page->children; // Array of pages
    
    $item = reset($items); // set the first element of the array

    // loop for 16 elements; put a link in it where front_position == $index
      
    for ($index = 1; $index <= 16; ++$index) { 
        $content .= '<li class="circle">';
        if ($item->front_position == $index) {
            $content .= '<a href="' . $item->url . '">' . $item->title . '</a>';
            $item = next($items);
        }
    $content .= '</li>';

    }  
            
    $content .= '</ul> 
                </main>'; // Ende Liste und Container

This doesn't work though. I only get 16 empty li elements.

Thanks for help.

[psy]

@joe_ma not sure if it's the issue but seems to me you're using a PHP array functions on a ProcessWire PageArray object - different beasts

1 hour ago, joe_ma said:

$items = $page->children; // Array of pages

Is not a PHP array. It is a ProcessWire PageArray.

[joe_ma]

Oops. So how can I achieve this List ?

[psy]

@joe_ma

Maybe something like (untested):

<?php

$content .= '<main class="front">'; // Container for circles
$content .= '<ul class="topCircles" role="navigation">';  // nav list 

// Output of 16 li elements with links at the chosen postions
$items = $page->children("limit=16, sort=sort"); // PageArray limited to 16 items. Sorted according to template/page children settings

foreach ($items as $item) {
    if ($item->front_position == $item->index() {
      $content .= '<a href="' . $item->url . '">' . $item->title . '</a>';
    }
    $content .= '</li>';
}  
            
$content .= '</ul> 
</main>'; // Ende Liste und Container

From the PW API Docs: https://processwire.com/api/ref/page/index/

 

[joe_ma]

That doesn't do the trick either. Since there are less than 16 pages in $items this produces only – in this case – 10 li elements. And they are without links. 

[ottogal]

1 hour ago, psy said:

@joe_ma

Maybe something like (untested):

<?php

$content .= '<main class="front">'; // Container for circles
$content .= '<ul class="topCircles" role="navigation">';  // nav list 

// Output of 16 li elements with links at the chosen postions
$items = $page->children("limit=16, sort=sort"); // PageArray limited to 16 items. Sorted according to template/page children settings

foreach ($items as $item) {
    if ($item->front_position == $item->index() {
      $content .= '<a href="' . $item->url . '">' . $item->title . '</a>';
    }
    $content .= '</li>';
}  
            
$content .= '</ul> 
</main>'; // Ende Liste und Container

From the PW API Docs: https://processwire.com/api/ref/page/index/

 

Aren't there missing the opening <li> tags?
It should be

foreach ($items as $item) {
	$content .= '<li>';
	if ($item->front_position == $item->index() {
		$content .= '<a href="' . $item->url . '">' . $item->title . '</a>';
	}
	$content .= '</li>';
}

 

[joe_ma]

I thought that maybe using the WireArray::Explode function to create an array first and then loop through this array could work. The code looks like this:

$content .= '<main class="front">'; // begin list container 
$content .= '<ul class="topCircles" role="navigation">';  // begin list for nav 

    $items = $page->children('sort=front_position'); // page array

    $links = $items->explode(function($item) { // turn into a php array
        return array(
            'pos' => $item->front_position, 
            'url' => $item->url, 
            'title' => $item->title
        ); 
    }); 

    $link = reset($links);

        for ($index = 1; $index <= 16; ++$index) { 
        $content .= '<li class="circle">';
        if ($link['pos'] == $index) {
            $content .= '<a href="' . $link['url'] . '">' . $link['title'] . '</a>';
            $link = next($link);
        }
    $content .= '</li>';

        }

    $content .= '</ul>  
                </main>'; // end nav and list container

This produces a list, but only with one link (the first one with "Text") and 15 empty li elements. $links does contain all the elements though, as shows print_r($links):

Array
(
    [0] => Array
        (
            [pos] => 1
            [url] => /rederei/text/
            [title] => Text
        )

    [1] => Array
        (
            [pos] => 3
            [url] => /rederei/logos/
            [title] => Logos
        )

    [2] => Array
        (
            [pos] => 4
            [url] => /rederei/plakate/
            [title] => Plakate
        )

    [3] => Array
        (
            [pos] => 5
            [url] => /rederei/events/
            [title] => Events
        )

    [4] => Array
        (
            [pos] => 6
            [url] => /rederei/krimitage/
            [title] => Krimitage
        )

    [5] => Array
        (
            [pos] => 7
            [url] => /rederei/fotografie/
            [title] => Fotografie
        )

    [6] => Array
        (
            [pos] => 9
            [url] => /rederei/sonstiges/
            [title] => Sonstiges
        )

    [7] => Array
        (
            [pos] => 14
            [url] => /rederei/ideen/
            [title] => Ideen
        )

    [8] => Array
        (
            [pos] => 15
            [url] => /rederei/ueber/
            [title] => Über
        )

    [9] => Array
        (
            [pos] => 16
            [url] => /rederei/mit/
            [title] => Mit
        )

)

Still don't know what's wrong with the loop.

[ottogal]

35 minutes ago, joe_ma said:

$link = next($link);

Should be $link = next($links);

[joe_ma]

Heureka!

Thanks so much, ottogal.