Team profile image somehow became a link

Site URL: https://www.lmtecdigitalsolutions.com/en/our-team

Hey there,

Randomly one of our team members images on our website became a link, and it's linking to another one of our team members LinkedIn profile. The LinkedIn icon under his name "Scott Whiteman" works completely fine, his image somehow just became a clickthrough link, whereas no one else's has done that. He also somehow has a thin line under his name as well.

The image has no link attached to it when I go into the editor, however when I inspect the page, it's treating his name as an "a" tag, and somehow the area of the tag is quite large, since if I click on his image it triggers the clickthrough link as well. It's also adding some padding so it's lowering the LinkedIn icon lower than everyone else's. (This may be because of the underline adding some padding). The weird thing as well, is when I go into edit mode, the name no longer has an underline, and there is no padding, so clearly something is going on with Squarespace. (I also noticed some of my pages recently switched over to center align text in Mobile instead of left align, that's for another day lol).

I just want to get rid of the clickthrough link so it matches the functionality of all the other team images.

Literally know Idea how this happened, seems like maybe some breaking changes on a Squarespace update or something.

Thanks!

Just bumping this.

You want to remove image link? Add this to Design > Custom CSS

div#page-section-602d7df54fdf411229c87998 .image-block {
    pointer-events: none;
}

On 6/11/2022 at 4:44 AM, tuanphan said:

You want to remove image link? Add this to Design > Custom CSS

div#page-section-602d7df54fdf411229c87998 .image-block {
    pointer-events: none;
}

 

Correct, I also want to get rid of the underline on the name, as well as the space between the name and the linkedin icon.

Just now, Spence500 said:

Correct, I also want to get rid of the underline on the name, as well as the space between the name and the linkedin icon.

There actually is no link attached to the images themselves, it's just the one random link attached to the name "Scott Whiteman", and it redirects you to another team members linkedin page.

Use this new code

div#page-section-602d7df54fdf411229c87998 {
.image-block {
    pointer-events: none;
}
/* underline */
a {
    background-image: none !important;
    border: none !important;
    text-decoration: none !important;
}
/* gap */
h4 {
    margin-bottom: 0px;
}
.sqs-block:not(.image-block) {
    padding-top: 2px;
    padding-bottom: 2px;
}
}

Hey Tuan, thank you for that.

However, that still didn't fix the issue. First off, "Scott Whitemans" name should not be clickable, no names on this page should be an "a" tag, somehow Scotts name is, and then it adds a text decoration under it automatically. I've deleted his name and re-added it and it is a simple "h4" tag just like very other name on the page, with no click through link when i'm in the editors view, but as soon as I save my changes, his name becomes underlined and treated as an "a" tag, it even shows it in chromes developer tools. 

I have no idea how this is happening, it seems like something crazy is happening with the way Squarespace is generating the code.

On 7/27/2022 at 3:47 PM, Spence500 said:

Hey Tuan, thank you for that.

However, that still didn't fix the issue. First off, "Scott Whitemans" name should not be clickable, no names on this page should be an "a" tag, somehow Scotts name is, and then it adds a text decoration under it automatically. I've deleted his name and re-added it and it is a simple "h4" tag just like very other name on the page, with no click through link when i'm in the editors view, but as soon as I save my changes, his name becomes underlined and treated as an "a" tag, it even shows it in chromes developer tools. 

I have no idea how this is happening, it seems like something crazy is happening with the way Squarespace is generating the code.

I'm going to attach a screen recording so you can see what is happening, it's incredibly weird.

Was there ever a link in that text block? I've seen text blocks go whacko, not often, where what you see in the editor is not what you get as a site visitor.

The solution has been to delete the text block and start over again with a fresh one.

Also the HTML looks a bit munged.

23 hours ago, creedon said:

Was there ever a link in that text block? I've seen text blocks go whacko, not often, where what you see in the editor is not what you get as a site visitor.

The solution has been to delete the text block and start over again with a fresh one.

Also the HTML looks a bit munged.

Hey Creedon! Yes exactly, the editor view is different that a visitor view. And I noticed that the actual HTML tags exist in the visitor view, whereas they don't exist in the editor view (which I only want what exists in the editor view lol!)

I have tried deleting the text block and starting fresh, but it just reverted back. Let me see if it works if I try it again.

2 minutes ago, Spence500 said:

Hey Creedon! Yes exactly, the editor view is different that a visitor view. And I noticed that the actual HTML tags exist in the visitor view, whereas they don't exist in the editor view (which I only want what exists in the editor view lol!)

I have tried deleting the text block and starting fresh, but it just reverted back. Let me see if it works if I try it again.

I just tried deleting the text block again and implementing a new one, however, it just reverts back to showing the underline and treating a normal H4 tag as an href link.

Wait wait! I think I have found the culprit. You are using code blocks. I think you have a malformed anchor tag in the code block for Thomas Gollmann which the results are showing up in the next team member. Such strangeness can happen with malformed tags.

I think you'll find in the code block the following.

<a href = https://www.linkedin.com/in/thomasgollmann/ target="_blank" </a>

Which should be the following.

<a href="https://www.linkedin.com/in/thomasgollmann/" target="_blank"></a>

Actually digging in a bit more it appears that all your anchors are malformed.

Let us know how it goes.

18 hours ago, creedon said:

Wait wait! I think I have found the culprit. You are using code blocks. I think you have a malformed anchor tag in the code block for Thomas Gollmann which the results are showing up in the next team member. Such strangeness can happen with malformed tags.

I think you'll find in the code block the following.

<a href = https://www.linkedin.com/in/thomasgollmann/ target="_blank" </a>

Which should be the following.

<a href="https://www.linkedin.com/in/thomasgollmann/" target="_blank"></a>

Actually digging in a bit more it appears that all your anchors are malformed.

Let us know how it goes.

Hey Creedon!
 

Thanks for the follow up, Tuan actually messaged me the same thing.

I told him that it fixed one of the names being underlined and being treated as an A tag, however, "Thomas Gollmans" name is still having issues with it being treated as an A tag with an underline underneath his name, even with his code block being modified to the new code.

There is still malformed HTML in other code blocks.

<div style="text-align: center" ;="">

  <a href="https://www.linkedin.com/in/peter-wassmer-73b50618/" target="_blank" <="" a="">
  
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24">
    
      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z">
      
        </path>
        
      </svg>
      
    </a>
    
  </div>
  
  <a href="https://www.linkedin.com/in/peter-wassmer-73b50618/" target="_blank" <="" a="">
  
    </a>
    
  </div>

All that needs to be cleaned up otherwise rendering strangeness will continue to happen.

On 8/4/2022 at 2:35 PM, creedon said:

There is still malformed HTML in other code blocks.

<div style="text-align: center" ;="">

  <a href="https://www.linkedin.com/in/peter-wassmer-73b50618/" target="_blank" <="" a="">
  
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24">
    
      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z">
      
        </path>
        
      </svg>
      
    </a>
    
  </div>
  
  <a href="https://www.linkedin.com/in/peter-wassmer-73b50618/" target="_blank" <="" a="">
  
    </a>
    
  </div>

All that needs to be cleaned up otherwise rendering strangeness will continue to happen.

That was it! Fixing the code block of the person right before "Thomas" was the issue.