Using data-section-id with .prepend?

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!

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

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.

24 minutes ago, creedon said:

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

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!

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.

Hey! That sorta Worked--"Photography Services" is now listed just to the left of the slideshow. Now all I need to do is get it to be above! Any ideas on that one? Should I use data-section-id instead?

Actually I'm gonna keep messing around with it--making progress (though likely incorrectly) on my own. Thankyou for your help!

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

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? 

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

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

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.

Is the text still to far away?

Now I go after the spacing with one CSS ruleset.

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?

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.

Is the text still to far away?

Now I go after the spacing with one CSS ruleset.

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!

Unfortunately this doesn't seem to work either 😕 I can see that it definitely worked for you and I realized that I tried exactly the same thing multiple times without success. Any idea why it worked for you but not for me?

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.

Section height is set to small. Wasn't aware re: css troubles with SS currently. How do I duplicate the page--totally willing to just not sure what you are suggesting. Same problem exists on live site even in other browsers and in incognito mode.

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.

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