forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: Leonard Will on July 05, 2017, 11:47:01 am
-
In order to add text as well as icons to navigation buttons, I found that you can just insert the text before the final <a> in the relevant function in \js\displayimage.js. For example, I inserted the word "Slideshow" in the following:
function printSlideshowButton() {
// insert slideshow button as defined in theme or create default button
var btn = js_vars.buttons.slideshow_btn ? js_vars.buttons.slideshow_btn
: '<a href="' + js_vars.buttons.slideshow_tgt + '" class="navmenu_pic" title="' + js_vars.buttons.slideshow_title + '" rel="nofollow"><img src="' + js_vars.buttons.loc + 'images/navbar/slideshow.png" border="0" align="middle" alt="' + js_vars.buttons.slideshow_title + '" />Slideshow</a>';
$('#slideshow_button').append(btn);
}
I don't know whether .js files can be included in a custom theme, to avoid having to make the change in the core file.
-
It's already written in the code you provided ;)
// insert slideshow button as defined in theme or create default button
var btn = js_vars.buttons.slideshow_btn ? js_vars.buttons.slideshow_btn
So you'd need to insert something like that to your theme's theme.php file:
set_js_var('buttons.slideshow_btn', '<a href="' + js_vars.buttons.slideshow_tgt + '" class="navmenu_pic" title="' + js_vars.buttons.slideshow_title + '" rel="nofollow"><img src="' + js_vars.buttons.loc + 'images/navbar/slideshow.png" border="0" align="middle" alt="' + js_vars.buttons.slideshow_title + '" />Slideshow</a>');
(not tested).
-
Thanks for the reply, André. I was not familiar enough with Javascript to recognize the significance of the "ternary operator" ? ... : in the code. :(
I have tried pasting the code you suggested into my theme.php, changing the last word from "Slideshow" to "Zlideshow" so that I would know which version was being picked up, and it is not being recognized. I tried pasting it at the start or at the end, just before the final "?>" - should it go somewhere else, or does it need any wrapper or additional code to set the variable js_vars.buttons.slideshow_btn ?
I tried removing the option code in displayimage.js, leaving just "var btn = js_vars.buttons.slideshow_btn;" and nothing was output, so I guess that the variable was not set.
My gallery is at www.enfieldsociety.org.uk/photographs/
-
Copy the function theme_html_img_nav_menu from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist.
Then either look for
$slideshow_btn = '';
or change the following code to your needs
$js_buttons = array(
'pic_info_title' => $lang_img_nav_bar['pic_info_title'],
'pic_info_btn' => $pic_info_btn,
'slideshow_tgt' => $slideshow_tgt,
'slideshow_title' => $lang_img_nav_bar['slideshow_title'],
'slideshow_btn' => $slideshow_btn,
'loc' => $location,
);
-
Copy the function theme_html_img_nav_menu from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist.
Then either look for
$slideshow_btn = '';
I have done this, and changed the line above to
$slideshow_btn = '<a href="' + js_vars.buttons.slideshow_tgt + '" class="navmenu_pic"
title="' + js_vars.buttons.slideshow_title + '" rel="nofollow">
<img src="' + js_vars.buttons.loc + 'images/navbar/slideshow.png"
border="0" align="middle" alt="' + js_vars.buttons.slideshow_title + '" />ZZSlideshow</a>';
It doesn't work, though, to override the button defined in displayimage.js. I wonder whether that is because the js_vars are not defined until a few lines later. If I replace these variables in the above code with literal text, such as an arbitrary URL instead of ...slideshow_tgt, removing ...loc and inserting a literal title, the changed button is displayed, but of course does not start the slideshow.
Incidentally, I can't see where the class "navmenu_pic" is defined - I don't know whether that has any effect.
-
You need to replace the JS vars with the corresponding PHP variables (have a look at the second code I posted) . I'm currently on a mobile phone, so I cannot create the code for you.
-
Many thanks for your prompt replies. I have now used the following code, which may be more complicated than necessary but which works.
$slideshow_btn = "<a href={$slideshow_tgt} class=\"navmenu_pic\" title=\"{$lang_img_nav_bar[slideshow_title]}\" rel=\"nofollow\">
<img src=\"images/navbar/slideshow.png\" border=\"0\" align=\"middle\" alt=\"{$lang_img_nav_bar[slideshow_title]}\" />Slideshow</a>";
I'll try to do the same for pic_info_btn tomorrow.
-
In case anyone else wants to add text to buttons within a theme, I found that for the "picture information" button the following code works when added to theme.php as indicated by André:
// if set, this will override the default pic_info button to be inserted by displayimage.js
$pic_info_btn = "<a href=\"javascript:;\" class=\"navmenu_pic\" onclick=\"blocking('picinfo','yes','block'); return false;\"
title=\"{$lang_img_nav_bar[pic_info_title]}\" rel=\"nofollow\"><img src=\"images/navbar/info.png\" border=\"0\"
align=\"middle\" alt=\"{$lang_img_nav_bar[pic_info_title]}\" />Picture information</a>";
I hope that CPG 1.6 will provide a simpler way of doing this!