mferrini

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!

Okay I'm going to answer my own question here, thanks to the hawkeye of @michaeleparkour it turns out I forgot to add the Lazy Summaries script, but had included the init, so the plugin was half working. Arrgggh! A lesson in being tired and not triple checking the Code Injection area!

Everything's working perfectly now, so thanks @michaeleparkour and  @tuanphan!!

On 9/24/2021 at 1:03 AM, tuanphan said:

Hi,

You should contact Michael via contact form in his site

Thanks Tuan, and thanks again for your help with michealinzlicht.com last week!

I've reached out to Michael on his Squarewebsites Slack channel.

Site URL: https://www.petalumapioneers.org/

Hi Circle folks, @michaeleparkour

I've got a two tiered question here relating to summary blocks and the Five template. 

I built this site, https://www.petalumapioneers.org back in 2017 and its got a ton of entries from two blogs, and one's posts use summary blocks to pull in other's excerpts (thumbnail, title and category) via certain categories. 

Meaning this blog: https://www.petalumapioneers.org/archive-by-photographer uses summary blocks to pull in all photos by certain photographers, via categories from this blog: https://www.petalumapioneers.org/archive-by-sitter

I also set up both blogs to have entries display in alphabetical order by using the convoluted method of entering the last ones first and/or changing the published date so they’ll display properly.

And it's all worked fine, however once new posts were added recently to: https://www.petalumapioneers.org/archive-by-sitter using the same methodology, the summary block now isn't pulling in the newest posts, categorized as George Ross into the corresponding post about him here:

https://www.petalumapioneers.org/archive-by-photographer/2017/4/4/george-ross-elon-d-ormsby

I just added the amazing Admin UI Tweaks: https://www.squarewebsites.org/squarespace-plugins/squarespace-admin-ui-tweaks and Lazy Summaries plugin: https://www.squarewebsites.org/squarespace-plugins/lazy-summaries and it's working as far as getting around the limit of 30 items, but oddly it's not working when set to sort alphabetically as you can see here:

https://www.petalumapioneers.org/test-blog-summary

Pwd: george

That page is pulling from a test blog I set up with items that have titles in alphabetical order and it's pulling in the same summary block with the same criterion I mentioned above for the photographer George Ross, but it's missing this entry with the category George Ross:

https://www.petalumapioneers.org/archive-by-sitter/2017/4/10/unidentified-oval-bust-portrait

And the same situation is true for this new entry of a photo taken by the photographer John Quincy Reed:

https://www.petalumapioneers.org/archive-by-sitter/2017/4/10/oval-bust-portrait-of-a-woman-with-color-applied-to-her-cheeks

The post has the correct category, but on the photographer’s post this newest photo isn’t showing in the summary block which is configured to pull in all posts categorized as John Q. Reed:

https://www.petalumapioneers.org/archive-by-photographer/2017/4/5/john-quincy-reed

So, my questions are, does anyone believe or know that this may be an issue with the fact that the Five template is no longer available or supported and is there a better way to achieve the desired results in 7.1, or even in say Brine in 7? 

Ideally I'd like to encourage the client to upgrade to 7.1 and I'm imagining we could use perhaps use gallery sections to display the photos and summary blocks to display the photographer posts with Universal Filter: https://www.squarewebsites.org/squarespace-plugins/universal-filter to allow sorting and alphabetical display, or something like that?

Lastly has anyone used Squarewebsites’ Tools Extension PRO:

https://www.squarewebsites.org/squarespacewebsites-tools-extension-pro

to export/import an older Squarespace site such as this from 7 to 7.1 and do you think it would work for this enormous, crazy site?

Thanks so much for hopefully taking a look!

Martin

On 12/30/2020 at 11:54 AM, mferrini said:

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!

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!