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

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

Sure, it's just a typical blog collection page (on a brine template)
https://www.safepointapp.com/blog

Thanks,

@MattTheDesigner

I have updated my Apr 5 code post.

@creedon after following your instructions and pasting in your code in their respective areas, our site is now behaving like this: 

• The "previous" and "next" toggles have now disappeared on our blogs. This is actually a desired result for one blog (Client Work), but not for another on our site (The Scribble). Is it possible to have these appear for the latter, but not the former?
• For the Client Work page, clicking on the images in a blog still do not take you directly to the source URL, but instead to a blog title page. The user then still has to click this title to get to the original post source URL (in an external window).
• Is there a way for users to click the blog images and go directly to the source URL in an external window?

Thanks! Any feedback appreciated.

@ShinNYC

You have multiple versions of jQuery installed and that is causing an issue. Check in Settings > Advanced > Code Injection > HEADER and Blog Settings > Advanced > Page Header Code Injection for the blog pages and Post Blog Item Code Injection. Get rid of extra copies.

There should be only one copy on the site at Settings > Advanced > Code Injection > HEADER. I suggest keeping the following version of jQuery as it is fairly recent.

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

As to your other issue with previous/next. My code has nothing to do with that as it is not designed to manipulate those. In fact my code isn't running properly because of the jQuery issue.

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>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d8/twcsl.js"></script>

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

<script>

  $( ( ) => {
  
    /*
    
      change blog listing item links to source url
      
      Version       : 0.1d2
      
      SS Version    : 7.0
      
      Templates     : Brine ( Aria, Blend, Burke, 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 )
                      
                      your template is not listed? then it is not currently
                      supported
      
      Dependancies  : jQuery
                      
                      twcsl
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const changeImageLink = true;
    
    const changeReadMoreLink = true;
    
    let targetAtttributeValue = ''; /* use _self | _blank | _parent | _top |
                                       framename see
                                       < https://mzl.la/2Q0JROF > */
    
    // do not change anything below, there be the borg here
    
    if ( ! twcsl.blogPage.isBlogPage ) return; // bail if not blog page
    
    if ( twcsl.blogPage.isDetail ) return; // bail if detail
    
    const setTargetAtttributeValue = ( $this, $e ) => {
    
      if ( targetAtttributeValue )
      
        $e.attr ( 'target', targetAtttributeValue );
        
      }
      
    $( '.BlogList-item-title' )
    
      .filter ( function ( ) {
      
        return $( this ).attr ( 'target' ) !== undefined;
        
        } )
        
      .each ( function ( ) {
      
        const $this = $( this );
        
        const url = $this.attr ( 'href' );
        
        if ( ! targetAtttributeValue ) {
        
          const v = $this.attr ( 'target' );
          
          if ( v !== undefined ) targetAtttributeValue = v;
          
          }
          
        if ( changeImageLink ) {
        
          let $imageLink = $this
          
            .prev ( '.BlogList-item-image' )
            
            .find ( '.BlogList-item-image-link' )
            
              .attr ( 'href', url );
              
          setTargetAtttributeValue ( $this, $imageLink );
          
          }
          
        if ( changeReadMoreLink ) {
        
          let $readMoreLink = $this
          
            .parent ( )
            
            .find ( '.BlogList-item-readmore' )
            
              .attr ( 'href', url );
              
          setTargetAtttributeValue ( $this, $readMoreLink );
          
          }
          
        } );
        
    } );
    
  </script>

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

Let us know how it goes.

@creedon

I'm having the same challenge but cant seem to get the above code to work for me. Can you help?

Site URL: https://prdt.design/

I have created a blog page and i have the content pulling into a summary block, I want the thumbnails to link to the "Source URL" for each post. Can anyone help??

Site: https://prdt.design/

Passwoard: Letme!n

22 hours ago, Adamluk said:

i have the content pulling into a summary block, I want the thumbnails to link to the "Source URL" for each post.

Please see my June 1 post earlier in this thread.

@creedon Im following that but its still not working

@Adamluk

So it cant be done if i use that summary block?

@Adamluk

I wouldn't say can't but not easily done. Since SS doesn't expose the source url to the summary block it would have to be done manually with Javascript. If it could be done. I've not done it so I don't know for sure.

Any thought on where i might find threads that cover the Javascript. aspects of this?

@Adamluk

Wait. Wait. This summary block is pulling in from a blog page right? It's when pulling from Event pages that there is no source URL.

If so then summary blocks that are pulling from blogs should be linking to the source URL, assuming the blog post itself has the Source URL set and Link Post Title to Source URL is turned on.

On 7/7/2021 at 12:33 PM, creedon said:

Hey @creedon so I had a developer take a look at your recommended steps; he deleted some dupe code and but the ability to click on blog images so they open new windows for external source URLs is still not happening. Any other suggestions?

(We did sort the pagination issue however; turned that off in Design and that's what removed the "Previous/Next" menu options). Any help appreciated!

@ShinNYC

I'm not finding the URL for your blog page in this thread. Please post the URL.

@creedon apologies it is https://thescri.be

Thanks! Any help appreciated.

For backstory it was re. this original thread: 

@ShinNYC

The code appears to be working to me.

@creedon Your 7.1 code works like a charm for my client's website. However, whenever I click on the image, the link opens in a new tab, which I don't want. All URLs need to open in the same tab, because I use the Source URL option to redirect to an internal page.

Below the code I have injected in the Page Header Code Injection of the blogsection - what part of the code should I modify to force the URL to open in the same screen?

Also, here the URL to the page: https://www.statisfact.nl/ons-werk/projecten

<script>

  $( ( ) => {
  
    /*
    
      change blog listing item image URL to Source URL
      
      Version       : 0.1d1
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
                      twcsl
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    let targetAtttributeValue = ''; /* use _self | _blank | _parent | _top |
                                       framename see
                                       < https://mzl.la/2Q0JROF > */
    
    // do not change anything below, there be the borg here
    
    if ( ! twcsl.blogPage.isList ) return; // bail if not blog listing
    
    $( '.blog-title .passthrough-link' )
    
      .filter ( function ( ) {
      
        return $( this ).attr ( 'target' ) !== undefined;
        
        } )
        
      .each ( function ( ) {
      
        const $this = $( this );
        
        const url = $this.attr ( 'href' );
        
        let $imageLink = $this
        
          .parents ( '.blog-item' )
          
          .find ( '.image-wrapper' )
          
            .attr ( 'href', url );
            
        if ( ! targetAtttributeValue ) {
        
          const v = $this.attr ( 'target' );
          
          if ( v !== undefined ) targetAtttributeValue = v;
          
          }
          
        if ( targetAtttributeValue )
        
          $imageLink.attr ( 'target', targetAtttributeValue );
          
        } );
        
    } );
    
  </script>

@Diederik

My code wasn't designed to work with Lazy Summaries.

LS provides extensive customization opportunities. There may be a setting that will handle your need without my code. And if not, almost certainly some custom code could be written to integrate with LSs way of customizing its output.

Hi, I am also facing the same issue as others. I am trying to link my images to the source URL that's linked from the blog post title. However, I keep getting directed to an individual blog post when I click on the image, or the date / category / tags. 

Here is my website: https://sophie-alice-church.squarespace.com/config/

I have gone through the motions as listed above, but perhaps am inputting code incorrectly. 

Thanks, 

Sophie

5 hours ago, sophychurchy said:

I have gone through the motions as listed above, but perhaps am inputting code incorrectly. 

Please see the following.

Let us know how it goes.

On 11/10/2021 at 7:55 PM, sophychurchy said:

Hi, I am also facing the same issue as others. I am trying to link my images to the source URL that's linked from the blog post title. However, I keep getting directed to an individual blog post when I click on the image, or the date / category / tags. 

Here is my website: https://sophie-alice-church.squarespace.com/config/

I have gone through the motions as listed above, but perhaps am inputting code incorrectly. 

Thanks, 

Sophie

 

Hi. Have you tried above codes yet?

On 6/2/2021 at 3:18 AM, creedon said:

@janvirant

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

@creedon I have a similar issue where all of the blog entries in this one collection all lead to external URLs and I would like to link the image as well as the titles to those external pages. (The blog page format was just not flexible enough for me design wise, so I've had to make individual pages).

Any suggestions?

website: https://addenbrooke.squarespace.com/collection-list

Pw: HelpMe!

10 hours ago, OldLadyStudio said:

Any suggestions?

The password doesn't work.

1 hour ago, creedon said:

The password doesn't work.

Oops - try again now.