Jump to content

Need help formatting a custom watermark for both Desktop and Mobile

Recommended Posts

Hello – I'm currently designing a site for a client who has requested that a watermark appears on all images in gallery blocks (it's a photography scholarship website so they would like to protect the work against screenshots, etc.). I have followed this tutorial and have successfully added a watermark to all of my Slideshow Galleries and Simple Grid Galleries (we use both on this site). However, despite my best efforts, I have not been able to format it how I would like. Ideally, it would sit in the bottom left-hand corner of every image it's applied to (currently it is bottom-center). Because the galleries feature both horizontal and vertical imagery, it's a little tricky but I think I have it sorted for desktop. Mobile is a mess because it sits in a fixed position (in relation to the gallery block I suppose) but there are many instances where it's off of the image, fading into the background, etc. 

Is it possible to make this watermark responsive to the actual images inside the gallery as opposed to the block? 

Page that hosts all of the individual gallery pages: https://tuatara-quillfish-agra.squarespace.com/recipients
Password for the site is: bucharest23

This is what my code looks like for mobile, but if there's a way to make it responsive on desktop too that would be amazing. 

Help me Squarespacers – you're my only hope!

// * watermark for mobile * //

@media only screen and (max-width: 767px) {.gallery-grid-item-wrapper{
    position: realtive!important}

.gallery-grid-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/63b8358e8a934c02f382193f/t/63ef57a074c0413092600b04/1676629920466/Ian+Parry%2C+Secondary+Logo+B%2C+RGB%2C+Small+Watermark.png)!important;
    background-size: contain;
    position: absolute;
    width: 90px;
    height: 20px;
    left: .5rem;
    bottom: 0.2rem !important;
    opacity: .4
}

.gallery-slideshow-item-wrapper{
    position: realtive!important}

.gallery-slideshow-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/63b8358e8a934c02f382193f/t/63ef57a074c0413092600b04/1676629920466/Ian+Parry%2C+Secondary+Logo+B%2C+RGB%2C+Small+Watermark.png)!important;
    background-size: contain;
    position: absolute;
    width: 21.3px;
    height: 19.8px;
      repeat: none;
      position: center;
    bottom: 4rem !important;
    opacity: .4
}


.gallery-lightbox-item-wrapper{
    position: relative!important}

.gallery-lightbox-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/63b8358e8a934c02f382193f/t/63ef57a074c0413092600b04/1676629920466/Ian+Parry%2C+Secondary+Logo+B%2C+RGB%2C+Small+Watermark.png)!important;
    background-size: contain;
    position: absolute;
    width: 150px;
    height: 62.25px;
    bottom: 1rem !important;
    opacity: .4
}
  
}

 

Edited by D_Efinger
Link to comment

Can you share the website URL and this gallery page? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I would probably try changing the section height to S rather than M. I don't think that would have much impact on the desktop, but it will reduce the padding on mobile which should help the positioning.

Alternatively, if you get rid of this line it will center the watermark:

bottom: 1rem !important;

I'm not sure this is useful to you, but disabling right click and an overlay watermark like this is window dressing in terms of protecting content, it's a 2 second job to find the URL and download the image without the watermark. The only way to protect the image is to downscale it beyond usage and photoshop a large watermark across the entire image (but no doubt AI will render that useless too in the near future!).

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi Ziggy – thanks so much for this.

I just changed the section height to S and removed the bottom: 1rem !important; line of code but it doesn't center the watermark? I had tried this before and I wonder if another piece of code is overriding the positioning? 

I do agree with you about the ability for people to save images – it's something we'd discussed with the client but at the very least, we wanted to take a few precautionary steps. But of course, any savvy internet users will know exactly how to access the images! 

Link to comment
3 minutes ago, D_Efinger said:

removed the bottom: 1rem !important; line of code but it doesn't center the watermark?

That's rather odd, it immediately jumped up in dev tools when I removed it. It does seem to be in there twice.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yeah there are 2-3 different watermarks for mobile because it has to apply to the slideshow gallery, grid gallery and also on any lightbox images (clicked on from the grid gallery). So perhaps Squarespace is getting a little confused? Should I put each of the instances in its own:

@media only screen and (max-width: 767px) {.gallery-grid-item-wrapper{
    position: realtive!important}

... kind of boxes? Or is that overcomplicating things? 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.