Jump to content

My tweetable pull quote code snippet is malfunctioning all of a sudden!

Recommended Posts

I created a tweetable pull quote code snippet that had a big quotation mark above and the pull quote below. This would change color upon hovering and then tweet out with author handle, url, and other things when clicked. It was working  beautifully on all devices and on all the blog posts that I'd added it to. Here's the url for one: https://www.teachersgoinggradeless.com/blog/long-unwinding-road

Then, this evening, I noticed that the quotation mark had suddenly "distanced itself" from the quotation below and was merging into the block above (the body of the blog post). I had done some work on the site today, but it involved mostly all stock Squarespace things, like I added a carousel of recent blog posts to my main page and Start Here page. I turned on the Parallax feature on the middle background image on my main page. Several days ago, I added some custom CSS from the user @Ziggy to prevent embedded scripts from adding unwanted height. I also added the pull quote code snippet to two more blog posts today (I've been adding 1-2 blog posts per day, working backwards from my newest). Everything was looking and functioning great until tonight!

Another clue perhaps is that the actual script of my code snippet has weirdly also become unresponsive: Changing the number of pixels for any of the "top:" "bottom: " or "margin-top:" command doesn't do ANYTHING anymore on ANY of the blog posts! I know I would see it shifting when I changed these numbers before because I played around with them for a long time before I got the look I wanted.

Here is the embed code snippet for the tweetable pull quote on one of the blog post pages:

<!DOCTYPE html>
<html>
<head>
  <title>Pull Quote Tweet</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap');

    .pullQuoteContainer {
      text-align: center;
      position: relative;
      margin-top: 60px;
      cursor: pointer;
    }

    .pullQuoteContainer:before {
      content: "“";
      font-size: 120px;
      font-family: 'League Spartan', sans-serif;
      color: black;
      position: absolute;
      top: -105px;
      left: 50%;
      transform: translateX(-50%);
      transition: color 0.3s;
    }

    .pullQuoteContainer p {
      font-size: 24px;
      color: black;
      max-width: 80%;
      margin: 0 auto;
      padding-bottom: 10px;
      transition: color 0.3s;
    }

    .tweetLink {
      text-align: right;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 10px;
      transition: color 0.3s;
    }

    .tweetLink a {
      color: black;
      font-size: 18px;
      text-decoration: none;
      display: flex;
      align-items: center;
      margin-top: 10px;
      transition: color 0.3s;
    }

    .tweetIcon {
      font-size: 18px;
      margin-right: 8px;
      margin-top: 10px;
      transition: color 0.2s;
    }

    .pullQuoteContainer:hover,
    .pullQuoteContainer:hover:before,
    .pullQuoteContainer:hover p,
    .pullQuoteContainer:hover .tweetLink,
    .pullQuoteContainer:hover .tweetLink a,
    .pullQuoteContainer:hover .tweetLink .tweetIcon {
      color: #75C4AE; /* Change color on hover */
    }
  </style>
</head>
<body>

  <div class="pullQuoteContainer" data-quote="We’ve walked the path of A-F grading for so long that it feels inevitable from the perspective of students, parents, employers, and institutions." data-author="@BarryFishman" data-handle="@tg2chat" data-url="https://www.teachersgoinggradeless.com/blog/long-unwinding-road">
    <p>We’ve walked the path of A-F grading for so long that it feels inevitable from the perspective of students, parents, employers, and institutions.</p>
    <p class="tweetLink">
      <span class="tweetIcon">
        <i class="fab fa-twitter"></i>
      </span>
      <a href="#" onclick="tweetPullQuote(this)">Tweet this</a>
    </p>
  </div>

  <script>
    function tweetPullQuote(link) {
      var selectedQuote = link.parentNode.previousElementSibling;
      var pullQuoteText = selectedQuote.getAttribute('data-quote');
      var authorHandle = selectedQuote.getAttribute('data-author');
      var tg2chatHandle = selectedQuote.getAttribute('data-handle');
      var url = selectedQuote.getAttribute('data-url');

      var text = encodeURIComponent(pullQuoteText + " " + authorHandle + " " + tg2chatHandle + " " + url);
      var tweetUrl = "https://twitter.com/intent/tweet?text=" + text;
      window.open(tweetUrl, "_blank");
    }
  </script>

</body>
</html>

Thank you for any help you can give!

Arthur

Screenshot 2023-07-31 at 11.12.50 PM.png

Edited by ArthurC
Link to comment

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

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

See highlighted. The top property of -105px is greater than the margin-top of 60px, so the quote text is left outside and above the rest of the container.

Try changing the top value to -25px.

image.thumb.png.7036028cda8cfe4df3b4bb0541ad1d63.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thank you, @Ziggy, for checking this out. Unfortunately, what has suddenly happened is that the code snippet isn't even responsive when I change it. Here's me trying to make the change you suggested:

https://watch.screencastify.com/v/Fl0ymvuXwziImcpLMkST

By the way, this happened on ALL the blog posts (about 15) where I had inserted these pull quotes SIMULTANEOUSLY yesterday. Prior to that they all looked and functioned beautifully.

Edited by ArthurC
Link to comment

I'm honestly not sure why that's not updating. Can you try putting your code into a Code block instead of an embed block?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Same thing, unfortunately. As I edit, nothing budges in the slightest—not in the moment or once I've saved it.

What I don't understand is why this code snippet, which was looking and functioning beautifully, started to do this SITE WIDE all of a sudden last night. The "top: -105" and everything else about the code was perfect everywhere—until it wasn't. It seems like some kind of update happened that is conflicting with the code.

The last CSS code I entered was the one you created to resolve the spacing issues with embedded scripts—and that didn't harm anything. Most of what I did yesterday was stock Squarespace stuff: adding a carousel of recent blog posts on two pages; adding the parallax feature on a background image on the main page; editing text. In short, nothing that would have had a slte-wide impact. 

Could there have been a Squarespace update that messed up my pull quotes? I'm at a loss! 😞

Link to comment
20 minutes ago, ArthurC said:

Could this have confused my website about pull quote coding generally?

I wouldn't have thought so.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Squarespace has been making some font updates over the last week, but I'm not sure that would have been the cause. Generally I've seen and heard about code/css issues a bit more this week, but I don't have any specific knowledge or fixes.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

One other thing, this seems to be affecting blog post pages only. I have another page, Start Here, where I had to slightly alter the tweetable pull quote code to get it to work (and it still does). AND this code still alters when I change the number of pixels, etc.

I've tried to take this code and embed it in the blog posts with the same stupid result of the quotation mark floating over the block above. 

Here is the code that I'm using on Start Here:

<!DOCTYPE html>
<html>
<head>
  <title>Pull Quote Tweet</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap');

    .pullQuoteContainer {
      text-align: center;
      position: relative;
      margin-top: 90px;
      margin-bottom: 18px;
      cursor: pointer;
    }

    .pullQuoteContainer:before {
      content: "“";
      font-size: 120px;
      font-family: 'League Spartan', sans-serif;
      color: black;
      position: absolute;
      top: -35px;
      left: 50%;
      transform: translateX(-50%);
      transition: color 0.3s;
    }

    .pullQuoteContainer p {
      font-size: 24px;
      color: black;
      max-width: 80%;
      margin: 0 auto;
      padding-bottom: 10px;
      transition: color 0.3s;
    }

    .tweetLink {
      text-align: right;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 10px;
      transition: color 0.3s;
    }

    .tweetLink a {
      color: black;
      font-size: 18px;
      text-decoration: none;
      display: flex;
      align-items: center;
      margin-top: 10px;
      transition: color 0.3s;
    }

    .tweetIcon {
      font-size: 18px;
      margin-right: 8px;
      margin-top: 10px;
      transition: color 0.2s;
    }

    .pullQuoteContainer:hover,
    .pullQuoteContainer:hover:before,
    .pullQuoteContainer:hover p,
    .pullQuoteContainer:hover .tweetLink,
    .pullQuoteContainer:hover .tweetLink a,
    .pullQuoteContainer:hover .tweetLink .tweetIcon {
      color: #75C4AE; /* Change color on hover */
    }

  </style>
</head>
<body>

  <div class="pullQuoteContainer" data-quote="With the phrase ‘going gradeless,’ we hope to express the idea of moving—gradually or rapidly—away from the pernicious influence of grades, and toward more humane and effective methods of assessment and feedback." data-handle="@tg2chat" data-url="https://www.teachersgoinggradeless.com/start?123" onclick="tweetPullQuote(event)">
    <p>With the phrase ‘going gradeless,’ we hope to express the idea of moving—gradually or rapidly—away from the pernicious influence of grades, and toward more humane and effective methods of assessment and feedback.</p>
    <p class="tweetLink">
      <span class="tweetIcon">
        <i class="fab fa-twitter"></i>
      </span>
      <a href="#">Tweet this</a>
    </p>
  </div>

  <script>
    function tweetPullQuote(event) {
      var selectedQuote = event.currentTarget;
      var pullQuoteText = selectedQuote.getAttribute('data-quote');
      var tg2chatHandle = selectedQuote.getAttribute('data-handle');
      var url = selectedQuote.getAttribute('data-url');

      var text = encodeURIComponent(pullQuoteText + " " + tg2chatHandle + " " + url);
      var tweetUrl = "https://twitter.com/intent/tweet?text=" + text;
      window.open(tweetUrl, "_blank");
    }
  </script>

</body>
</html>

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.