Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


alym

Question

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!

Link to comment

Recommended Posts

  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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!

Link to comment
  • 0

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!

 

Link to comment
  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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!

Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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.

Link to comment
  • 1
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.5.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. 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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! 🙂

Link to comment
  • 0

@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!

 

Link to comment
  • 0

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

Link to comment
  • 0
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!

Link to comment
  • 0

@MattTheDesigner

Please post the URL for a page your site with the Read More button..

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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...