Change the images for the 'save my place' widget?

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Change the images for the 'save my place' widget?

Postby Blargargy » October 22nd, 2019, 6:51 am

Hi there,

I was wondering if someone could please let me know if it is at all possible to change the images for the 'save my place' widget. I think it's a fantastic feature and really want to keep using it but I'd love the option to change the images for 'save' and 'continue' to keep it in style of my comic.

I tried to work around what's written here: viewtopic.php?f=4&t=1100#

But I couldn't get it to work. I'm assuming there's more to the process than just (wishfully) copying and pasting the box of script on my 'comics' page? When I do so, no matter how many times I try to change the image link no image shows up; just a text link with one of those 'broken image' thumbnails.

If it's in the hard basket it's no issue, just wanted to ask!
Image
User avatar
Blargargy
 
Posts: 24
Joined: April 1st, 2019, 6:33 pm

Re: Change the images for the 'save my place' widget?

Postby eishiya » October 22nd, 2019, 6:58 am

Are you using jsbookmark2.js?v=3 (the current version that's in all templates that use the widget) or jsbookmark2.js (the old version that's in that guide)? Try the one with the v=3, the older version might be deprecated. The current version has the same variables though, I believe.

When running into problems with code, you should always post your code, perhaps you just made a slight error somewhere, like missing quotes or some extra garbage in the URLs.
Image
User avatar
eishiya
 
Posts: 9879
Joined: December 5th, 2009, 11:17 am

Re: Change the images for the 'save my place' widget?

Postby Blargargy » October 22nd, 2019, 7:20 am

Hi Eishiya!
Thanks so much for the prompt reply.
I should have added that I'm a complete coding noobie and the only reason the site is the way it is now is thanks to you!
I'm just using a modified Gunmetal Reloaded template, it's not from my own code or anything.
But here is the script on the comics page anyway... If it's a mess it's because of a lot of trial and error and me not knowing what I'm doing XD

Code: Select all
[code]<div id="left">

</div>



<div id="right">



<table border="0" align="center" width="90%">

<tr><td><strong>The Legend of Incineroar</strong><br /><em>{CHAPTER_TITLE}</em></td>



<td align="center"><a href="http://www.smackjeeves.com/favorites.php?add=180745"><img src="https://i.imgur.com/GROjkDT.jpg" alt="Fave"></a></td>

</tr>

</table>



<div id="content">



<!-- BEGIN comic_image -->

<table border="0" width="{comic_image.WIDTH}" cellpadding="0" cellspacing="0" align="center">

<!-- END comic_image -->


</tr>

</table>





<p align="center">

<!-- BEGIN comic_image -->
<div style="text-align: center">

<div style="height: {comic_image.HEIGHT}px;">
{comic_image.FORMATTED}
</div>
<!-- END comic_image -->

<!-- BEGIN switch_no_comic_image -->

<img src="http://www.imagemonster.org/getimg/image_na.gif" width="600" height="400">

<!-- END switch_no_comic_image -->

</p>


<div style="padding: 4px 0 8px; text-align: center;">{SHARE_THIS_COMIC}</div>


<!-- BEGIN comic_image -->

<table border="0" width="{comic_image.WIDTH}" cellpadding="0" cellspacing="0" align="center">

<!-- END comic_image -->

<tr><td align="left" valign="top"><a href="{FIRST_COMIC_URL}"><img src="https://i.imgur.com/60oE43i.gif" alt="First Page"></a></td>

      <td align="left" valign="top"><a href="{NAV_PREV}"><img src="https://i.imgur.com/Oj2pqX6.gif" alt="Previous Page"></a></td>

      <td align="center">

        {JUMPBOX_FORMATTED}
      </td>

      <td align="right" valign="top"><a href="{NAV_NEXT}"><img src="https://i.imgur.com/7Qk3MTg.gif" alt="Next Page"></a></td>

      <td align="right" valign="top"><a href="{NAV_LAST}"><img src="https://i.imgur.com/eNTjyCh.gif" alt="Last Page"></a></td>

</tr>

</table>

<div class="textcontainer comment">

   <!-- BEGIN switch_author_comments -->
   <h3>Author Comments</h3>
   <!-- END switch_author_comments -->
   
   <!-- BEGIN loop_author_comments -->
   <div class="textbox {loop_author_comments.REPLY_CLASS}">

      <div class="commentheader">
         <a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile">{loop_author_comments.NAME}</a>
         <span class="commentinfo">{loop_author_comments.DATE_POSTED}</span>
      </div>

      <div class="commentcontent">
         <!-- BEGIN switch_poster_avatar -->
         <a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile"><img class="avatar" src="{loop_author_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_author_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_author_comments.POSTER_AVATAR_IMG_WIDTH}" /></a>
         <!-- END switch_poster_avatar -->

         <b class="post-title">{loop_author_comments.POST_TITLE}</b>
         {loop_author_comments.MESSAGE}
      </div>

      <div style="clear: both"></div>
      
      <div class="commentfooter">
         <a href="{loop_author_comments.REPLY_LINK}" onClick="var new_window = window.open('{loop_author_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Reply</a>
         <!-- BEGIN switch_user_can_edit -->
         <a href="{loop_author_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_author_comments.EDIT_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Edit</a>
         <!-- END switch_user_can_edit -->
         <!-- BEGIN switch_user_can_delete -->
         <a href="{loop_author_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_author_comments.DELETE_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Delete</a>
         <!-- END switch_user_can_delete -->
      </div>
   </div>
   {loop_author_comments.COMMENT_REPLIES}
   <!-- END loop_author_comments -->
</div>


<h4><a href="/postcomment.php?cid={COMIC_ID}" onClick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;">Post A Comment</a></h4>


<div class="textcontainer comment">
   <!-- BEGIN switch_user_comments -->
   <h3>User Comments</h3>
   <!-- END switch_user_comments -->
   
   <!-- BEGIN loop_user_comments -->
   <div class="textbox {loop_user_comments.REPLY_CLASS}">

      <div class="commentheader">
         <a href="{loop_user_comments.POSTER_PROFILE_URL}" target="_profile">{loop_user_comments.NAME}</a>
         <span class="commentinfo">{loop_user_comments.DATE_POSTED}</span>
      </div>

      <div class="commentcontent">
         <!-- BEGIN switch_poster_avatar -->
            <a href="{loop_user_comments.POSTER_PROFILE_URL}" target="_profile"><img class="avatar" src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_user_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_user_comments.POSTER_AVATAR_IMG_WIDTH}" /></a>
         <!-- END switch_poster_avatar -->

         <b class="post-title">{loop_user_comments.POST_TITLE}</b>
         {loop_user_comments.MESSAGE}
      </div>

      <div style="clear: both"></div>

      <div class="commentfooter">
         <a href="{loop_user_comments.REPLY_LINK}" onClick="var new_window = window.open('{loop_user_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Reply</a>
         <!-- BEGIN switch_user_can_edit -->
         <a href="{loop_user_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_user_comments.EDIT_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Edit</a>
         <!-- END switch_user_can_edit -->
         <!-- BEGIN switch_user_can_delete -->
         <a href="{loop_user_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_user_comments.DELETE_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Delete</a>
         <!-- END switch_user_can_delete -->
      </div>
   </div>
   {loop_user_comments.COMMENT_REPLIES}
   <!-- END loop_user_comments -->   
</div>
<!-- BEGIN switch_user_comments -->
   <h4><a href="/postcomment.php?cid={COMIC_ID}" onClick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;">Post A Comment</a></h4>
<!-- END switch_user_comments -->[/code]


I suppose I was just ignorantly hoping this would be as simple as changing the 'next page' and 'previous page' icons, but I'm realizing it's probably a bit more complicated than that :P
Image
User avatar
Blargargy
 
Posts: 24
Joined: April 1st, 2019, 6:33 pm

Re: Change the images for the 'save my place' widget?

Postby eishiya » October 22nd, 2019, 8:28 am

I meant the code you modified for the widget. The code you posted seems to be the Overall layout code, which has nothing to do with the save my place widget.

I haven't messed with the widget much myself, but it should be about as easy to change the images as it was for the next/prev arrows :]
Image
User avatar
eishiya
 
Posts: 9879
Joined: December 5th, 2009, 11:17 am

Re: Change the images for the 'save my place' widget?

Postby Blargargy » October 22nd, 2019, 7:23 pm

Apologies Eishiya I'm a dolt.

This is the original script as supplied in this link: viewtopic.php?f=4&t=1100#

Code: Select all
<script type="text/javascript">
   jsbookmark_pageUrl = "{COMIC_URL}";
   
   jsbookmark_imgSave = "http://www.smackjeeves.com/templates/default/images/save.png";
   jsbookmark_imgSaved = "http://www.smackjeeves.com/templates/default/images/saved.png";
   jsbookmark_imgContinue = "http://www.smackjeeves.com/templates/default/images/continue.png";
   jsbookmark_imgContinueDisabled = "http://www.smackjeeves.com/templates/default/images/continue_off.png"
</script>
<script type="text/javascript" src="http://www.smackjeeves.com/templates/default/jsbookmark2.js"></script>


And this was my attempt at editing it with my own images (images weren't final but was just trying to see if it would work):

Code: Select all
<script type="text/javascript">
   jsbookmark_pageUrl = "{COMIC_URL}";
   
   jsbookmark_imgSave = "https://i.imgur.com/AlB56UJ.png";
   jsbookmark_imgSaved = "https://i.imgur.com/AlB56UJ.png";
   jsbookmark_imgContinue = "https://i.imgur.com/JCOMUzs.png";
   jsbookmark_imgContinueDisabled = "https://i.imgur.com/JCOMUzs.png"
</script>
<script type="text/javascript" src="http://www.smackjeeves.com/templates/default/jsbookmark2.js"></script>


When I put the initial unedited script code on my 'comic page' layout after the lines of code that indicate the comic image's placement (so I can have it below the comic image), this is what shows up:

Image

And the same appears when I substitute the image links for my own. The text buttons seem functional but the images just won't show up.

After your initial comment I tried changing that last line to:

<script type="text/javascript" src="http://www.smackjeeves.com/templates/default/jsbookmark2.js?v=3"></script> but that didn't seem to work. But please note I really don't know what I'm doing.
Image
User avatar
Blargargy
 
Posts: 24
Joined: April 1st, 2019, 6:33 pm

Re: Change the images for the 'save my place' widget?

Postby eishiya » October 22nd, 2019, 9:33 pm

Edit: Looks like the variables are "undefined" when the widget code gets them. I'll try to trace what's happening.

Edit 2: I've found the problem, and unfortunately it's in the SJ-side code. In the jsbookmark.js code, the user-defined global variables are being shadowed (overriden) by function-local variables with the same names in the script, and the custom values just aren't being grabbed.

This is a trivial fix and I'll Tweet @Smackjeeves about it, but no promises that it'll be fixed quickly as SJ management's been quiet recently. In the meantime, you could replace the embedded script with a fixed copy. The downside to this is this mass of code will be downloaded with every comic page instead of being grabbed efficiently from a file ):

Replace:
Code: Select all
<script type="text/javascript" src="http://www.smackjeeves.com/templates/default/jsbookmark2.js?v=3"></script>


With:
Code: Select all
<script>
/*
JavaScript Bookmarking Script
=============================
Developed by Ash Young, Modified by Dan Liebner

Settings:
(Set these in a <script> tag before embedding _this_ script)

jsbookmark_pageUrl -- permanent URL of comic being viewed (if different from browser URL)

jsbookmark_imgSave -- "Save my place" image URL
jsbookmark_jsbookmark_imgSaved -- "Saved Here" image URL
jsbookmark_imgContinue -- "Continue where I left off" image URL
jsbookmark_imgContinueDisabled -- greyed out / disabled version of "Reset my place"

*/

(function(window) {

   /*
   Config Settings
   */
   var cl = 3650,
      savedHereText = 'You are currently bookmarked here';
   if (window.jsbookmark_imgSave) { // Save my place
      var jsbookmark_imgSave = window.jsbookmark_imgSave;
   } else {
      var jsbookmark_imgSave = 'http://www.smackjeeves.com/templates/default/images/save.png';
   }
   if (window.jsbookmark_imgSaved) { // Saved Here
      var jsbookmark_imgSaved = window.jsbookmark_imgSaved;
   } else {
      var jsbookmark_imgSaved = 'http://www.smackjeeves.com/templates/default/images/saved.png';
   }
   if (window.jsbookmark_imgContinue) { // Continue where I left off
      var jsbookmark_imgContinue = window.jsbookmark_imgContinue;
   } else  {
      var jsbookmark_imgContinue = 'http://www.smackjeeves.com/templates/default/images/continue.png';
   }
   if (window.jsbookmark_imgContinueDisabled) { // Continue where I left off (button disabled)
      var jsbookmark_imgContinueDisabled = window.jsbookmark_imgContinueDisabled;
   } else {
      var jsbookmark_imgContinueDisabled = 'http://www.smackjeeves.com/templates/default/images/continue_off.png';
   }
   
   /*
   Now write out the applicable links
   */
   createCookie('t', 1);
   var c = readCookie('t');
   if( c && document.getElementById ) {
      var l = loadBm(),
         userData = window.jsbookmark_userData;
      if(l) {
         var continue_img = jsbookmark_imgContinue; // bookmark exists
      } else {
         var continue_img = jsbookmark_imgContinueDisabled; // no bookmark exists
      }
      if (l == jsbm_this_page_url() && document.getElementById) {
         // we're on the saved page
         var save_img = jsbookmark_imgSaved,
            saveBtnTitle = savedHereText;
      } else {
         // not on the saved page
         var save_img = jsbookmark_imgSave,
            saveBtnTitle = 'Save my place on this comic so I can return to it later';
      }
      document.write('<span style="display: inline-flex; white-space: nowrap;">');
      document.write('<a id="jsbm_save_button" href="#" onClick="jsbm.save();return false;" style="margin-right: 1px"><img id="jsbm_saveBtnImg" style="padding-left: 3px" src="'+save_img+'" alt="Save My Place" title="' + saveBtnTitle + '" border="0"></a>');
      if( l != jsbm_this_page_url() && document.getElementById ) // not on the saved page
         document.write('<a id="jsbm_continue_button" href="#" onClick="jsbm.gto();return false;"><img style="padding-right: 3px" src="'+continue_img+'" alt="Continue where I left off" title="Return to the page I last saved" border="0"></a>');
      document.write('</span>');
      if( !l ) {
         document.getElementById('jsbm_continue_button').style.opacity = 0.8;
      }
      if( l && window.jsbookmark_pUrl == l ) {
         bm();
      }
   }
   
   /*
   Below are our functions for this little script
   */
   function jsbm_this_page_url() {
      if( window.jsbookmark_pageUrl ) {
         return jsbookmark_pageUrl;
      } else {
         return window.location;
      }
   }
   function bm() {
      if(document.getElementById) {
         var continueBtn = document.getElementById('jsbm_continue_button'),
            saveBtnImg = document.getElementById('jsbm_saveBtnImg');
         if( saveBtnImg && saveBtnImg.src == jsbookmark_imgSaved ) return;
         if( continueBtn ) continueBtn.style.display = 'none';
         if( saveBtnImg ) {
            if( saveBtnImg.src ) saveBtnImg.src = jsbookmark_imgSaved;
            saveBtnImg.title = savedHereText;
            saveBtnImg.blur();
         }
      }
      var current_url;
      createCookie("bm", jsbm_this_page_url(), cl);
      if( window.jsbookmark_userData ) {
         
         var xhr = new XMLHttpRequest();
         
         var s = document.createElement("script"),
            url = "http://www.smackjeeves.com/ajax/bookmarkSave.php?"
               + 'sid=' + encodeURIComponent(window.jsbookmark_userData.siteId)
               + '&cid=' + encodeURIComponent(window.jsbookmark_userData.curId);
         s.src = url;
         document.body.appendChild(s);
         
      }
   }
   
   function loadBm() {
      
      if( window.jsbookmark_userData && window.jsbookmark_userData.savedUrl ) {
         
         return window.jsbookmark_userData.savedUrl;
         
      } else {
   
         return readCookie('bm');
         
      }
      
   }
   
   function gto() {
      var g = loadBm();
      if(g) {
         window.location = g;
      }   
   }
   
   window.jsbm = {
      save: bm,
      gto: gto
   };
   
   /*
   The follow functions have been borrowed from Peter-Paul Koch.
   Please find them here: http://www.quirksmode.org
   */
   function createCookie(name,value,days) {
      if (days) {
         var date = new Date();
         date.setTime(date.getTime()+(days*24*60*60*1000));
         var expires = "; expires="+date.toGMTString();
      } else var expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
   }
   
   function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
         var c = ca[i];
         while (c.charAt(0)==' ') c = c.substring(1,c.length);
         if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
   }
   
})(window);
</script>
Image
User avatar
eishiya
 
Posts: 9879
Joined: December 5th, 2009, 11:17 am

Re: Change the images for the 'save my place' widget?

Postby Blargargy » October 22nd, 2019, 9:54 pm

eishiya wrote:(Edit: Checking. Looks like the variables are "undefined" when the widget code gets them. I'll try to trace what's happening.)


Thanks so much eishiya! I knew if anyone could help it'd be you. But please don't waste your time if it's too difficult, I greatly appreciate you looking into it either way!
Image
User avatar
Blargargy
 
Posts: 24
Joined: April 1st, 2019, 6:33 pm

Re: Change the images for the 'save my place' widget?

Postby eishiya » October 22nd, 2019, 10:04 pm

Edited my post above :D You're too quick~
Image
User avatar
eishiya
 
Posts: 9879
Joined: December 5th, 2009, 11:17 am

Re: Change the images for the 'save my place' widget?

Postby Blargargy » October 22nd, 2019, 10:46 pm

EDIT:

I don't know what I did different but disabling the 'auto-embed widget' option in the profile settings did do the trick! It works as I wanted it to now!

I can't thank you enough Eishiya! Hopefully this also helps anyone else wanting to change the widget icons.

Thanks again :D

(Original Message:)
Once again, you're an absolute legend! Thank you so much for working that out!!

I have one last question to bother you with and you're entitled to push me away if you want!

When I add the script you gave me to my 'comic page' layout it appears both below the comic and when you hover over the comic image. I'd love to just have one of the other if that's possible.

Is it possible to just have the widget below the comic and not show up when the user hovers over the comic page? I tried disabling the widget on the profile settings page hoping that'd do it but it seems to make the widget stop working altogether.

Alternatively if that is not possible, is there a way to remove the widget below the comic but still have it when the comic image is hovered over?

I'm so sorry for being a pain.
Image
User avatar
Blargargy
 
Posts: 24
Joined: April 1st, 2019, 6:33 pm

Re: Change the images for the 'save my place' widget?

Postby eishiya » October 23rd, 2019, 8:52 am

Ah sorry, I went to bed!
You did the right thing, the hover embed is the auto-embed that's toggled in your profile settings, it comes as part of the pre-formatted comic page that's used to show the comic page in most templates. If you want a custom one, you'd need to disable that one.

(In theory, when/if the mistake in the code is fixed, the auto-embedded one should also be customizable just by putting the custom image variables above the comic page, and those should affect the auto-embed as well.)
Image
User avatar
eishiya
 
Posts: 9879
Joined: December 5th, 2009, 11:17 am

Re: Change the images for the 'save my place' widget?

Postby Blargargy » October 23rd, 2019, 7:33 pm

Thanks again eishiya for all of your help. This site and everyone on it is so lucky to have you around! :)

I haven't noticed much if any difference in page loading times with the added script so I'm very happy with it, but if the admin does get around to fixing the embedded code I'd appreciate if you could let me know either way!

Thanks so much once again!
Image
User avatar
Blargargy
 
Posts: 24
Joined: April 1st, 2019, 6:33 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 7 guests