Jump to content

Background images not appearing... AGAIN

Recommended Posts

Posted

Our background images all across our website have turned gray again. Last time this was a coding issue and we were able to insert a line of code that brought the images back. I tried the same code again (I know next to nothing about coding) and nothing changed.

this is the current code. it is in the box for the footer. it includes the code i inserted at the top.

 

<script src="https://code.jquery.com/jquery-3.6.1.min.js">
</script>

<script>
    (function (storeId) {
        document.addEventListener("pageChange", function () {
            loadEcwid();
        }, false);
        loadEcwid();

        function loadEcwid() {
            var containerId = 'my-store-' + storeId;
            var container = document.getElementById(containerId);
            var isEcwidPage = container != null;
            var ecwidLoaded = isEcwidPage && container.childNodes.length > 0;
            if (ecwidLoaded && isEcwidPage) return;
            if (!isEcwidPage) {
                window.ecwid_nocssrewrite = true;
                initEcwidIfNecessary(document.body);
                return;
            }

            window.ecwid_script_defer = true;
            window.ecwid_dynamic_widgets = true;
            window.css_selectors_prefix = encodeURIComponent('div#' + containerId);

            initEcwidIfNecessary(container, true);
        }

        function initializeScripts() {
            var initializationScripts = [{
                "widgetType": "ProductBrowser",
                "id": "my-store-" + storeId,
                "arg": ["categoriesPerRow=3", "views=grid(20,3) list(60) table(60)", "categoryView=grid", "searchView=list", "id=my-store-" + storeId, "defaultProductId=" + getValueSave("my-store-" + storeId, "data-default-product-id"), "defaultCategoryId=" + getValueSave("my-store-" + storeId, "data-default-category-id")]
            }];
            if (document.getElementById('my-search-' + storeId)) {
                initializationScripts.push({
                    "widgetType": "SearchWidget",
                    "id": "my-search-" + storeId,
                    "arg": ["id=my-search-" + storeId]
                });
            }
            if (document.getElementById('my-categories-' + storeId)) {
                initializationScripts.push({
                    "widgetType": "CategoriesV2",
                    "id": "my-categories-" + storeId,
                    "arg": ["id=my-categories-" + storeId]
                });
            }
            window._xnext_initialization_scripts = initializationScripts;
        }

        function initEcwidIfNecessary(container, reset) {
            if (typeof Ecwid != 'undefined') {
                if (reset) {
                    Ecwid.destroy();
                    initializeScripts();
                }

                ecwid_onBodyDone();
                Ecwid.init();
            } else {
                initializeScripts();

                var script = document.createElement('script');
                script.charset = 'utf-8';
                script.type = 'text/javascript';
                script.id = 'ecwid-script';
                script.onload = function() {
                    Ecwid.init()
                };
                script.src = 'https://app.ecwid.com/script.js?' + storeId;
                container.appendChild(script);
            }
        }

        // init watch function
        window.onload = watch;

        function watch() {
            var observedAttributeName = "id";
            MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
            var a = new MutationObserver(function (a) {
                var dispatchedId;
                for (var b = 0; b < a.length; b++) {
                    var c = a[b];
                    if ("attributes" === c.type) {
                        var targetId = c.target[observedAttributeName];
                        if (dispatchedId && dispatchedId === targetId) return;
                        dispatchedId = targetId;
                        var d = new Event("pageChange");
                        document.dispatchEvent(d)
                    }
                }
            });
            a.observe(document.body, {attributes: !0, attributeFilter: [observedAttributeName]})
        }

        function getValueSave(id, attribute) {
            var node = document.querySelector("#" + id);
            return !node
                ? ""
                : (!node.getAttribute(attribute)
                    ? ""
                    : node.getAttribute(attribute))
        }
    })(28439727);
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

Screen Shot 2022-11-16 at 2.03.23 PM.png

  • Replies 1
  • Views 361
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Posted
1 hour ago, CampIlliana said:

Our background images all across our website have turned gray again.

As I explained in another thread, Squarespace made changes to the page markup for sections, adding a section-border class and this will have affected any code that referred to section-background classes. You'll need to update the custom code accordingly.

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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.