sorca_marian

No, it is JavaScript language 🙂

3000 and 1000 represent a delay in milliseconds until the code runs.
It makes a window resize to adjust the styling. I noticed that when I resized my window, the captions were aligned normally 

Try with a higher delay

<script>
window.setTimeout(function(){
    Y.one(window).simulate("resize");
}, 3000);
</script>

Did it work?

It is probably from a Squarespace update.

While it is getting fixed, try adding this code in Page Header Code Injection -> Footer

<script>
window.setTimeout(function(){
    Y.one(window).simulate("resize");
}, 1000);
</script>

Here is the place to add the code - at 1:54

I'm glad it helped you 

Can you share a link or a screenshot?

If you use the latest Localized Forms, you can use the below code
 

<script>

    /*
        In case you want to make immediate modifications on the form with the above methods.
        We need to check when the Squarespace React form was added
    */

    // 1. targetNode is the container or the form. If you have multiple forms, make sure to target the ".form-block" of that individual form.
    // 2. Inside the function startMyChangesOnTheForm(), put the code that makes changes on the form
    
    document.addEventListener("DOMContentLoaded", function(){

        var targetNode = document.querySelector('.form-block');

        // Options for the observer (which mutations to observe)
        var config = { childList: true, subtree: true };

        // Callback function to execute when mutations are observed
        var callback = (mutationList, observer) => {    
            mutationList.forEach(mutation => {
                // debugger;
                if( mutation.addedNodes.length ) {
                    mutation.addedNodes.forEach(addedNode => {
                        if(addedNode.classList.contains("react-form-contents")){
                            console.warn("Found react form mutation");
                            observer.disconnect();
                            startMyChangesOnTheForm();
                        }
                    });
                }
            });
            
        };

        // Create an observer instance linked to the callback function
        const observer = new MutationObserver(callback);
        // Start observing the target node for configured mutations
        observer.observe(targetNode, config);


        // Here is where we can add our code that will make changes to the form
        function startMyChangesOnTheForm() {
            var form           = document.querySelector(".react-form-contents"),
                firstNameInput = form.querySelector("[id*='fname-field']"),
                lastNameInput  = form.querySelector("[id*='lname-field']");

			firstNameInput.setAttribute("placeholder", "First Name");
            lastNameInput.setAttribute("placeholder", "Last Name");

        }

    });
</script>

This code is based on this code https://github.com/sorcamarian/squarespace-tricks/blob/main/Forms/modify-localized-form-input-with-javascript.html

I have a video about it in case you are interested

Hi,

It's probably from a Squarespace update.

Until they fix it, you can try the below code in the "page header code injection". 

<style>
.summary-block-collection-type-blog-basic-grid img {
    height: 100%!important;
    width: 100%!important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    position: static!important;
}

.summary-block-collection-type-blog-basic-grid .summary-thumbnail {
    padding-bottom : 0!important;
}
</style>

Yes, there is a way to add next/prev to individual posts.

The order can be based on their position from the main page.

Unfortunately, it will take me some hours to write the code and I can do it for a price.

I just fixed this issue recently.

It's probably from a Squarespace update.

Add this code to Custom CSS

 .sqs-gallery-block-stacked img[height] {
	height : auto;
}

I created a video and explain the code just in case somebody is interested
 

I am happy that the solution worked.

Thank you very much for the kind words.

You can message me here on my profile or contact me through www.abzglobal.net or marian@abzglobal.net

The code might run before the react form is implemented.

Try using the below code.
It checks when the react form was added on the page.
 

document.addEventListener("DOMContentLoaded", function(){

    var targetNode = document.querySelector('.form-block');

    // Options for the observer (which mutations to observe)
    var config = { childList: true, subtree: true };

    // Callback function to execute when mutations are observed
    var callback = (mutationList, observer) => {    
        mutationList.forEach(mutation => {
            // debugger;
            if( mutation.addedNodes.length ) {
                mutation.addedNodes.forEach(addedNode => {
                    if(addedNode.classList.contains("react-form-contents")){
                        console.warn("Found react form mutation");
                        observer.disconnect();
                        startMyChangesOnTheForm();
                    }
                });
            }
        });
        
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);
    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);



    function startMyChangesOnTheForm() {
        // Do the programmatical canges on the form
    }

});

1. targetNode is the container or the form. If you have multiple forms, make sure to target the ".form-block" of that individual form.
2. Inside the function startMyChangesOnTheForm(), put the code that makes changes on the values of the form

 

Hello @NovaSites,

I'm glad you like my content. Thank you for recommending it.

Have you tried to add normal form fields to the form, hide them with CSS, and fill those fields with JavaScript?

I have a code to hide the fields publicly but show them in the control panel: https://github.com/sorcamarian/squarespace-tricks/blob/main/Style/only-visible-in-control-panel.css

And here is the video 

On 10/10/2023 at 11:45 PM, Damon777 said:

I tried inputting the  code; however, the resetting of the one field continues. Is that code supposed to be part of the script section or its own section entirely?

This video might be helpful: 

You can do that with custom code.

To run JavaScript after a Squarespace form was submitted you can check the below video and here are the codes https://github.com/sorcamarian/squarespace-tricks/tree/main/Forms

I have created a video about this and posted the code on GitHub(https://github.com/sorcamarian/squarespace-tricks/tree/main/Forms)

@howharvey I tried it through the Developer Console in Chrome and it worked

If somebody wants to run some JavaScript after form submission for example for conversion tracking you can check this video: 

Here are the source codes: https://github.com/sorcamarian/squarespace-tricks/tree/main/Forms

You can track form changes using regular DOM events and have form data stored.
After the above code for form submission is executed you can get the latest data stored and do HTTP requests with it.

On 5/16/2023 at 4:37 PM, silllli said:

This may work now (thank you for pointing it out!), but cries to break anytime something changes in React or the form again. I’d rather have Squarespace to provide a way of submitting custom form data.

I agree.

I am waiting for a response from Squarespace technical team about this and if I get a official way of doing this I will post it here.

I also found a little simpler way

 

var input = document.querySelector("form input");
Object.defineProperty(input, "value", {
  value: "programmatically added value",
  writable: true
});

var inputEvent = new Event('input', { bubbles: true});
input.dispatchEvent(inputEvent);

14 hours ago, creedon said:

SS has indeed updated the form block and so custom code has broken.

SS is using React for their forms now.

I'm am not familiar with React but I found this possible rough gem.

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

Source

Basically React is swallowing up programmatic changes to inputs and this code may help with that.

I did a quick test and it seems to work but I make no promises if it will work for you or continue to work.

Let us know how it goes.

@sorca_marian

Thank you so much! It works!

Any update about Webp?

It's working.

Thank you!

1 hour ago, paul2009 said:

You can do this - except on the homepage 🙂 (as pictured above).

Thank you very much!

I’ll check soon.