Jump to content

brandon

Circle Member
  • Posts

    2,215
  • Joined

  • Last visited

  • Days Won

    29

Reputation Activity

  1. Like
    brandon got a reaction from GretchenElizabeth in Gallery Caption workarounds for 7.1?   
    Hi @emmaj.
    A1: There are a couple ways to do this. The JavaScript is setup so that you can pass in your own CSS selector. That allows you to set which galleries get descriptions (by default, all of them do). In your case, it sounds like you only want to select gallery lightboxes. So replace this line in the JavaScript:
    addGalleryItemDescriptions(); with
    addGalleryItemDescriptions(".gallery-lightbox"); An alternative way (instead of the above) would be to simply leave the JavaScript alone (so all galleries would still have descriptions) but then hide it on certain galleries using CSS. You'd use your browser's inspector/developer tools to find the correct selectors and write the CSS. Something like this might work:
    section.gallery-section .gallery-item-description { display: none !important; }  
    A2:
    .gallery-item-description { text-align: left; }  
    A3:
    This would technically be possible by using the image file name as the title. You'd be sure you name your file "This is my title.jpg", then the JavaScript component of the code I wrote could be amended to add that as the title (minus the file extension ".jpg".). That'd take a fair bit of additional custom development time, but it is possible.
     
  2. Like
    brandon got a reaction from GretchenElizabeth in Gallery Caption workarounds for 7.1?   
    Hi @technopaul.
    You could add the following to the CSS, where appropriate (depending on whether you want the rule to apply globally or just to a specific gallery or type of gallery):
    .gallery-item-description { pointer-events: none; }  
  3. Like
    brandon got a reaction from GretchenElizabeth in Gallery Caption workarounds for 7.1?   
    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.
  4. Like
    brandon got a reaction from GretchenElizabeth in Gallery Caption workarounds for 7.1?   
    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. Haha
    brandon got a reaction from JayVanDyke in How to remove trailing decimal .00's from product pricing   
    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...
  6. Like
    brandon got a reaction from StudioKSR in Gallery Caption workarounds for 7.1?   
    Hi @AtelierDeux. The reason you're seeing raw code displayed on your site is due to inserting the code in the wrong location.
    I've updated the original post to include links that explain how to add the code. Note that you have to use both the CSS and the JavaScript together, and insert them both according to the directions. In your case, you're using per-page header code injection which may also work, but best to do as the directions say (and now link-to).
  7. Love
    brandon got a reaction from Hannahnas in Gallery Caption workarounds for 7.1?   
    This is an update to let you know that I've added just a couple lines of CSS to fix the issue with the lightbox caption delay/lag issue. The lines are added at the end of the CSS in the original post. They are:
    transition: opacity 0.1s ease-out; .gallery-lightbox-item[data-in=false] .gallery-item-description {   opacity: 0; } Special note to those who mentioned the issue: @kinapark , @IvanOB , @ed.design , @JohnS123
  8. Like
    brandon got a reaction from snicholls in How to adjust and reduce banner padding on a single page only?   
    The answer is to add CSS via the CSS Editor in order override your general setting for just that section. It's quite simple, but it does require some understanding of how Squarespace generates the underlying code for index sections such as that. Simply put, in your template, Squarespace creates a "section" element for each index page you create, and gives the section an "id" attribute based on the URL you assign to the page. Taking that all together, we have:
    section#video .Index-page-content { padding-top: 20px; padding-bottom: 20px; } Insert that via the CSS Editor and adjust to your liking.
    Note that you have a couple spacer blocks at the top of that section that you'll want to remove if you really want to close that gap.
    In the future, if you want to look into how this code is generated, get comfortable using your browsers developer tools and poking around with the inspector.
    Do let me know how this works for you.
  9. Like
    brandon got a reaction from DBLPJ in How to add an overlapping background colour behind photo in image blocks?   
    It's almost always best to provide the URL to the site/page in question along with the view-only password if necessary (for sites in trial mode, etc.). However, in this case you may not even have an example page setup.
    Here's an example in Brine which I whipped up.
    It uses "card" style image blocks in a single index section/page. Of course, your page ID would be different, and you'd probably want to more specifically target the section. You'll also want to mess with the padding on the text in order to get it where you want.
    You could do the same thing with regular 'ol image and text blocks and would probably have a bit more flexibility, but I figured this was good enough to serve as a proof of concept for you so as to answer your question, "yes".
    #page-5d9e40adc1c17f087e491930 { background: ~"linear-gradient(#BBB, #BBB) no-repeat center/1px 100%"; /*https://stackoverflow.com/a/53551089/5338581*/ } .design-layout-card .intrinsic { padding-top: 50px; padding-bottom: 50px; } .design-layout-card.image-position-right .intrinsic { padding-right: 6%; margin-left: -6%; background: linear-gradient(90deg, rgba(0,0,0,0) 40%, #FFC0CB 40%); } .design-layout-card.image-position-left .intrinsic { padding-left: 6%; margin-right: -6%; background: linear-gradient(270deg, rgba(0,0,0,0) 40%, #FFBB22 40%); } .sqs-block-image .design-layout-card .image-card-wrapper { background-color: transparent; } Do let me know how this works for you.
  10. Like
    brandon got a reaction from IsaWP in Gallery Caption workarounds for 7.1?   
    Update 5/26/2020: Squarespace has added the ability to add image descriptions/captions to 7.1 gallery sections. See here. There are some limitations, such as not appearing in lightbox view and not supporting multiple lines. So, the workaround below may still be of use.
    ---------------------------------------------------------------------
    Hi @dan3.
    Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Squarespace 7.1 .
    View Demo Site
    JavaScript
    Insert via sitewide footer code injection. If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']") For images within a targeted gallery that you do not want a description to appear, you must enter a space as the description (otherwise the filename will show). <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script>  
    CSS
    Insert in "Customer CSS", via the CSS Editor. The CSS below is very basic, adding a white box around the description and generally placing it at the bottom. You can customize to your heart's content. /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } This is of course experimental. Do let me know how it works for you, or if you have questions.
    If you reply to this post, please do not quote the code in your reply. Doing so will create copies of the code which A) I would prefer not be copied and B) will propagate old versions of the code which are likely to fall out of date.
    -Brandon
  11. Like
    brandon got a reaction from dhob in Can someone help me change coding to get rid of decimal places in my pricing?   
    Hi. The following Javascript, inserted via footer code injection should do the trick:
    <script> (function() { var prices = document.getElementsByClassName('sqs-money-native'); var thisPrice; var i, I; for (i=0, I=prices.length; i<I; i++) { thisPrice = prices[i]; thisPrice.innerHTML = thisPrice.innerHTML.replace(/(\.[0-9]*?)0+$/, "$1").replace(/\.$/, ""); //http://stackoverflow.com/questions/1015402/1015434#1015434 } })(); </script>
    I didn't test this throughout your site...just checked a couple pages. Do let me know if this works for you.
    -Brandon

    If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

  12. Like
    brandon got a reaction from caroline.leonard in Why does the spacer have a minimum size?   
    Update 10/24/2019:
    Add this via the CSS Editor, save and refresh:
    /* Add this first bit to get more flexibility in height. */ .sqs-layout.sqs-editing .sqs-block, .sqs-block-spacer-content { min-height: 0px !important; } .sqs-block-spacer .sqs-block-content { height: 0; } /* Add this second bit too if you want to be able to go to zero. */ .sqs-block-spacer { padding-top: 0 !important; padding-bottom: 0 !important; } If a response helped you out, show some love by 'Like'  (bottom-right) and/or 'Upvote'  (top-left).
     
    Note that the minimum width of a spacer block isn't dictated by the block, but by Squarespace's grid system. It's not an issue with the spacer block, but it's the minimum width of any block on Squarespace (technically, it's the minimum width of columns). Messing with grid column width requires a case-by-case evaluation and code-writing.
     
    Original Answer:
    Hi @joshuar87.
    I've run into this in the past as well. The minimum height of the spacer block can seem too high for some instances.
    The minimum height seems to be based on a combination of your templates default 'line-height' property, the default top/bottom gutter height (17px), and an arbitrary minimum padding set by the SS system. Finally, a min-height rule limits the spacer block when dragging it up and down in LayoutEngine.
    It is possible to override these values by inserting the following CSS into the CSS Editor. Save, then refresh the page.
    /*Remove minimum spacer-block height*/ .spacer-block { padding-top: 0; padding-bottom: 0 !important; } .spacer-block .sqs-block-content { line-height: 0.0em; } .sqs-layout.sqs-editing .spacer-block { min-height: 0; } /*End remove spacer-block height*/   Keep in mind that if Squarespace changes their code, this kind of CSS can stop working at any time.
    Let me know how this works for you.
    -Brandon
  13. Like
    brandon got a reaction from ThePromoTeam in Why does the spacer have a minimum size?   
    Update 10/24/2019:
    Add this via the CSS Editor, save and refresh:
    /* Add this first bit to get more flexibility in height. */ .sqs-layout.sqs-editing .sqs-block, .sqs-block-spacer-content { min-height: 0px !important; } .sqs-block-spacer .sqs-block-content { height: 0; } /* Add this second bit too if you want to be able to go to zero. */ .sqs-block-spacer { padding-top: 0 !important; padding-bottom: 0 !important; } If a response helped you out, show some love by 'Like'  (bottom-right) and/or 'Upvote'  (top-left).
     
    Note that the minimum width of a spacer block isn't dictated by the block, but by Squarespace's grid system. It's not an issue with the spacer block, but it's the minimum width of any block on Squarespace (technically, it's the minimum width of columns). Messing with grid column width requires a case-by-case evaluation and code-writing.
     
    Original Answer:
    Hi @joshuar87.
    I've run into this in the past as well. The minimum height of the spacer block can seem too high for some instances.
    The minimum height seems to be based on a combination of your templates default 'line-height' property, the default top/bottom gutter height (17px), and an arbitrary minimum padding set by the SS system. Finally, a min-height rule limits the spacer block when dragging it up and down in LayoutEngine.
    It is possible to override these values by inserting the following CSS into the CSS Editor. Save, then refresh the page.
    /*Remove minimum spacer-block height*/ .spacer-block { padding-top: 0; padding-bottom: 0 !important; } .spacer-block .sqs-block-content { line-height: 0.0em; } .sqs-layout.sqs-editing .spacer-block { min-height: 0; } /*End remove spacer-block height*/   Keep in mind that if Squarespace changes their code, this kind of CSS can stop working at any time.
    Let me know how this works for you.
    -Brandon
  14. Like
    brandon got a reaction from Tesia in Gallery Caption workarounds for 7.1?   
    Hi @technopaul.
    You could add the following to the CSS, where appropriate (depending on whether you want the rule to apply globally or just to a specific gallery or type of gallery):
    .gallery-item-description { pointer-events: none; }  
  15. Like
    brandon got a reaction from DSOANS in Sticky Mobile Information Bar   
    This can likely be solved by inserting the following CSS via the CSS Editor/Custom CSS:
    .sqs-mobile-info-bar-hide { transform: none !important; } -Brandon
  16. Like
    brandon got a reaction from shan24 in Why does the spacer have a minimum size?   
    Update 10/24/2019:
    Add this via the CSS Editor, save and refresh:
    /* Add this first bit to get more flexibility in height. */ .sqs-layout.sqs-editing .sqs-block, .sqs-block-spacer-content { min-height: 0px !important; } .sqs-block-spacer .sqs-block-content { height: 0; } /* Add this second bit too if you want to be able to go to zero. */ .sqs-block-spacer { padding-top: 0 !important; padding-bottom: 0 !important; } If a response helped you out, show some love by 'Like'  (bottom-right) and/or 'Upvote'  (top-left).
     
    Note that the minimum width of a spacer block isn't dictated by the block, but by Squarespace's grid system. It's not an issue with the spacer block, but it's the minimum width of any block on Squarespace (technically, it's the minimum width of columns). Messing with grid column width requires a case-by-case evaluation and code-writing.
     
    Original Answer:
    Hi @joshuar87.
    I've run into this in the past as well. The minimum height of the spacer block can seem too high for some instances.
    The minimum height seems to be based on a combination of your templates default 'line-height' property, the default top/bottom gutter height (17px), and an arbitrary minimum padding set by the SS system. Finally, a min-height rule limits the spacer block when dragging it up and down in LayoutEngine.
    It is possible to override these values by inserting the following CSS into the CSS Editor. Save, then refresh the page.
    /*Remove minimum spacer-block height*/ .spacer-block { padding-top: 0; padding-bottom: 0 !important; } .spacer-block .sqs-block-content { line-height: 0.0em; } .sqs-layout.sqs-editing .spacer-block { min-height: 0; } /*End remove spacer-block height*/   Keep in mind that if Squarespace changes their code, this kind of CSS can stop working at any time.
    Let me know how this works for you.
    -Brandon
  17. Like
    brandon got a reaction from 7TK in Gallery Caption workarounds for 7.1?   
    This is an update to let you know that I've added just a couple lines of CSS to fix the issue with the lightbox caption delay/lag issue. The lines are added at the end of the CSS in the original post. They are:
    transition: opacity 0.1s ease-out; .gallery-lightbox-item[data-in=false] .gallery-item-description {   opacity: 0; } Special note to those who mentioned the issue: @kinapark , @IvanOB , @ed.design , @JohnS123
  18. Like
    brandon got a reaction from Magda555 in How to remove trailing decimal .00's from product pricing   
    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...
  19. Like
    brandon got a reaction from Layne_Alexandra in Trying to hide an image when displayed on a mobile   
    Hello. Add the following CSS via the CSS Editor:
    @media only screen and (max-width: 768px) { #block-8fc91e9563250a77172c { display: none; } }
    Do let me know if this works for you.
    -Brandon

    If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

  20. Like
    brandon got a reaction from VLabrie in Slideshow - Swipe or flick through/Horizontal scrolling   
    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
  21. Like
    brandon got a reaction from Margi in Thumbnail B&W to Colour Rollover   
    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
  22. Like
    brandon got a reaction from JohnNightingale in swap block order in mobile view   
    Hi there. Give this a try.
    @media only screen and (max-width: 640px) { #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) { display: table; } #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) .col:first-child { display: table-footer-group; } }
    Using Flexbox may be the more standard way to reflow the visual presentation of the document, but using it here causes additional complications, and doesn't have as broad compatibility as display:table.
    Let me know how it works for ya.
    -Brandon
  23. Like
    brandon got a reaction from pixolnaut in Gallery Caption workarounds for 7.1?   
    Update 5/26/2020: Squarespace has added the ability to add image descriptions/captions to 7.1 gallery sections. See here. There are some limitations, such as not appearing in lightbox view and not supporting multiple lines. So, the workaround below may still be of use.
    ---------------------------------------------------------------------
    Hi @dan3.
    Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Squarespace 7.1 .
    View Demo Site
    JavaScript
    Insert via sitewide footer code injection. If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']") For images within a targeted gallery that you do not want a description to appear, you must enter a space as the description (otherwise the filename will show). <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script>  
    CSS
    Insert in "Customer CSS", via the CSS Editor. The CSS below is very basic, adding a white box around the description and generally placing it at the bottom. You can customize to your heart's content. /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } This is of course experimental. Do let me know how it works for you, or if you have questions.
    If you reply to this post, please do not quote the code in your reply. Doing so will create copies of the code which A) I would prefer not be copied and B) will propagate old versions of the code which are likely to fall out of date.
    -Brandon
  24. Like
    brandon got a reaction from jolangford in Gallery Caption workarounds for 7.1?   
    Update 5/26/2020: Squarespace has added the ability to add image descriptions/captions to 7.1 gallery sections. See here. There are some limitations, such as not appearing in lightbox view and not supporting multiple lines. So, the workaround below may still be of use.
    ---------------------------------------------------------------------
    Hi @dan3.
    Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Squarespace 7.1 .
    View Demo Site
    JavaScript
    Insert via sitewide footer code injection. If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']") For images within a targeted gallery that you do not want a description to appear, you must enter a space as the description (otherwise the filename will show). <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script>  
    CSS
    Insert in "Customer CSS", via the CSS Editor. The CSS below is very basic, adding a white box around the description and generally placing it at the bottom. You can customize to your heart's content. /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } This is of course experimental. Do let me know how it works for you, or if you have questions.
    If you reply to this post, please do not quote the code in your reply. Doing so will create copies of the code which A) I would prefer not be copied and B) will propagate old versions of the code which are likely to fall out of date.
    -Brandon
  25. Like
    brandon got a reaction from paul2009 in Brine: Nav to change color after scrolling past Hero   
    For what it's worth, for templates based on Brine , the number of concerns when creating a fixed header are much greater than is typically appreciated, and include:
    differences between index and non-index pages differences between first-child index sections with image vs without. whether you have the headers set to overlap on index pages what headers (top/bottom) are enabled whether the screen is resized whether the announcement bar is used whether the announcement bar is used but then closed by user whether text in the announcement bar is wrapped when screen width changes whether the header covers up content when anchor links (same-page "jump" links) are used whether then navigation wraps or font size changes on width change (and therefore header height changes, and therefore necessary padding) whether you want the header fixed on mobile (and again, whether you also want the announcement bar fixed on mobile along with it) whether you have the mobile information bar (MIB) enabled for mobile devices. and more. A lot of these issues have been around...for years.
    If you have a very simple use case and manage to avoid all of the above (and more) concerns, basic CSS like position:fixed or position:sticky can indeed be used. For other cases, a CSS-only approach will cause some problems that you may not detect (but your users probably will). For those cases, I created Fixit - Fixed Headers for Squarespace - Brine.
    It also adds the ability to add/remove a CSS class at the scroll-distance of your choice, making it fairly easy to adjust navigation color, background color, text size, opacity, etc. when scrolled.
    Finally, note that using onScroll as proposed in the code samples above is not the most performant way to go about solving the issue. It better to also leverage requestAnimationFrame and/or setInterval when doing such things with onScroll.
    -Brandon
×
×
  • 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.