Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by brandon

  1. Related: https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/?tab=comments#comment-333248
  2. Related: https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/?tab=comments#comment-333248
  3. Related: https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/?tab=comments#comment-333248
  4. Yes, @hmfedders. You could do something like this, which would hide the description in a specific gallery on every-other item: [data-section-id="5db2f35f9ff0e37436549a65"] .gallery-grid-item:nth-child(even) .gallery-item-description { display: none; } Or you could target a list of gallery items individually by using their data-slide-url attribute: .gallery-grid-item[data-slide-url="1m274ar58gglbeuorp6quol3tmkhel-lx99y"] .gallery-item-description { display: none; } Do keep in mind that in the above examples, the data-section-id and data-slide-url would need to be changed to ma
  5. Hi @NuprinBoy. You understood correctly. You can control which galleries get descriptions by sending a CSS selector to the function. In your case, try this: In the first line of code in the function replace addGalleryItemDescriptions(); with: addGalleryItemDescriptions(".gallery-lightbox"); If that doesn't work, provide a link to the site/page in question and I'll take a look. -Brandon
  6. In addition to what Paul mentioned, you may also want to disable AJAX loading if your template supports it and has it enabled. The innerHTML() method by which body content is dynamically updated may cause scripts to misbehave (or rather, not behave at all).
  7. Hi @KarinaNa. I've not re-tested this but you can always try adding "!important" on those rules (see above example).
  8. Good find @paul2009. That's an example of code I don't even remember writing. One time I went looking for a coding solution I couldn't solve, and was happy when I found it on Answers. Then I realized it was my own answer...
  9. I agree with Paul. Having said that, I once had a client that insisted against my repeated advice. I managed to convince them to only have it blink a few times and only on the home page. Something like this: .homepage .sqs-announcement-bar-dropzone { animation: flash 0.9s linear; animation-iteration-count: 4; } @keyframes flash { 50% {opacity: 0.5;} } There may be better approaches, of course.
  10. Hi @VLabrie. I have implemented Flickity on multiple Squarespace websites, and it's a great library. However, it's really more of a developer's gallery tool/module than something you implement on top of a Squarespace gallery. In other words, it's its own gallery module in itself. It could be used without developer mode, but would likely be more cumbersome than would be reasonable to implement. For slideshow gallery blocks (and other blocks and contexts too), I created Swipeable Galleries for Squarespace. Now, to clarify, it does not alter the transition of images (as in, if your gall
  11. @jwharton: Give this a shot. I did not test it on actual mobile devices, so you'd want to do that after implementing: .mobile-nav-open #siteWrapper { position: static !important; } -Brandon
  12. This has to do with AJAX loading. Your previous template probably didn't have it, but Margot does. Disable it, or encapsulate your code in a manner that accounts for it.
  13. @jaisequoia: Thanks for letting me know. I've re-enabled the demo site. If you have any questions, drop me a line.
  14. Regarding the logo wall, that's strange @jonaverill. I'll have to swing back and see if I can duplicate it using a single section. Regarding adding a link to a gallery image: I find adding links to gallery images in 7.1 to be quite fiddly. I'll set a link, click on another image, make some changes, then save the section. When I go back, the link I added isn't saved anymore. I found it works best if I set the link then immediately hit the "Close" link on the section. I've updated the code in my original answer to accommodate gallery items that have links added to them. It requi
  15. Hi @Benedetto. The example code is fairly generic. It's simply a matter of changing the selector (in this case ".collection-5d7a891600952e518d49e751 .project-image") to whatever applies to your use-case. One can use browser developer tools / web inspector to locate the collection ID or other selector information, make the adjustment, then add via Custom CSS. As is often the case, if you need something more specific, it's best to include a link to the page in question, a description of what you want to achieve on the page. If that's the case, consider editing your message above to include
  16. Updated answer. Note that you may also need to set your gallery options so that it automatically crops images.
  17. Yes, there is: .sqs-announcement-bar-close { display: none; } -Brandon
  18. Henry, Give this a shot, inserted via Custom CSS: #collection-5dbeb8db6164d93f9b647c33:not(.sqs-edit-mode) { .sqs-block-gallery { width: 100vw !important; height: 100vh !important; position: fixed; padding: 0 !important; } #footerWrapper { display: none; } } Now, I didn't heavily test that, but it'll get you started. Keep in mind that the CSS is setup to only work when you're viewing your site outside of edit mode (not logged in). That way, you can still edit the gallery as you'd expect, but when visitors see the page, it'll be a full-screen gallery.
  19. Hi @Henry_lmb. In some cases this can be accomplished via CSS alone, setting the width of the block based on the viewport width, allowing overflow of the parent and adding the text via pseudo-elements. A link to the page in question with the gallery on it (and the view-only password set via site-visibility, if necessary) would help others provide more specific code. -Brandon
  20. Hi @carliemcgarity. Try inserting the following via Custom CSS: .no-touch .collection-5d7a891600952e518d49e751 .project-image { -webkit-filter: grayscale(100%); filter: grayscale(100%); &:hover, &:focus { -webkit-filter: grayscale(0%); filter: grayscale(0%); } } Let us know how it goes. -Brandon
  21. Hi there. Insert the following via Custom CSS: .Header { position: -webkit-sticky; position: sticky; top: 0; z-index: 890; } .collection-type-blog.view-list.tweak-blog-list-full-bleed:not(.tweak-blog-list-filter-show) .Header, .collection-type-blog.view-list.tweak-blog-list-full-bleed.tweak-blog-list-filter-show:not(.has-active-filter) .Header, .collection-type-blog.view-item.tweak-blog-item-header-full-bleed .Header { position: fixed; } -Brandon
  22. Hi @briang97603. This is achievable via either JavaScript or CSS. Option 1: JavaScript .This would be more complicated and would require swapping src attributes and other attributes in order to make use of Squarespace's dynamic image sizing, ImageLoader. Option 2: CSS Background Images. CSS is simpler if you only load a single, high-resolution alternate image via the background-image CSS property. Using media queries, you'd then hide the <img> itself via either opacity, visibility, position, etc. I suppose you could also use media-queries to load various alternate images of var
  23. Hi @jonaverill. If it's a gallery section that you've added logo images too, then it's a matter of passing the appropriately-exclusionary CSS selector to the function so that certain sections aren't selected. Another option is to set a space as the description for the image. See the second two bullet points under "JavaScript" in my post. If it's a "logo wall" section you're talking about, I wasn't able to reproduce the issue. So if that's the case, could you provide a link to the page in question? If it's a different sort of section you've added (that is, not a gallery section of som
  • Create New...