Sensebellum

Site URL: https://www.sensebellum.com/interactive-art-pop-up-art-installation I discovered this bug after a client informed us of it. What happens is that if a user enters the "Lightbox" of a gallery, then hits the "esc" key (like anyone would) it will redirect them to the Squarespace account login page. This is of course very bad and undesired. I have re created this bug across browsers even when in private mode. There is no "esc" key on mobile so it seems fine. What is going on here and how could this be fixed? Would it be helpful to attach a screen cast or anything else to better illustrate the problem? Thank you,

Site URL: https://www.etsy.com/listing/948815689/squarespace-plugin-pinch-zoom-lightbox?click_key=711ee784955105e3eb6f2a02f688bd9b49821df5:948815689&click_sum=25be274b&ref=shop_home_feat_1&frs=1 With all due respect I would like to take a moment to ask once again to implement the "pinch to zoom" ability on mobile and desktop for Squarespace version 7.0 and 7.1 To define some terms, "Pinch to Zoom" is the ability to use 2 fingers on a screen or track pad to enlarge the photo while in "Lightbox" mode on a website bult using Squarespace It is absolutely wild that in 2022 this feature is not available though it is on nearly every other site, app, and place I visit on the internet across devices. Instagram has it, WordPress has it, eBay has it, Craigslist has it, old blogger pages have it; in fact I am only aware of Squarespace as one of the places that does not support this ability. When I send my portfolio pages that feature rich images to clients, and they can't pinch to zoom, I lose sales. Period. It feels antiquated and I grow weary of explaining to them why this is not possible. There are some work arounds such as this plugin https://www.etsy.com/listing/948815689/squarespace-plugin-pinch-zoom-lightbox?click_key=711ee784955105e3eb6f2a02f688bd9b49821df5%3A948815689&click_sum=25be274b&ref=shop_home_feat_1&frs=1 However, it is buggy and works only sometimes. I have posted this before, and many others have asked the same questions. Most replies from official Squarespace accounts confirm this feature is not available and usually cite the reasons is that it is "hard to do with JS" or something. Considering that someone was able to make this work with a $45 plugin found on Etsy, the fact that Squarespace powers SO MANY SITES, the fact that this feature exists nearly everywhere else, AND the fact that prices keep getting raised I must raise this issue once again and sincerely implore the Squarespace devs to do something about this. I get ads all the time, even sometimes in the design bar of my account for new ecommerce this, new scheduler that, and all the while basic features like pinching to zoom in on images, an idea that has been widespread and possible for over a decade, still hasn't hit the shelves yet... Please, please, please just code this in. I know you can do it. Please. It would literally benefit everyone massively. Thank you, A customer of over 6 years with 4 sites on your platform.

Pinch to zoom exists virtually everywhere else on the internet and it should be made possible on Squarespace. kind of a big issue and sticking point. It is possible to figure out and at the prices SS is charging it is striking that this feature does not exist when it's plenty easy to do on WordPress and others.

Figured it out! Used this resource and put it in a code-block. Might have to ensure it works in all browsers but it's a start! <style> #grad1 { height: 2px; background: linear-gradient(to right ,#C94127, #EF7F25,#E5DC38,#34B44A,#4E68EA); } </style> <div id="grad1"></div>

Unfortunately the linked example did not work. Using Charlotte template if that is any help. .sqs-block-horizontalrule hr { background-color: orange; }

Is it possible to customize the line block in Squarespace so that it is a multi-color gradient? There is an example here where a developer can make the line a single color. But can you make it a two color, or multi-color gradient instead? Thank you for any help!

Hey this actually worked pretty well! Thank you very much for sharing. What methods might be available to show the first few lines of text or just an image? Any lines of code come to mind? Many thanks!

I would like each blog post to be a shorter length, or only a few paragraphs, so that they do not need to scroll through the sometimes lengthy posts to get to the next blog post. Maybe someway to shorten the appearance with a "Read More" or something at the bottom? That way a visitor can click on the blog post title itself to navigate to that page to read the full thing. I feel like this was possible on another template though I would like to see how that can be done on the current one I am using (Hayden). Thank you so much!

Hello, I am not an expert and am not sure why it may be stuck left, right, or othewise. I am just getting back to web building and if I find a way to fix this I will sure let you know. Thank you!

Just checking back in on this thread. I find it wild that this is still not a native option, to "pinch-zoom", in Squarepsace as it is 2021 and a lot of the content is highly detailed and would benefit greatly from this feature. Getting back into web design for my sites and I will be surely trying out that plugin. Thanks for all the words on this subject everyone!

BOOM! Nailed it. This is how you do it. Make the Width & Height 100%. <div style="padding:56.25% 0 0 0;position:relative;"> <a href="https://www.sensebellum.com/new-page" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:5;"></a> <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen> </iframe> </div>

Progress! I am able to make a transparent rectangle that takes the user to the new page! Woo! I learned about it here. So the only problem is that the size of the rectangle does not change responsively like the video does. How can we easily code for this? <div style="padding:56.25% 0 0 0;position:relative;"> <a href="https://www.sensebellum.com/new-page" style="position:absolute; top:0; left:0; display:inline-block; width:1000px; height:500px; z-index:5;"></a> <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen> </iframe> </div>

Progress! I am able to make a transparent rectangle that takes the user to the new page! Woo! I learned about it here. So the only problem is that the size of the rectangle does not change responsively like the video does. How can we easily code for this? <div style="padding:56.25% 0 0 0;position:relative;"> <a href="https://www.sensebellum.com/new-page" style="position:absolute; top:0; left:0; display:inline-block; width:1000px; height:500px; z-index:5;"></a> <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen> </iframe> </div>

I'm not sure I'm being completely clear here. There is going to be a video on my website. Someone's going to click it. It's going to take them to another page on my website. Super simple. A video as a button. How do you modify the code above to do this? As you can tell I am really close. The single line of pixels above the video is clickable and it takes you to the URL. I'm just not getting the syntax right or something and it's not turning the entire video into a button. How do I using the code block posted above make this so the entire video is clickable? Conversely can I make a transparent rectangle as a button that lays over the top? then when they try and click the video, really a transparent rectangle that has a hyperlink in it, it will act as if they click the video and it was a button. Boom. It takes them to a new page on my website. Super simple. We are going to do this and I would love if you had any insight.

Hello. I need the user to click on the video and be taken to a new page. How can we do this? The code I posted is very close to working. Do you know how to tweak it to achieve this effect? Or, do you know of another way to present a video on the website and turn it into a click-through link? Thanks!

Okay this is where I ended up. The first row of pixels is the link but not the video. <div style="padding:56.25% 0 0 0;position:relative;"> <a style="display:contents" href="https://www.sensebellum.com/the-sandbox-of-life"> <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen> </iframe> </a> </div>

It's the first line of pixels!

For some reason it works on mobile sometimes.... Maybe the area to click is really small? It's not obvious why it only works some places. Nothing on desktop yet.

Well then I just ended up making a brand new code block on the page and starting with this. I feel I am realllllly close. Trying to somehow wrap the iframe or div as a clickable thing as per this article. I feel like it is possible I am just not that well versed at the exact syntax yet. Is that something that can be done? Thanks! <div style="padding:56.25% 0 0 0;position:relative;"> <a href="https://www.sensebellum.com/the-sandbox-of-life"> <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen> </iframe> </a> </div>

This is as far as I got tonight. It works on desktop but not on mobile. Probably due to screen size. Maybe there are some ways I can improve this? Would love to actually just click the video instead of putting some HTML text over the top. Thanks! <div style="position: fixed; text-align: center; z-index: 1000; width: 100%; position: absolute; top: 1000px; height: 100%"> <h2> <a href="https://www.sensebellum.com/the-sandbox-of-life">The Sandbox of Life</a> </h2> </div>

Getting really close to dialing in the auto-play videos now and I'm curious if there is one possibility. Can you add some sort of click through link on a video? I'm doing an autoplay video from Vimeo. I read somewhere on how to hide the UI. Looks super clean. I can figure out how to say bake a bit of text that looks like the button into the video itself. But I need to make it go somewhere. I'm really trying not to make it take the user to a new page. You know, a click-through link just like the pictures do? What can be done here? I am open to getting crafty. Thanks!

Just getting familiar with the Marketing side of Squarespace. It is appealing to have it all in one place. As I dig into the organization of the Subscribers I am curious on how to do basic tasks. Maybe there is a way I am not seeing. First of all, I have read the docs and they were very helpful. I however did not see these things which is why I ask. https://support.squarespace.com/hc/en-us/articles/360001280708-Building-mailing-lists 1) How can you edit a Subscriber? I read in the docs that the way to "Edit Subscribers" is to add a new Subscriber with the email you wish to update and then just include the new name. Is that really the only way? Kind of seems like a work around why not just a edit dialogue right there like most fields on the site? 2) How can you move OR copy a Subscriber from one Mailing List to another? Maybe the Subscriber should actually be in List A vs List B. How can I move OR copy that Subscriber? It seems currently the only way is to delete the Subscriber and then manually re-enter (or with a .csv). 3) Can you add any other information to a Subscriber like tags, descriptors, dates, etc? I am thinking that if I don't implement good organizations practices now it could get out of hand and hard to manage with 1,000's of emails. Thank you very much for any help or tips on how other people organize their Mailing Lists!

Vani, where do you put this code? For each page? Or in the site wide Custom CSS? Thanks!

For the record here is another plugin. "Pinch Zoomer jQuery Plugin" Not sure on how to integrate with Squarespace but it seems like it gets at the issue. https://codecanyon.net/item/pinch-zoomer-jquery-plugin/6623080

Wow, that was deep vernistage1 nice work! I tried out the plugin I listed and it doesn't solve the problem. Slight nuance in the type of zoom functionality it provides vs what is needed. I noticed between that original post and now the Lightbox functionality works slightly differently. Still no zoom though... Will keep searching!