alym Posted April 4, 2021 Share Posted April 4, 2021 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
creedon Posted April 4, 2021 Share Posted April 4, 2021 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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alym Posted April 5, 2021 Author Share Posted April 5, 2021 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
creedon Posted April 5, 2021 Share Posted April 5, 2021 (edited) Please see Change Blog Listing Item Links to Source URL. Let us know how it goes. Edited September 18, 2021 by creedon MattTheDesigner 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alym Posted April 5, 2021 Author Share Posted April 5, 2021 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
creedon Posted April 5, 2021 Share Posted April 5, 2021 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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alym Posted April 5, 2021 Author Share Posted April 5, 2021 Ah thank you! Is the second code that you suggested something that I should copy and paste entirely? (Even the red type?) Thanks! Link to comment
creedon Posted April 5, 2021 Share Posted April 5, 2021 Yes ALL the code! The coloring is just the forum software doing syntax highlighting. alym 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alym Posted April 6, 2021 Author Share Posted April 6, 2021 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
creedon Posted April 6, 2021 Share Posted April 6, 2021 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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alym Posted April 6, 2021 Author Share Posted April 6, 2021 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! Link to comment
creedon Posted April 6, 2021 Share Posted April 6, 2021 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alym Posted April 6, 2021 Author Share Posted April 6, 2021 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
creedon Posted April 6, 2021 Share Posted April 6, 2021 (edited) 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. Edited November 30, 2023 by creedon alym 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alym Posted April 8, 2021 Author Share Posted April 8, 2021 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! creedon 1 Link to comment
creedon Posted April 23, 2021 Share Posted April 23, 2021 @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. zala 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
sethhoffman Posted April 27, 2021 Share Posted April 27, 2021 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! 🙂 dnmddy 1 Link to comment
sethhoffman Posted April 27, 2021 Share Posted April 27, 2021 (edited) @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. Edited April 27, 2021 by sethhoffman Link to comment
creedon Posted April 27, 2021 Share Posted April 27, 2021 @sethhoffman Please see the following. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
sethhoffman Posted April 27, 2021 Share Posted April 27, 2021 @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
janvirant Posted May 31, 2021 Share Posted May 31, 2021 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
creedon Posted May 31, 2021 Share Posted May 31, 2021 @janvirant Two main effects are discussed in this thread which one are you trying to achieve? Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
janvirant Posted June 1, 2021 Share Posted June 1, 2021 @creedon I'm trying to Link image in Summary Block to Source URL, in new window, just as the title said. Jan Link to comment
creedon Posted June 1, 2021 Share Posted June 1, 2021 (edited) @janvirant Unfortunately event summary blocks do not expose the source url the same way that blog summary blocks do. Edited June 4, 2021 by creedon tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MattTheDesigner Posted June 30, 2021 Share Posted June 30, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment