mferrini

Using section ID's won't work, so instead try using the following js which assumes you're using jQuery and repeat it for each summary carousel's block ID. You can either place this into the page's Advanced header settings or the Code Injection area. Also this way you can set different intervals for each carousel. <script> // summary block auto carousel window.onload = function() { var nextArrow = document.querySelector("#your-summary-block-id-here .summary-carousel-pager-next"); function clickNext() { nextArrow.click(); } setInterval(clickNext, 5000); }; </script>

This issue has been resolved with help from both @tuanphan and the fine folks at SQSPThemes (Lightbox Anything) who suggested I add a hook to the Universal Filter config: hooks: { afterFilter: function (f) { if (f.requestComplete) { pluginLightbox({"closeExisting":"true"}); } } }, And that did the trick!

Hi Circle folks, I could really use your collective help. So, our client wanted blog entries to pop-up into lightboxes and with some guidance from the ever helpful @tuanphan we got it working using the Lightbox plugin: https://www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin with SquareWebsites' fantastic plugins, Lazy Summaries and Universal Filter on static pages so that we can show more than the standard 30 per summary block or 20 posts before pagination. https://rapid.squarespace.com/ Pwd: Letmein And it's been working great, except that the other requirement is that posts from Projects will have buttons containing links to tag results, for example this one: https://rapid.squarespace.com/all-projects/skykomish-wildfires has a button which links to: https://rapid.squarespace.com/resources/rapid-equipment-portfolio?tag=Skykomish Wildfire which also works, except that if the tag is deselected or the "See All" button is clicked above the filter to show all results, as you'll see the first few results still trigger the lightbox, but after that, (inconsistently with different tag URLs) most of the rest of them won't and the "Read More" link in the excerpt of each which is supposed to trigger the lightbox doesn't get the .lightbox-link class applied and therefore those links display in green and the lightbox doesn't work. We also tried adding the filter to the blog itself, but the same problem persists with direct tag links. It’s fine until you remove the tag and/or click the See All button: https://rapid.squarespace.com/rapid-equipment-portfolio https://rapid.squarespace.com/rapid-equipment-portfolio?tag=Marshall Wildfire So, we're really stumped because there's no difference between any of these posts and they all have the links in the excerpt field which are supposed to trigger the lightbox like: #lightbox_/rapid-equipment-portfolio/insta360-one-360-degree-camera There are no errors in console, so it's difficult to know what, if any conflict may be happening with the various scripts. The summary blocks are set to Load All under Lazy Settings and we've tried variations on that setting but none of them made a difference. My guess is that it may be some limitation in the lightbox script itself which is adhering to the default limitation of the summary blocks only being able to show 30 at a time without the Lazy Summary plugin, but I'm not sure how to even test that out short of searching the lightbox plugin code itself, which I've tried, but can't really make sense of. Anyway, the client is wanting to show a preview of the site to their funders in a week, so I'm hoping to get this resolved in time for that. Thanks so much in advance for any advice or help anyone can provide. Martin

Hi @tuanphan the site is using business plan, hence I'm able to use jQuery for the solution I described - hiding the graphic on scroll, which actually works fine, but I'd still be interested in how to customize the header transition. Thanks!

Wondering if anyone, perhaps the ever helpful @tuanphan has a rock solid, best practice for customizing the transition-delay for the sticky header in 7.1 on shrink? For the homepage only, I'd like to delay the transition for the .shrink class for this site such that the header doesn't show it's background (which is invoked upon shrink) until the site is scrolled past the point at which the centered logo "How God Works" isn't viewable anymore in that first section: https://how-god-works.squarespace.com/ Pwd: Letmein I'm guessing it may involve more than custom CSS (some sort of javascript) since the depth of scroll will be different at different view heights? The code I've tried, but hasn't seemed to have any effect thus far is: .homepage .header .header-announcement-bar-wrapper { transition-delay: 8s !important; } .homepage .header.shrink .header-announcement-bar-wrapper { transition-duration: 4s !important; } I've already tried searching for answers and have found some that are close, but nothing definitive about how to consistently delay the header transition and nothing about what I'd like to do specifically. Thanks in advance for any advice/answers, Marty Addendum: For now I've simply hidden the "How God Works..." graphic on scroll with a bit of jQuery, but I'm still very interested in how to delay the .shrink transition.

The simplest solution I've found to this is to use code blocks as @jy15 stated with corresponding links in the nav, like on my site: https://www.martinferrinidesign.com/ Markup/CSS is: <!-- Place html like this into code blocks into the section you want the nav items to scroll to --> <a class="anchor" id="services"></a> <!-- Links in nav get /#services and so on as their URL --> .anchor { display: block; position: relative; top: -150px; visibility: hidden; } /* -- Place this near the top of the Custom CSS area -- */ html { --scroll-behavior: smooth; scroll-behavior: smooth; } Then if you need to adjust certain anchors to have more of an offset simply add more CSS, like: #services {top: -250px;} This works in Safari and mobile as well. And in situations where there's nowhere to add a code block like in 7.1 auto-layout sections (like 'People' for example) you can either create a section above the one you want the nav to scroll to and place a code block into it and use the section id to remove padding and even set the height to 1px so that the offset will work, but the section it's in won't take up extra space, in CSS like: [data-section-id="626af404c5414a740afc03bd"] .content-wrapper { padding: 0 !important; max-height: 1px !important; } Lastly, if that's not optimal you can use javascript in the Code Injection area to inject, or prepend (or append) html into anywhere in your site, typically right on or above the div you'd like to be in the viewport when the anchor link is clicked/tapped like: <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> // Prepend anchor to section $('[data-section-id="626af404c5414a740afc03bd"] .content').prepend('<a class="anchor" id="services"></a>'); </script> Hope this is helpful!

I should clarify, that this situation is solvable, to a point using the Universal Filter plugin by exposing the .filter-value with CSS, like: /* -- Expose .filter-value -- */ .custom-filter-container .filterDropdown:not(.outside-values-visible) .outsideFilterValues {display: block;} This will show the name of the tag or category a user has filtered underneath the filter name. And this works wherever the filter is applied, but it really should be built in AND developers/clients should have the ability to name the value title, which using Universal Filter can be done within the config script for tags and/or categories, here: name: 'Filter By Topic', multiple: true, capitalcase: true, getAttr: 'tags' Also, it's unfathomable to me why Squarespace would make the arbitrary decision to limit how tags and categories can be displayed AND to set character limits to categories. Perhaps they'll add this back to 7.1 and have some internal reason for not doing so already, but a little more transparency from them would be greatly appreciated, especially with features that have been removed in the transition from 7.0 to 7.1.

This is a maddening issue with 7.1. Not only is there a limitation which only allows for categories to be shown in a blog section and NOT tags, but whenever something is filtered there's no way to show a user where they are, like in 7.0. Even using the fantastic Universal Filter: https://www.squarewebsites.org/products/universal-filter This seemingly arbitrary limitation feels impossible to solve. Why Squarespace? Why?! If anyone has a solution for this I'd like to know. Thanks!

Hi @tuanphan, This is very cool, but what if one needs an auto breadcrumb for 7.1 blog sections? For example, with sciencesites.org, using 7.0 (mostly Brine) we'd typically use an archive block and some javascript to give tags/categories and on state for each tag/category link based upon matching the URL, but perhaps there's a better way that's similar to your solution for products? Because most of our clients want blog lists with effectively endless items listed, at the moment I'm using: https://www.squarewebsites.org/products/universal-filter and https://www.squarewebsites.org/products/lazy-summaries with this site: https://bart-wilson.squarespace.com/publications Pwd: Letmein And they work great, however as far as I can tell there's no way have links to tag/category results from anywhere else on the site show a user where they are. For example if you click one of the links on the homepage like: https://bart-wilson.squarespace.com/all-publications?tag=Property The actual blog page, "/all-publications" both doesn't show tags and won't show any indication of what's being displayed, unlike in Brine templates where a "Viewing Posts In:" message would appear (.BlogListFilter). Ideally the blog list would just show tags AND categories as it does in 7.0. Hope this all makes sense? Thanks for your time and I hope you're safe within this COVID purgatory!