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. 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 match your website. You can obtain these attributes using your browser's developer tools/inspector.
  4. 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
  5. 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).
  6. Hi @KarinaNa. I've not re-tested this but you can always try adding "!important" on those rules (see above example).
  7. 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...
  8. 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.
  9. 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 gallery fades, it will still fade...but gestures will trigger the transition) nor does it add touch/track-pad swiping (such as two-finger swipe for horizontal scroll). It focuses on touch devices (tablets, phones, most Windows-based laptops these days, etc.), and adds swipeability to those. So, it doesn't check all your boxes, but it may suffice. I hope that helps. -Brandon
  10. @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
  11. 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.
  12. @jaisequoia: Thanks for letting me know. I've re-enabled the demo site. If you have any questions, drop me a line.
  13. 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 requires just a couple minor changes to both the JavaScript and the CSS. I don't think it's possible to add links to "slideshow" type galleries of any kind. I guess that sort of makes sense, but I wanted to point that out.
  14. 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 that info (rather than posting a new message, which adds to the length of the thread here).
  15. Updated answer. Note that you may also need to set your gallery options so that it automatically crops images.
  16. Yes, there is: .sqs-announcement-bar-close { display: none; } -Brandon
  17. 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.
  18. 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
  19. 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
  20. 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
  21. 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 various resolutions/sizes if you really wanted to. Usually, with Squarespace sites, I tell people to just load a single high-resolution image because it's usually not significant compared to the collective size of the page. Some CSS will be required to resize the gallery itself. In any case, you can upload the images via file storage or via an image gallery collection, etc. Then, use those file paths as the alternate img file paths, whether using JavaScript or CSS. Option 3: Two gallery blocks & CSS. Put the skyscrapers in one, and the square ads in the other. Use CSS media queries to show one gallery on desktop and show the other on mobile. That would look something like this (Where the code says "TBD" is where the block ID of the square gallery would be. You can identify block IDs using your browser's developer tools/web-inspector.): /* Show skyscraper */ #block-yui_3_17_2_1_1537482878901_13769 { display: block; } /* Hide square */ #block-yui_TBD { display: none; } @media only screen and (max-width: 640px) { /* Hide skyscraper */ #block-yui_3_17_2_1_1537482878901_13769 { display: none; } /* Show square */ #block-yui_TBD { display: block; } } The first option may take an experienced Squarespace dev. 4 hours or less to do in a way that allowed you to maintain it over time, changing ads. The second would probably take 2 hours or less, and the third an hour.
  22. 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 some kind), what section was it?
  23. How long is your video @angela3, and how large is the file once it's compressed as much as you can tolerate?
  • Create New...