Jump to content
jacmaes

Navigation and sibling pages

Recommended Posts

On a photographer's site, I have multiple albums. Each album is made up of a series of pages (1 image per page). So navigating the album is matter of going from one child page to the next.

Now let's say I'm viewing image number 15 in a very large album containing more than 100 images. Showing the full list of images in this album as a thumbnail gallery and highlighting the current image/page is easy enough:

 <?php foreach ($page->siblings as $child):
        $current = null;
        if ($child == $page) $current = " aria-current='page'";
        echo "<a$current href='{$child->url}'><img src='{$child->photo->size(150,150)->url}' width='75' height='75' alt=''></a>";
 endforeach; 
?>

But if my album contains 100 images, it becomes impractical and slow to show the full list of thumbnails. What I'd like to do instead is detect the current page/image position, and show the previous 10 and next 10 images. I've managed to show the next 10 with "slice":

<?php
$current_position = $page->index();
$next_10 = $page->siblings->slice($current_position, 10);

foreach ($next_10 as $child):
        $current = null;
        if ($child == $page) $current = " aria-current='page'";
        echo "<a$current href='{$child->url}'><img src='{$child->photo->size(150,150)->url}' width='75' height='75' alt=''></a>";
 endforeach; 
?>

How would I go about showing the previous 10 also?

Share this post


Link to post
Share on other sites

Thanks @elabx for pointing me to prevAll(), which I had not encountered yet. Unfortunately, the order is not respected and the results seem also random (sometimes it retrieves fewer results than expected).

Share this post


Link to post
Share on other sites

@LostKobrakai that helped, thanks. @elabx 's suggestion still retrieves unexpected results:

  • Photo #1: nothing shown, as expected.
  • Photos #2 to #6: work.
  • Photo #7: shows only 4 previous images instead the of the expected 6.
  • Photo #8: shows only 3.
  • Photo #9: shows only 2.
  • Photo #10: shows only 1.
  • Photo #11: works.
  • Photos #12 and above: only shows first 10…

Share this post


Link to post
Share on other sites

Although slow and impractical to show all 100 images on a single page in a gallery, would it be as slow and impractical if you used the JS-based lazy-loading for images (don't forget to force container size on the image so there's no re-flow issues during rendering -- ex: https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/).

It's not necessarily a better solution, just an alternative.

Share this post


Link to post
Share on other sites

If you have a large number of images in the gallery it would be better not to load all the pages into memory only to display a portion of them with slice(). Better to use start and limit in your selector to get only the pages you will display.

You could adapt the example given here:

 

  • Like 2

Share this post


Link to post
Share on other sites

Great, thanks @Robin S! Your example looks like what I'm looking for. I'll give it a try early next week and report back with my adapted solution, if I manage to make it work.

  • Like 2

Share this post


Link to post
Share on other sites

Here's @Robin S code adapted to produce the following thumbnail navigation (semi-transparent thumb #98 is the current one):

thumbs.thumb.png.6e6fa87ab9848ada18a29942e49e39d7.png

 

<?php
// Number of thumbs to show
$limit = 9;
// Get the number of visible siblings
$num_siblings = $page->parent->numChildren(true);
// The default start value is zero
$start = 0;
// If the number of siblings is greater than the limit then we need to adjust the start value
if($num_siblings > $limit) {
	// Get the halfway point of the limit
	$half_limit = floor($limit / 2);
	// Get the index of the current page relative to its siblings
	$index = $page->index();
	// Adjust the start value to keep the current page within the sibling links
	if($index > $half_limit) $start = $index - $half_limit;
	if($num_siblings - $start < $limit) $start = $num_siblings - $limit;
}
$items = $page->siblings("start=$start, limit=$limit");
// Next page and previous page relative to current page
$next_page = $page->next();
$prev_page = $page->prev();

// Next and previous SVG icons
$left_arrow = "<svg role='img' aria-labelledby='previous-icon' class='icon icon--inline' height='24' width='24'><title id='previous-icon'>Next photo: {$page->prev->title}</title><use xlink:href='#icon--left-arrow'></use></svg>";
$right_arrow = "<svg role='img' aria-labelledby='next-icon' class='icon icon--inline' height='24' width='24'><title id='next-icon'>Previous photo: {$page->next->title}</title><use xlink:href='#icon--right-arrow'></use></svg>";
?>

<?php if($items->count > 1):
	echo "<div class='thumb_gallery'>";
		if ($prev_page->id) echo "<a class='thumbnail' href='$prev_page->url'>$left_arrow</a>";

	foreach($items as $item):

      $number = $item->index() + 1;
      $current = null;
      if ($item == $page) $current = " aria-current='page'";

      echo "<a$current class='thumbnail' href='$item->url'>";
      echo "<img class='responsive-images thumbnail__image' src='{$item->photo->size(150,150)->url}' width='75' height='75' alt=''>";
      echo "<span class='thumbnail__label'>$number</span>";
      echo "</a>";

		endforeach;

		if($next_page->id) echo "<a class='thumbnail' href='$next_page->url'>$right_arrow</a>";

	echo "</div>";
 endif; ?>

 

I hope this can help someone else. Thanks again @Robin S !!

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...