Link image in Summary Block to Source URL, in new window

Hi! I'm setting up a newsroom for my client's site on a blog page, and we want the images in her posts to link to a new external page instead of the blog post. There's an option for the Title to "link to source URL", but not the image itself. People will be clicking on the images, not the title, so we'd like them to be immediately directed to the external site in a new tab, upon clicking, and for that link to open into a new window/tab. Thanks!

Please post the URL for a page where you want this effect.

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

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hi @creedon the website is https://stephaniewolfpr.squarespace.com/ and the PW is Prosezebra11

The Page I'm working on is this blog page called "Newsroom". I want all of the photos to link to the source URL, not just the title. And for these to open in a new window is crucial.

I've added in the source URL to just a few posts so far, and you can tell which ones by the text beneath the photo which is visible as an excerpt. 

Thank you for your help!

Please see Change Blog Listing Item Links to Source URL.

Let us know how it goes.

Hi @creedon thanks so much for looking into this!

I have Squarespace 7.0, and unfortunately this didn't work out for me. The website has tiny text in the top left now on all pages, which is probably just due to the 7.0 issue. The second code hasn't worked either, yet. Is there anything else we can try? Thank you!

My code isn't working because the first script is not installed properly.

You have entered something like the following in Code Injection Header.

://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

It needs to be the following.

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

If you fix that my code should run.

Also I mislabeled the version the code was meant for. I updated my code post. No functional change.

Ah thank you! Is the second code that you suggested something that I should copy and paste entirely? (Even the red type?) Thanks!

Yes ALL the code! The coloring is just the forum software doing syntax highlighting.

I really appreciate your help. I just edited the code in both places as you suggested. We are getting closer! Clicking the photos now takes us off-site to the appropriate links, but not in a new window. Is this too big of an ask for Squarespace? If so we'll have to take the code out and just live with the blog post links. Thanks!

Quote

Is this too big of an ask for Squarespace?

When custom code is involved SS is not in the picture. It's all me at this point! 🙂

Although if you wanted you could ask them to add a feature to do this instead of having to use custom code.

Change the following in the code...

const targetAtttributeValue = '';

...to...

const targetAtttributeValue = '_blank';

That will tell the browser to open a new window/tab when the image is clicked.

Let us know how it goes.

Wow, it worked! Can I use this blog code for my summary blocks, too? I have a summary block on the homepage called "RECENT CLIPS" and I have another summary block that I'm testing out, which pulls from that Newsroom blog, called NEWS. https://stephaniewolfpr.squarespace.com/config/

Thank you so much! 

I'm not sure. I'll look into how this code might be adapted or some new code could be created. Give me several days.

No problem! I'm just covering all my bases before deciding if we should stick with the blog or the summary block. Many thanks! Truly appreciate what you do.

Quote

Can I use this blog code for my summary blocks, too? 

The OP doesn't need to do this step.

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

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

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    /*
    
      add target attribute to summary block anchor tags
      
      SS Version : 7.0
      
      Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                   Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke,
                   Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer,
                   Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally,
                   Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West )
                   
      */
      
    /*
    
      enter block ids for each block you want to target. an empty array means
      all will be targeted. the format of each line is a block id. do not
      include # at the beginning
      
      */
      
    const blockIds = [
    
      // '[enter block id here]',
      
      // last or only item doesn't get a comma at end of line
      
      ];
      
    const targetAtttributeValue = '_blank'; /* use _self | _blank | _parent |
                                               _top | framename see
                                               < https://mzl.la/2Q0JROF > */
    
    // do not change anything below, there be the borg here
    
    if ( ! targetAtttributeValue ) return;
    
    const $summaryBlocks = $( '.summary-v2-block' )
    
    if ( blockIds.length ) {
    
      $summaryBlocks.filter ( function ( ) {
      
        return blockIds.includes ( $( this ).attr ( 'id' ) );
        
        } );
        
      }
      
    if ( ! $summaryBlocks.length ) return;
    
    $( 'a', $summaryBlocks ).attr ( 'target', targetAtttributeValue );
    
    } );
    
  </script>

This is for v7.0 using the Brine template family.

Let us know how it goes. 

Wow, it works! Thank you so much! We will experiment with the blog posts and the summary blocks now that they consistently open up in new windows! Thank you so much!

@zala

There is no place to put a redirect URL as this is not what the codes are designed to do. The codes do what the OP asked.

Did you read the URL included that explains what the targetAtttributeValue values mean?

Please start a new question describing what you want to achieve as what you want is different from what this thread is discussing.

On 4/5/2021 at 1:38 PM, creedon said:

This solution requires the business plan or above.

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>

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page.

<script>

  $( ( ) => {
  
    /*
    
      change blog listing item image URL to Source URL
      
      SS Version : 7.0
      
      Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                   Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke,
                   Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer,
                   Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally,
                   Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West )
                   
      */
      
    let targetAtttributeValue = ''; /* use _self | _blank | _parent | _top |
                                       framename see
                                       < https://mzl.la/2Q0JROF > */
    
    // do not change anything below, there be the borg here
    
    if ( ! $( '.BlogList' ).length ) return; // bail if not blog listing page
    
    $( '.BlogList-item-title' )
    
      .filter ( function ( ) {
      
        return $( this ).attr ( 'target' ) !== undefined;
        
        } )
        
      .each ( function ( ) {
      
        const $this = $( this );
        
        const url = $this.attr ( 'href' );
        
        let $imageLink = $this
        
          .prev ( '.BlogList-item-image' )
          
          .find ( '.BlogList-item-image-link' )
          
            .attr ( 'href', url );
            
        if ( ! targetAtttributeValue ) {
        
          const v = $this.attr ( 'target' );
          
          if ( v !== undefined ) targetAtttributeValue = v;
          
          }
          
        if ( targetAtttributeValue )
        
          $imageLink.attr ( 'target', targetAtttributeValue );
          
        } );
        
    } );
    
  </script>

This is for v7.0 using the Brine template family.

Let us know how it goes.

Hey @creedon - Thanks for all this guidance. How would you accomplish this in 7.1 instead of 7.0? Thanks in advance for your help! 🙂

@creedon - btw the password for my site is "known" and you can view what I'm talking about here: https://www.sarahs.co.uk/products?category=Outerwear

These are all blogposts that look like products. 

@sethhoffman

Please see the following.

Let us know how it goes.

@creedon YES! Thank you so much man 🙂 That worked.

One more question for you...I'm trying to display blog tags instead of categories. Tags aren't currently an option to display. You can see more detail on another post of mine here: 

I'm also looking to put the metadata below the blog title...

Thanks in advance for any help you can provide!

HI @creedon, I'm trying to achieve the same as OP for my events summary block on my site, but it is not working.

I already have another script in my site header, could this be the reason?

I would really appreciate it if you can have a look, here: https://www.drustvovtis.si/

Thanks!

Jan

@janvirant

Two main effects are discussed in this thread which one are you trying to achieve?

@creedon

I'm trying to Link image in Summary Block to Source URL, in new window, just as the title said.

Jan

@janvirant

Unfortunately event summary blocks do not expose the source url the same way that blog summary blocks do.

On 4/5/2021 at 6:38 PM, creedon said:

This solution requires the business plan or above.

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>

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page.

<script>

  $( ( ) => {
  
    /*
    
      change blog listing item image URL to Source URL
      
      SS Version : 7.0
      
      Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                   Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke,
                   Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer,
                   Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally,
                   Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West )
                   
      */
      
    let targetAtttributeValue = ''; /* use _self | _blank | _parent | _top |
                                       framename see
                                       < https://mzl.la/2Q0JROF > */
    
    // do not change anything below, there be the borg here
    
    if ( ! $( '.BlogList' ).length ) return; // bail if not blog listing page
    
    $( '.BlogList-item-title' )
    
      .filter ( function ( ) {
      
        return $( this ).attr ( 'target' ) !== undefined;
        
        } )
        
      .each ( function ( ) {
      
        const $this = $( this );
        
        const url = $this.attr ( 'href' );
        
        let $imageLink = $this
        
          .prev ( '.BlogList-item-image' )
          
          .find ( '.BlogList-item-image-link' )
          
            .attr ( 'href', url );
            
        if ( ! targetAtttributeValue ) {
        
          const v = $this.attr ( 'target' );
          
          if ( v !== undefined ) targetAtttributeValue = v;
          
          }
          
        if ( targetAtttributeValue )
        
          $imageLink.attr ( 'target', targetAtttributeValue );
          
        } );
        
    } );
    
  </script>

This is for v7.0 using the Brine template family.

Let us know how it goes.

This is amazing, thank you. Really helpful. 

After using your code to change the BlogList-item-image link, I'd love to do the same with the read more button that goes under my article links (BlogList-item-readmore) 

Any idea how I'd go about that? Could I reuse the above and just change some parts?

Cheers!