Jump to content

Using data-section-id with .prepend?

Recommended Posts

Site URL: https://www.spacescan3d.com/

I want to add a text block to a Gallery Section that doesn't allow insertion of text blocks (no insertion points). I don't want to just add another section above with text--it sets the text too far away from the gallery image ("Photography Services...etc" should have roughly the same top-padding as the other two sections have with their images). I'm trying to use .prepend but I can't get the script right. Nothing shows up and I'm not sure what the best selector is to use. Does data-section-id work with .prepend because this would be the easiest method, I think. Let me know what info you need from me to help you help me (haha)

Thanks!

Link to comment
  • Replies 16
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

You are calling jQuery methods but the jQuery library hasn't been loaded.

74971116_ScreenShot2022-04-15at4_02_34PM.thumb.png.62a4332ef2ddc6465f3832db739127a0.png

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Not sure this will solve your issue but it is an important first step.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
24 minutes ago, creedon said:

You are calling jQuery methods but the jQuery library hasn't been loaded.

74971116_ScreenShot2022-04-15at4_02_34PM.thumb.png.62a4332ef2ddc6465f3832db739127a0.png

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Not sure this will solve your issue but it is an important first step.

Let us know how it goes.

Unfortunately it did not work, but at least we know its there now!

Link to comment

Second issue. Almost always wrap your jQuery in document ready. Otherwise the code will run before the elements you want to manipulate are there.

<script>

  $( ( ) => {
  
    $( '.gallery-slideshow-item-wrapper' )
    
      .prepend ( `<div>
      
        Photography Services
        
        </div>` );
        
    } );
    
  </script>

This is your code wrapped in a document ready. The format is how I like to style code but the core is your code.

Let us know how it goes.

Edited by creedon
clarified what document ready does

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, OilyBoyd said:

Now all I need to do is get it to be above! Any ideas on that one?

If you are looking to add one bit of text for the whole gallery you might try the selector .gallery-slideshow

If you want to restrict that text to just one gallery then proceed the above selector with the data section id. [data-section-id="6259c4c3aea11433ee958af7"] .gallery-slideshow

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Welp, I'm giving up and asking for help again! I got the text to be above the slideshow. I need it to have the same alignment/content width/padding as the other two Services listed on the home page. It also obliterates the slideshow in mobile view (the text covers it up). Any thoughts on solutions to these issues? 

 

Link to comment
1 hour ago, creedon said:

If you are looking to add one bit of text for the whole gallery you might try the selector .gallery-slideshow

If you want to restrict that text to just one gallery then proceed the above selector with the data section id. [data-section-id="6259c4c3aea11433ee958af7"] .gallery-slideshow

Oh! just saw this reply--let me try changing my selector

Link to comment
8 minutes ago, OilyBoyd said:

Welp, I'm giving up and asking for help again! I got the text to be above the slideshow. I need it to have the same alignment/content width/padding as the other two Services listed on the home page. It also obliterates the slideshow in mobile view (the text covers it up). Any thoughts on solutions to these issues? 

 

Same problems persist even with the new selector. Thank you for all your help! lmk if you have ideas for these last two issues

Edited by OilyBoyd
Link to comment

I suggest a change of method. If I were to approach this issue from the ground up I'd start with the adding the section above method. If it had too much space then I'd go after the space with CSS. If I couldn't get there then I might use JavaScript.

This is what the effect looks like with just SS settings. No custom CSS or JavaScript.

1997948180_ScreenShot2022-04-16at3_19_06PM.thumb.png.0b70238a4506a4eb842bb8c7d95d2ad5.png

Is the text still to far away?

Now I go after the spacing with one CSS ruleset.

400497229_ScreenShot2022-04-16at3_22_01PM.thumb.png.aa6e4efc7fb55d3a2fa8914005f4f21d.png

Add the following to Design > Custom CSS.

.page-section[data-section-id="625b3d33fc379b2c5603d658"].vertical-alignment--middle:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ):not( .editmode-changing-rowcount ).section-height--small > .content-wrapper {

  padding-bottom : 0;
  
  }

Or alternately add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .page-section[data-section-id="625b3d33fc379b2c5603d658"].vertical-alignment--middle:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ):not( .editmode-changing-rowcount ).section-height--small > .content-wrapper {
  
    padding-bottom : 0;
    
    }
    
  </style>

Do you think this would work for you?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
39 minutes ago, creedon said:

I suggest a change of method. If I were to approach this issue from the ground up I'd start with the adding the section above method. If it had too much space then I'd go after the space with CSS. If I couldn't get there then I might use JavaScript.

This is what the effect looks like with just SS settings. No custom CSS or JavaScript.

1997948180_ScreenShot2022-04-16at3_19_06PM.thumb.png.0b70238a4506a4eb842bb8c7d95d2ad5.png

Is the text still to far away?

Now I go after the spacing with one CSS ruleset.

400497229_ScreenShot2022-04-16at3_22_01PM.thumb.png.aa6e4efc7fb55d3a2fa8914005f4f21d.png

Add the following to Design > Custom CSS.

.page-section[data-section-id="625b3d33fc379b2c5603d658"].vertical-alignment--middle:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ):not( .editmode-changing-rowcount ).section-height--small > .content-wrapper {

  padding-bottom : 0;
  
  }

Or alternately add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .page-section[data-section-id="625b3d33fc379b2c5603d658"].vertical-alignment--middle:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ):not( .editmode-changing-rowcount ).section-height--small > .content-wrapper {
  
    padding-bottom : 0;
    
    }
    
  </style>

Do you think this would work for you?

Yes!!! I tried this solution as well but failed 😞 I will try it your way and I thank you profusely for your efforts!

 

Link to comment
27 minutes ago, OilyBoyd said:

Any idea why it worked for you but not for me?

Without being able to see your work I can only guess. Can you duplicate the page and we can work out the issues out of view of the public.

Also are you aware that SS is currently having issues with Custom CSS and being able to preview those changes while in the editor? Perhaps that is part of your issue with doing it my way. Visitors to your site should not have issues. It's an internal issue. You can use private browsing to view your page a visitors would see it. @paul2009 has a tip on that.

One issue you might be having is not setting the height of the section to small.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
12 hours ago, OilyBoyd said:

How do I duplicate the page--totally willing to just not sure what you are suggesting.

Use the duplicate page feature. Make sure the duplicate is in Not Linked. Post the URL of the duplicate page here. I can then see if I can figure out what the issue is.

Because you are duplicating the page CSS that targeted specific element of that page by id will not longer work on the duplicate page. Don't worry about that this is just a test page for diagnostics. But do install the CSS I showed changing the data section id.

1092113996_ScreenShot2022-04-17at11_27_29AM.png.cfae8a079df5772cdb96fc876164f164.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi Creedon,

Thank you for all of your help. I have a tight deadline (already passed, actually) to get this small issue resolved so I broke down and hired a dev again. In the future, are issues of this size and nature within your current schedule/ can I hire you for things like this in the future?

Kevin

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.