CSS for sitewide photo credit

I use a lot of Unsplash images and Squarespace does not provide credit info with the images. Going and finding each image in Unsplash is very time consuming - I wish SP carried this info through with each image!

(I also use other images where I can put a specific source and link, eg from Pixabay cost I am just getting them manually and uploading them).

So, I was thinking......

As a minimum I would like to tag every image on my site with a 'Image credit' link that goes to a page where I can give more information to site visitors about the images used. On that page I can explain that images are sourced from Unsplash unless specifically credited just so people curious know the images are not just stolen!

What I am thinking is can I add a hyperlink worded 'Credit' to EVERY image, either in the caption of the image (appended to any caption already there, if any) or under the image but above the caption, or something similar that links to a page?

Link Wording: Credit

Link: https://baligram.me/imagecredits (not yet active)

Position: Probably best centered if it has to be placed under the image but separate from the caption because some of my image masks are round, so left or right alignment would look odd.

Front Size: Only needs to be small text ....same as the default for paragraph 3 style

PS: If doing a link is not possible, maybe just text saying Image: 'Unsplash or as credited'

Any help would be greatly appreciated.....

Cheers, Simon

Hi,

Can you share link to some pages where you use Unsplash images? We can check easier

Hi @tuanphan Great to hear from you!

My most recent post is a good example because it has a combination of Upsplash and other images and the other images: https://baligram.me/blog/bali-vs-thailand

Another page https://baligram.me/blog/the-best-rice-fields-in-bali-to-visit has all Upsplash (or mostly)

Is that enough to give you a feel?

Warm regards, Simon

Don't remove any code in your current code in Code Injection.

Add this to Last Line in Settings > Developer Tools > Code Injection > Footer

<script>
  $(document).ready(function() {
  $('img[src*="unsplash"]').parents('.image-block').append('<a href="https://unsplash.com" target="_blank" rel="nofollow" class="credit">Credit</a>');
});
</script>
<style>
 a.credit {
    color: var(--paragraphLinkColor);
    border-bottom: 1px solid;
}
</style>

Hi @tuanphan Thank you so much for helping, again!

I added the code in Code Injection -> Footer but it does not seem to have worked....

Just wondering if you might have a further moment to check and let me know if perhaps I did somethign wrong?

Warm regards, Simon

Quote

Just wondering if you might have a further moment to check and let me know if perhaps I did somethign wrong?

It appears you don't have jQuery installed.

Add the following before the code @tuanphan provided.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

Alternately if you end up using jQuery in multiple places you may want to move it to Settings > Developer Tools > Code Injection > HEADER, at the top of that field.

Let us know how it goes.

Hi @creedon Thanks for stepping in!

I tried adding the code in the Header (just in case needed in the future like you suggest) but it did not seem to work (i then tried the footer before Tuanphan's code and that also did not work).

I am guessing there's an error how I did it....any hints really appreciated! 🤪

Cheers Simon

When I checked your site initially I didn't detect jQuery being installed. Now that I dig deeper I can see multiple versions of jQuery are being loaded. Not sure why I didn't detect jQuery previously.

I suggest using the latest version v3.7.0 and remove other references to older versions of jQuery. In general you only need to load jQuery once. It is possible that various bits of code may depend on older versions of jQuery so you'll want to keep those old references around in a text file in case something goes wrong. If an effect you had working previously breaks, let us know and we can try to help.

I'm going to step back here and let @tuanphan help as it's his code and my initial jQuery premise not being installed was incorrect.

hI @creedon No worries at all - thanks for helping out! Hopefully @tuanphan has an insight...as you say, could be a bit risky removing older versions but let's see if that is the issue and what they might think is best.

Appreciate you stepping in though...

Cheers Simon

Hi @tuanphan Just wondering when you have a moment if you would help out on this and just see where the problem might be?

🙂

On 7/8/2023 at 8:31 AM, simon.stjohn said:

Hi @tuanphan Just wondering when you have a moment if you would help out on this and just see where the problem might be?

🙂

Try remove these lines & check again (Remember to save a copy of all code somewhere, just for backup)

(Code Injection Header)

(Code Injection Footer)

Hi @tuanphan Thank you so much for replying....I have removed those additional jquery references so there is now just the one in the Header:

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- End JQuery -->

However the captions don't yet seems to be appearing.....

Just wondering if you have a moment whether you might see any other issue that might be a roadblock?

Thanks again for your kind help....

Simon

Hi @tuanphan Interesting development!

Today I noticed I was not able to add blocks to my blog post, like Image or Accordian. If I clicked to add, nothing would happen.

So I contacted Squarespace and they found if I disabled scripts it worked fine. They suggested I check custom code.

I removed the most recent change which was the code for the photo credit and the site functionality like adding image blocks etc is working fine now.

The code I removed from Footer was:

<!-- Image credit -->
<script>
  $(document).ready(function() {
  $('img[src*="unsplash"]').parents('.image-block').append('<a href="https://unsplash.com" target="_blank" rel="nofollow" class="credit">Credit</a>');
});
</script>
<style>
 a.credit {
    color: var(--paragraphLinkColor);
    border-bottom: 1px solid;
}
</style>
<!-- End Image credit -->

So it seems like maybe there is an issue with this code that made the site sad!

What do you think?

Cheers Simon

Change it to this

<!-- Image credit -->
<script>
  $(document).ready(function() {
  $('img[src*="unsplash"]').parents('body:not(.sqs-edit-mode) .image-block').append('<a href="https://unsplash.com" target="_blank" rel="nofollow" class="credit">Credit</a>');
});
</script>
<style>
  body.sqs-edit-mode .credit {
  display: none !important;
  }
 a.credit {
    color: var(--paragraphLinkColor);
    border-bottom: 1px solid;
}
</style>
<!-- End Image credit -->

Hi @tuanphan Thank you so much again for your patience.

I added this new code to Footer, but it has not resulted in adding the link under the images

However, good news is that it does not cause a problem for the site, so that's a win!

Any thoughts?

Try adding this new code to Blog Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
 setTimeout(function(){
$('img[src*="unsplash"]').parents('body:not(.sqs-edit-mode) .image-block').append('<a href="https://unsplash.com" target="_blank" rel="nofollow" class="credit">Credit</a>');
},3000); 
});
</script>
<style>
  body.sqs-edit-mode .credit {
  display: none !important;
  }
 a.credit {
    color: var(--paragraphLinkColor);
    border-bottom: 1px solid;
}
</style>

Demo: https://tuanphan.squarespace.com/unsplash-credit?noredirect

Pass: abc

Hi @tuanphan Thanks for your help!

I tied that but it doid not work....plus the problem of not being able to add blocsk (eg: image) returned.

So I went back to the config as it was yesterday when I WAS able to add image bloks and despite rolling back adding an image block does not work (even though it did yesterday)....which is VERY odd!

So now I can't add blocks (eg: image) to posts.

Can you see anything in the Header or Footer code that could possibly do this?

Could it be that jquery/3.7.0 is not compatible with Squarespace? I did try changing this to 3.6.1, for example, and that did not fix the problem, however....

What do you think? What can I do to at least restore site functionality?

hI @tuanphan I have discovered something interesting. 

I removed ALL code from Footer Code injection and the problem with not being able to add blocks resolved. That means problem is in there somewhere. So I replaced it all and started to remove one by one to find the one causing the problem.

When I removed the following code, which is for the chatbot, the problem was resolved.

However, what's also interesting was I put your code in for the image credit and that does not work still.

Can you see anything in the following code that could be causing the problem?

The odd thing is the site was working fine for a long time since installing this....so its not this code as such, but a conflict between it and something else maybe?

<!-- Plugin Botsonic -->
      <script>
      (function (w, d, s, o, f, js, fjs) {
        w["chatsonic_widget"] = o;
        w[o] =
          w[o] ||
          function () {
            (w[o].q = w[o].q || []).push(arguments);
          };
        (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
        js.id = o;
        js.src = f;
        js.async = 1;
        fjs.parentNode.insertBefore(js, fjs);
      })(window, document, "script", "ws", "https://writesonic.s3.amazonaws.com/frontend-assets/CDN/botsonic.min.js");
      ws("init", {
        serviceBaseUrl: "https://api.writesonic.com",
        token: "46d21b80-50d2-4290-94ba-8bc16fc4690a",
      });
    </script>
<!-- end Plugin Botsonic -->

20 hours ago, simon.stjohn said:

Could it be that jquery/3.7.0 is not compatible with Squarespace?

I use v3.7.0 without issue on SS.

Hi @creedon Great to know - thank you!

I guess it comes down to there being something in the chatbot code that does not play nicely with some other code, I only wish I had the knowledge to work out what!

Hopefully @tuanphan will come to the rescue again!

Can you duplicate the site & add me? I can take a look.

@tuanphan Thank you so much - I appreciate it!

I know how to add someone as a contributor with email address.....ois that what you want me to do (what is your email)

Or otherwise what do I do to duplicate the site? 🤪

You can use this mail

Hi @tuanphan Thanks so much - I have added your email and sent an invitation!

Just to confirm, what I did was remove the code for the Chatbot at this stage. That code is:

<!-- Plugin Botsonic -->
      <script>
      (function (w, d, s, o, f, js, fjs) {
        w["chatsonic_widget"] = o;
        w[o] =
          w[o] ||
          function () {
            (w[o].q = w[o].q || []).push(arguments);
          };
        (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
        js.id = o;
        js.src = f;
        js.async = 1;
        fjs.parentNode.insertBefore(js, fjs);
      })(window, document, "script", "ws", "https://writesonic.s3.amazonaws.com/frontend-assets/CDN/botsonic.min.js");
      ws("init", {
        serviceBaseUrl: "https://api.writesonic.com",
        token: "46d21b80-50d2-4290-94ba-8bc16fc4690a",
      });
    </script>
<!-- end Plugin Botsonic -->

I removed this because it WAS working fine and causing the site no problem, but when I noticed that inserting images was not working I removed it and things returned to normal.

So I think the real issue is that the chatbot does not play nicely with some other aspect of the code.

Cheers Simon