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

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

Link to comment
  • 0

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

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

Edited by Adamluk
Link to comment
  • 0

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

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

 

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