Author Topic: [Mod] Replace next/previous image text links with buttons  (Read 15915 times)

0 Members and 1 Guest are viewing this topic.

Offline Chris

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.487
  • Did u ever stop to think and then forget to start?
    • View Profile
[Mod] Replace next/previous image text links with buttons
« on: June 10, 2003, 04:23:18 PM »
This mod replaces the text links used in the details.html template with buttons.  There are two ways to do it.

Quick And Dirty Method
1.  Put the <img> tag in your language pack's main.php in place of the "next" image text.  Be sure to put a backslash character in front of embedded double quote characters like this:
Code: [Select]
$lang['next_image'] = "<img src=\"{template_url}/images/next_image.gif\" border=\"0\">";
The drawback here is that if there is no next (or previous) image link, there will be no output and this could throw off your HTML tables.  It also doesn't work with 4images installations using multi-language support.


Clean And Elegant Method
2.  Put an HTML img tag and the next/previous links in your template details.html.

2.1 Create 4 buttons:  image_prev.gif, image_prev_off.gif, image_next_off.gif, image_next.gif  

2.1.1 Place these in your template's "images" directory if you're only supporting one language.
EXAMPLE:
Code: [Select]
templates/default/images/next_off.gif

2.1.2 For multi-language support, create different language specific versions of the 4 buttons and place them in the appropriate templates/<your template set name/images_<language> directory.

EXAMPLE:  If your 4images installation supports both English and Deutsch:
Code: [Select]
templates/default/images_deutsch/next_off.gif
templates/default/images_english/next_off.gif



2.2 Open details.php, find
Code: [Select]
// Get next and previous image
if (!empty($next_prev_cache[$next_image_id])) {
  $next_image_name = htmlspecialchars($next_prev_cache[$next_image_id]['image_name']);
  $next_image_url = $site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$next_image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""));
  if (!get_file_path($next_prev_cache[$next_image_id]['image_media_file'], "media", $next_prev_cache[$next_image_id]['cat_id'], 0, 0)) {
    $next_image_file = ICON_PATH."/404.gif";
  }
  else {
    $next_image_file = get_file_path($next_prev_cache[$next_image_id]['image_media_file'], "media", $next_prev_cache[$next_image_id]['cat_id'], 0, 1);
  }
  if (!get_file_path($next_prev_cache[$next_image_id]['image_thumb_file'], "thumb", $next_prev_cache[$next_image_id]['cat_id'], 0, 0)) {
    $next_thumb_file = ICON_PATH."/".get_file_extension($next_prev_cache[$next_image_id]['image_media_file']).".gif";
  }
  else {
    $next_thumb_file = get_file_path($next_prev_cache[$next_image_id]['image_thumb_file'], "thumb", $next_prev_cache[$next_image_id]['cat_id'], 0, 1);
  }
}
else {
  $next_image_name = REPLACE_EMPTY;
  $next_image_url = REPLACE_EMPTY;
  $next_image_file = REPLACE_EMPTY;
  $next_thumb_file = REPLACE_EMPTY;
}

if (!empty($next_prev_cache[$prev_image_id])) {
  $prev_image_name = htmlspecialchars($next_prev_cache[$prev_image_id]['image_name']);
  $prev_image_url = $site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$prev_image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""));
  if (!get_file_path($next_prev_cache[$prev_image_id]['image_media_file'], "media", $next_prev_cache[$prev_image_id]['cat_id'], 0, 0)) {
    $prev_image_file = ICON_PATH."/404.gif";
  }
  else {
    $prev_image_file = get_file_path($next_prev_cache[$prev_image_id]['image_media_file'], "media", $next_prev_cache[$prev_image_id]['cat_id'], 0, 1);
  }
  if (!get_file_path($next_prev_cache[$prev_image_id]['image_thumb_file'], "thumb", $next_prev_cache[$prev_image_id]['cat_id'], 0, 0)) {
    $prev_thumb_file = ICON_PATH."/".get_file_extension($next_prev_cache[$prev_image_id]['image_media_file']).".gif";
  }
  else {
    $prev_thumb_file = get_file_path($next_prev_cache[$prev_image_id]['image_thumb_file'], "thumb", $next_prev_cache[$prev_image_id]['cat_id'], 0, 1);
  }
}
else {
  $prev_image_name = REPLACE_EMPTY;
  $prev_image_url = REPLACE_EMPTY;
  $prev_image_file = REPLACE_EMPTY;
  $prev_thumb_file = REPLACE_EMPTY;
}

$site_template->register_vars(array(
  "next_image_id" => $next_image_id,
  "next_image_name" => $next_image_name,
  "next_image_url" => $next_image_url,
  "next_image_file" => $next_image_file,
  "next_thumb_file" => $next_thumb_file,
  "prev_image_id" => $prev_image_id,
  "prev_image_name" => $prev_image_name,
  "prev_image_url" => $prev_image_url,
  "prev_image_file" => $prev_image_file,
  "prev_thumb_file" => $prev_thumb_file
));
unset($next_prev_cache);


Replace with:
Code: [Select]
// Get next and previous image
if (!empty($next_prev_cache[$next_image_id])) {
  $next_image_name = htmlspecialchars($next_prev_cache[$next_image_id]['image_name']);
  $next_image_url = $site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$next_image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""));
  if (!get_file_path($next_prev_cache[$next_image_id]['image_media_file'], "media", $next_prev_cache[$next_image_id]['cat_id'], 0, 0)) {
    $next_image_file = ICON_PATH."/404.gif";
  }
  else {
    $next_image_file = get_file_path($next_prev_cache[$next_image_id]['image_media_file'], "media", $next_prev_cache[$next_image_id]['cat_id'], 0, 1);
  }
  if (!get_file_path($next_prev_cache[$next_image_id]['image_thumb_file'], "thumb", $next_prev_cache[$next_image_id]['cat_id'], 0, 0)) {
    $next_thumb_file = ICON_PATH."/".get_file_extension($next_prev_cache[$next_image_id]['image_media_file']).".gif";
  }
  else {
    $next_thumb_file = get_file_path($next_prev_cache[$next_image_id]['image_thumb_file'], "thumb", $next_prev_cache[$next_image_id]['cat_id'], 0, 1);
  }
  $next_button_file = get_gallery_image("image_next.gif"); // MOD: Next-Previous Buttons
}
else {
  $next_image_name = REPLACE_EMPTY;
  $next_image_url = REPLACE_EMPTY;
  $next_image_file = REPLACE_EMPTY;
  $next_thumb_file = REPLACE_EMPTY;
  $next_button_file = get_gallery_image("image_next_off.gif"); // MOD: Next-Previous Buttons
}

if (!empty($next_prev_cache[$prev_image_id])) {
  $prev_image_name = htmlspecialchars($next_prev_cache[$prev_image_id]['image_name']);
  $prev_image_url = $site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$prev_image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""));
  if (!get_file_path($next_prev_cache[$prev_image_id]['image_media_file'], "media", $next_prev_cache[$prev_image_id]['cat_id'], 0, 0)) {
    $prev_image_file = ICON_PATH."/404.gif";
  }
  else {
    $prev_image_file = get_file_path($next_prev_cache[$prev_image_id]['image_media_file'], "media", $next_prev_cache[$prev_image_id]['cat_id'], 0, 1);
  }
  if (!get_file_path($next_prev_cache[$prev_image_id]['image_thumb_file'], "thumb", $next_prev_cache[$prev_image_id]['cat_id'], 0, 0)) {
    $prev_thumb_file = ICON_PATH."/".get_file_extension($next_prev_cache[$prev_image_id]['image_media_file']).".gif";
  }
  else {
    $prev_thumb_file = get_file_path($next_prev_cache[$prev_image_id]['image_thumb_file'], "thumb", $next_prev_cache[$prev_image_id]['cat_id'], 0, 1);
  }
  $prev_button_file = get_gallery_image("image_prev.gif"); // MOD: Next-Previous Buttons
}
else {
  $prev_image_name = REPLACE_EMPTY;
  $prev_image_url = REPLACE_EMPTY;
  $prev_image_file = REPLACE_EMPTY;
  $prev_thumb_file = REPLACE_EMPTY;
  $prev_button_file = get_gallery_image("image_prev_off.gif"); // MOD: Next-Previous Buttons
}

$site_template->register_vars(array(
  "next_image_id" => $next_image_id,
  "next_image_name" => $next_image_name,
  "next_image_url" => $next_image_url,
  "next_image_file" => $next_image_file,
  "next_thumb_file" => $next_thumb_file,
  "prev_image_id" => $prev_image_id,
  "prev_image_name" => $prev_image_name,
  "prev_image_url" => $prev_image_url,
  "prev_image_file" => $prev_image_file,
  "prev_thumb_file" => $prev_thumb_file,  // MOD: Next-Previous Buttons
  "next_button" => $next_button_file,  // MOD: Next-Previous Buttons
  "prev_button" => $prev_button_file  // MOD: Next-Previous Buttons
));
unset($next_prev_cache);


2.3 Open details.html, find this:
Code: [Select]
{if next_image_name}
{lang_next_image}<br />
<b><a href="{next_image_url}">{next_image_name}</a></b>
{endif next_image_name}


Replace with:
Code: [Select]
{if next_image_url}<a href="{next_image_url}">{endif next_image_url}
<img src="{next_button}" border="0" alt="{next_image_name}">
{if next_image_url}</a>{endif next_image_url}

2.4 Do the same for the previous image link.

The php code will output either an "off" button if there is no next image or an "on" button if there is.  The button will only be clickable if it is the "on" button.

Revisions:
* Added multi-language support by calling get_gallery_image()

Offline oo-an

  • Newbie
  • *
  • Posts: 10
    • View Profile
text and image links on details page?
« Reply #1 on: June 11, 2003, 01:12:27 PM »
Hi,

I'm happy to do the above to replace my text links with images.. but..

I was wondering if it is complex to add graphics for next/ previous images whilst also keeping the text links too?

Ewan

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Global Moderator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
[Mod] Replace next/previous image text links with buttons
« Reply #2 on: June 11, 2003, 01:20:39 PM »
do all steps, but in step 2.3 instead of replace do add

P.S. the reason I asked u to post the reply here, because this way if someone has same question, they would find it here, not somewhere else ;)
Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline Chris

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.487
  • Did u ever stop to think and then forget to start?
    • View Profile
[Mod] Replace next/previous image text links with buttons
« Reply #3 on: June 11, 2003, 03:07:46 PM »
And also, those who post to this thread may have their phpBB profile options set up to email them if someone else posts to the same thread.  Thus if you post elsewhere, the people involved might not ever see it.

Offline NoBob

  • Newbie
  • *
  • Posts: 47
    • View Profile
ran into difficulty
« Reply #4 on: June 13, 2003, 09:24:41 PM »
Hi,

I want to replace the next and previous text links with arrow buttons. I followed the instructions to the letter, but the code in 4bare details.html is a bit different from what you put in the instructions:

{if next_image_name}{lang_next_image}<br />
<b><a href="{next_image_url}">{next_image_name}</a></b>
<!-- <br /><br /><a href="{next_image_url}"><img src="{next_thumb_file}" border="1"></a> -->
{endif next_image_name}

I put this code:

{if next_image_url}<a href="{next_image_url}">{endif next_image_url}
<img src="http://www.rtwtravel.com/gallery/templates/4bare/images/image_next.gif" border="0" alt="="{next_image_name}">
{if next_image_url}</a>{endif next_image_url}</

Don't know where the link for the image_next_off button (a transparent gif) goes. Help, please. Also the arrow is not in the middle of the table, as it replaces the text "next image". What do I do to correct that, please?

Best, NoBob.

Offline supastoked

  • Newbie
  • *
  • Posts: 10
    • View Profile
    • ThoseDudes
Re: [Mod] Replace next/previous image text links with buttons
« Reply #5 on: July 02, 2005, 02:45:30 AM »
Hi Chris,
I wonder if u cld shed some light on this.. I am busy with an "image dashboard" & have both the txt links (previous & next) and then using the existing code in the details page to show the previous and next thumbnails. Only prob is, like u mentioned in the "dirty" method, when at the start and end its showing the thumbs as missing. Any ideas how to modify the above code, so it uses a holding image in the case that there is no previous image available? I understand the logic of show imageA, if imageA isnt available show imageB, but just not sure of the actual code. Any advice on this would be much appreciated!!
TIA
Chris

Offline Ch*yeuk

  • Newbie
  • *
  • Posts: 27
    • View Profile
Re: [Mod] Replace next/previous image text links with buttons
« Reply #6 on: July 21, 2006, 01:23:09 AM »
Hi Chris,
I wonder if u cld shed some light on this.. I am busy with an "image dashboard" & have both the txt links (previous & next) and then using the existing code in the details page to show the previous and next thumbnails. Only prob is, like u mentioned in the "dirty" method, when at the start and end its showing the thumbs as missing. Any ideas how to modify the above code, so it uses a holding image in the case that there is no previous image available? I understand the logic of show imageA, if imageA isnt available show imageB, but just not sure of the actual code. Any advice on this would be much appreciated!!
TIA
Chris
I would like to know how to do that ^. Replacing the next/previous with thumbnails.