Hi

First of all thanks for the wonderful module which providing us with great galleries for our customers. Besides all the good features the module already has, i'm missing one that is, in my eyes, quite important: Navigation links on image view.

I'm quite good at writing PHP myself but i first wanted to contact the module developers to ask whether they have planned this feature or not. I'm using lightbox for viewing the images in a gallery, but for commenting, users open the image nodes. From there, they always have to go back to the gallery overview for the next picture. I think it would be very useful when they had a direkt link to the previous or next image on the node view page.

Regards,
Peter.

Comments

Brian@brianpuccio.net’s picture

Brian@brianpuccio.net commented
Status: Active » Closed (duplicate)
Brian@brianpuccio.net’s picture

Brian@brianpuccio.net commented

Please see http://drupal.org/node/31390

psiska’s picture

psiska commented

Hi

Thanks for the link. I actually was able to solve this by using the theme functions:

/**
 * Custom theme function for displaying an image node.
 * Implements previous and next buttons for images grouped in a gallery.
 */
function theme_image_body($node, $size) {
  //find out term id the node is tagged with (gallery tid)
  $result = db_query("SELECT t.tid FROM {term_node} t WHERE t.nid = %d",$node->nid);
  $tid = db_result($result);

  //print out image
  $output = image_display($node, $size);
  
  //get all images with same tid (same gallery)
  $result = db_query("SELECT n.nid FROM {term_node} t INNER JOIN {node} n ON t.nid=n.nid WHERE n.status=1 AND n.type='image' AND t.tid=%d ORDER BY n.sticky ASC, n.created ASC",$tid);
  
  //compose array we need for finding out prev and next
  $images = array();
  while ($imageNode = db_fetch_object($result)) {
      $images[] = $imageNode->nid;
  }
  
  //get array key for current node
  $key = array_search($node->nid,$images);
  
  //if there is a key before this node's key, render prev
  if(array_key_exists($key-1,$images)) {
      $output .= l('Previous','node/'.$images[$key-1]);
  }
  //if there is a key after this node's key, render next
  if(array_key_exists($key+1,$images)) {
      $output .= l('Next','node/'.$images[$key+1]);
  }
  
  return $output;
}

This works for me.

Regards,
Peter.

underpressure’s picture

underpressure commented

Hi,
Where would I have to put this to try it out on my site?

psiska’s picture

psiska commented

Put it into your template.php and change the function name accordingly.

E.g. when your theme's name is "mytheme", you have to change the function to "mytheme_image_body($node, $size)".

You also can change and extend the ouput variable, i just used the text "Previous" and "Next" without any html tags, my final version has a list in it for example:

/**
 * Custom theme function for displaying an image node.
 * Implements previous and next buttons for images grouped in a gallery.
 */
 function pfadipatria_image_body($node, $size) {
  //find out term id the node is tagged with (gallery tid)
  $result = db_query("SELECT t.tid FROM {term_node} t WHERE t.nid = %d",$node->nid);
  $tid = db_result($result);

  //print out image
  $output = image_display($node, $size);

  //get all images with same tid (same gallery)
  $result = db_query("SELECT n.nid FROM {term_node} t INNER JOIN {node} n ON t.nid=n.nid WHERE n.status=1 AND n.type='image' AND t.tid=%d ORDER BY n.sticky DESC, n.created DESC",$tid);

  //compose array we need for finding out prev and next
  $images = array();
  while ($imageNode = db_fetch_object($result)) {
      $images[] = $imageNode->nid;
  }

  //get array key for current node
  $key = array_search($node->nid,$images);

  //if there is a key before this node's key, render prev
  if(array_key_exists($key-1,$images)) {
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('First'),'node/'.$images[0])."</li>\n";
      $output .= '    <li>'.l(t('Previous'),'node/'.$images[$key-1])."</li>\n";
      $output .= "</ul>\n";

  }
  //if there is a key after this node's key, render next
  if(array_key_exists($key+1,$images)) {
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('Next'),'node/'.$images[$key+1])."</li>\n";
      $output .= '    <li>'.l(t('Last'),'node/'.$images[count($images)-1])."</li>\n";
      $output .= "</ul>\n";
  }

  return $output;
}
underpressure’s picture

underpressure commented

Works great for me just need to tweak the CSS and I'm good.

Thanks

Now how do we get this into the gallery.module?

psiska’s picture

psiska commented

That's the whole point of a theme function - you don't need to get it into the gallery module, but it of course would be nice if the maintainers put in a navigation for image nodes by default.

yngens’s picture

yngens commented

hi,

does this one work with pictures put in multiple taxonomies?

underpressure’s picture

underpressure commented

I'm using it go to: www.ravalonline.com and visit the gallery to see it in action on my sight.

gilbertdelyon’s picture

gilbertdelyon commented

Hi yngens,

I justed tested the theme function suggested by psiska http://drupal.org/node/181021#comment-611769 and it works well, but NOT with multiple taxonomy albums.

I am hopelessly looking for how to get "previous/next" buttons in multiple taxonomy albums. Did you find a way on your side. (Even in Acidfree it doesn't work)

Please let me know if you read this post.

yngens’s picture

yngens commented

hi gilbertdelyon,

could you please take a look at http://drupal.org/node/192020 and second my call.

underpressure’s picture

underpressure commented

Psiska I need you help,

I've used thsi for sometime not works flawlessly however, now I want to align the links in the center of the table.

How can I wrap the links in a div tag so I may align the liks in the center via CSS?

psiska’s picture

psiska commented 
  //if there is a key before this node's key, render prev
  if(array_key_exists($key-1,$images)) {
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('First'),'node/'.$images[0])."</li>\n";
      $output .= '    <li>'.l(t('Previous'),'node/'.$images[$key-1])."</li>\n";
      $output .= "</ul>\n";

  }
  //if there is a key after this node's key, render next
  if(array_key_exists($key+1,$images)) {
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('Next'),'node/'.$images[$key+1])."</li>\n";
      $output .= '    <li>'.l(t('Last'),'node/'.$images[count($images)-1])."</li>\n";
      $output .= "</ul>\n";
  }

You have to alter this and / or the CSS to your needs. You could replace the lis with divs or similar.

underpressure’s picture

underpressure commented

Here the thing, I'm aware you have to either alter that or the CSS but I don't know what to use.

If you give both there own div tags like below you will be able to center the links only when viewing the first and last image.

  //if there is a key before this node's key, render prev
  if(array_key_exists($key-1,$images)) {
      $output .= '<div class="image_pager">'."\n";
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('First'),'node/'.$images[0])."</li>\n";
      $output .= '    <li>'.l(t('Previous'),'node/'.$images[$key-1])."</li>\n";
      $output .= "</ul>\n";
      $output .= "</div>\n";

  }
  //if there is a key after this node's key, render next
  if(array_key_exists($key+1,$images)) {
      $output .= '<div class="image_pager">'."\n";
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('Next'),'node/'.$images[$key+1])."</li>\n";
      $output .= '    <li>'.l(t('Last'),'node/'.$images[count($images)-1])."</li>\n";
      $output .= "</ul>\n";
      $output .= "</div>\n";
  }

If you use one div for everything like below you will only be able to center the links when you are view every other image except the first or last one.

  //if there is a key before this node's key, render prev
  if(array_key_exists($key-1,$images)) {
      $output .= '<div class="image_pager">'."\n";
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('First'),'node/'.$images[0])."</li>\n";
      $output .= '    <li>'.l(t('Previous'),'node/'.$images[$key-1])."</li>\n";
      $output .= "</ul>\n";

  }
  //if there is a key after this node's key, render next
  if(array_key_exists($key+1,$images)) {
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('Next'),'node/'.$images[$key+1])."</li>\n";
      $output .= '    <li>'.l(t('Last'),'node/'.$images[count($images)-1])."</li>\n";
      $output .= "</ul>\n";
      $output .= "</div>\n";
  }

So the question is, how do you wrap what ever your output will be in a single tag that can be centered?

is there a way to use print to do this and if so what would that be, anyone?

xiffy’s picture

xiffy commented

Don't know if you still want this, but it should be failty easy to open and close the div's just by adding some else statements like this:

  //if there is a key before this node's key, render prev
  if(array_key_exists($key-1,$images)) {
      $output .= '<div class="image_pager">'."\n";
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('First'),'node/'.$images[0])."</li>\n";
      $output .= '    <li>'.l(t('Previous'),'node/'.$images[$key-1])."</li>\n";
      $output .= "</ul>\n";
  } else {
      $output .= '<div class="image_pager">'."\n";
  }
  //if there is a key after this node's key, render next
  if(array_key_exists($key+1,$images)) {
      $output .= '<ul class="image_nav">'."\n";
      $output .= '    <li>'.l(t('Next'),'node/'.$images[$key+1])."</li>\n";
      $output .= '    <li>'.l(t('Last'),'node/'.$images[count($images)-1])."</li>\n";
      $output .= "</ul>\n";
      $output .= "</div>\n";
  } else {
      $output .= "</div>\n";
  }
underpressure’s picture

underpressure commented

this is what I'm using, had a friend who speaks PHP help me out, but thanks you for taking the time to post.

/**
* Custom theme function for displaying an image node.
* Implements previous and next buttons for images grouped in a gallery.
*/
function litemedia_image_body($node, $size) {
  //find out term id the node is tagged with (gallery tid)
  $result = db_query("SELECT t.tid FROM {term_node} t WHERE t.nid = %d",$node->nid);
  $tid = db_result($result);

  //print out image
  $output = image_display($node, $size);

  //get all images with same tid (same gallery)
  $result = db_query("SELECT n.nid FROM {term_node} t INNER JOIN {node} n ON t.nid=n.nid WHERE n.status=1 AND n.type='image' AND t.tid=%d ORDER BY n.sticky DESC, n.created DESC",$tid);

  //compose array we need for finding out prev and next
  $images = array();
  while ($imageNode = db_fetch_object($result)) {
      $images[] = $imageNode->nid;
  }
  
  //get array key for current node
  $key = array_search($node->nid,$images);
  
  //if there is a key before this node's key, render prev
   $output .= '<div id="pager">';
  if(array_key_exists($key-1,$images)) {
	  $output .= '<ul class="image_nav">'."\n";
      $output .= '<li>'.l(t('|< First'),'node/'.$images[0])."</li>\n";
      $output .= '<li>'.l(t('< Previous'),'node/'.$images[$key-1])."</li>\n";
	  $output .= "</ul>\n";
  }
  //if there is a key after this node's key, render next
  if(array_key_exists($key+1,$images)) {
	  $output .= '<ul class="image_nav">'."\n";
      $output .= '<li>'.l(t('Next >'),'node/'.$images[$key+1])."</li>\n";
      $output .= '<li>'.l(t('Last >|'),'node/'.$images[count($images)-1])."</li>\n";
      $output .= "</ul>\n";
  }
    $output .= '</div>';
  return $output;
}