Jump to content

Open Link in New Window from Summary Block

Recommended Posts

Building out a new site in 7.1, and I'm using a summary block to link some images to offsite pages.  There are other ways I could do this, but the summary block gives me the best look and functionality for this.  Only problem is, I don't have the ability to open the links in a new window, which I generally do with offsite links.  Most other areas in Squarespace give you a toggle to chose to "open link in a new window", but I don't see this option in the summary block.  There is a selection "Post Title should link to Source URL" but no option to open the link in a new window.

Am I missing something, or is there any easy way to add this with code somehow, or any plans to add this feature?

Link to comment
  • 2 weeks later...

Site is here https://jameslang.squarespace.com  (pass=langview) Its the section on the home page under "Recent Essays" The three illustrations and headlines all link to another site. Links are set in the Blog interface for each post by checking "Post Title Should Link to Source URL". Unlike other places, there is no choice to open that link in new window.  I know how to use target="_blank" if I'm writing it out in a code box, but this is just a toggle, and I don't think I can just add that on to the URL can I?  I'm only a hack coder, so maybe there is a way, but can't. understand why Squarespace does give you the new window option here, as they do most other places.

Link to comment
On 4/30/2020 at 8:26 PM, johnhalldesign said:

Site is here https://jameslang.squarespace.com  (pass=langview) Its the section on the home page under "Recent Essays" The three illustrations and headlines all link to another site. Links are set in the Blog interface for each post by checking "Post Title Should Link to Source URL". Unlike other places, there is no choice to open that link in new window.  I know how to use target="_blank" if I'm writing it out in a code box, but this is just a toggle, and I don't think I can just add that on to the URL can I?  I'm only a hack coder, so maybe there is a way, but can't. understand why Squarespace does give you the new window option here, as they do most other places.

Add to Home > Settings > Advanced > Code Injection > Footer

<script>
  document.querySelector('.sqs-block-summary-v2 .summary-thumbnail-container').setAttribute('target', '_blank');
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
11 minutes ago, johnhalldesign said:

So that works on the first image thumbnail, but not the others or the headline links.  Getting close though. Is there some adjustment that will hit the others?

Edit above code to

<script>
  document.querySelector('.sqs-block-summary-v2 a').setAttribute('target', '_blank');
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 11 months later...
On 4/6/2021 at 11:09 PM, SpaceRants said:

Sorry - I'm a little confused. How did you modify the code?

Currently I have:


<script>
  document.querySelector('.sqs-block-summary-v2 a').setAttribute('target', '_blank');
</script>

and only the first item in the gallery opens in a new tab.

try this

<script>
  document.querySelector('.summary-item a').setAttribute('target', '_blank');
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
13 hours ago, Estela said:

https://www.seaforestation.com/seaweed-in-the-news

Hi  I am also looking for a custom code to allow me to open the links of the different summary blocks of this website in a new tab. Thank you!

Have you tried above code yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

So I added /"target="_blank after the url link and it does open a new page but not in the right way. I attached the page is opening now. For some reason this code added the / to the url what is making an 404 error. The url would be correct without the /

image.thumb.png.b81c7ccb32cc1d40d2742e77b4a7c1fd.png

Link to comment
  • 6 months later...
On 4/21/2020 at 10:31 PM, johnhalldesign said:

Building out a new site in 7.1, and I'm using a summary block to link some images to offsite pages.  There are other ways I could do this, but the summary block gives me the best look and functionality for this.  Only problem is, I don't have the ability to open the links in a new window, which I generally do with offsite links.  Most other areas in Squarespace give you a toggle to chose to "open link in a new window", but I don't see this option in the summary block.  There is a selection "Post Title  jackets should link to Source URL" but no option to open the link in a new window.

Am I missing something, or is there any easy way to add this with code somehow, or any plans to add this feature?

Do you try to add /"target="_blank  attributes as it works fine in HTML section and helps you to open it in new tab.

Edited by martybirdese
Link to comment
On 11/13/2021 at 6:38 AM, JennySquare said:

Hi @tuanphan! I'm looking for a similar solution and can't find the right selector. I tried .blog-item a but that's not quite it.

https://www.inqyr.org/research-hub

Any suggestions? Thank you so much in advance.

Try this code

<script>
  document.querySelector('h1.blog-title a').setAttribute('target', '_blank');
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks for your reply! @tuanphan The code didn't work unfortunately. 

I gave this another search and found tried this method using jQuery. I altered the code and used the following:

<script>
$(document).ready(function() {
   $('.blog-item a').click(function(event) {
       event.preventDefault(); // preventDefault first
       var link = $(this).attr('href');

       if(link != '#'){
           window.open(link);
       }
   });
});
</script>

Just for other folks using Universal Filter like I am for this example.

Link to comment
  • 1 year later...
On 1/14/2023 at 2:51 AM, valeayala said:

Is there a way to apply this code universally across a site so that all summary block posts open in a new tab?

Add to Code Injection > Footer

<script>
  document.querySelector('.sqs-block-summary-v2 a').setAttribute('target', '_blank');
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.