TD_Rand Posted March 3, 2022 Share Posted March 3, 2022 Site URL: https://fish-primrose-czfn.squarespace.com/config/ Hi, Does anyone happen to know if it's possible to make a background image click-through? My home page has a series of full images. Each image refers to a project, and I'd like the entire image (not just the text) to be clickthrough. Any ideas on code? Thank you! Tommy Link to comment
tuanphan Posted March 6, 2022 Share Posted March 6, 2022 Try adding this to Design > Custom CSS body.homepage article .html-block { position: static !important; } body.homepage article .html-block a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
TD_Rand Posted March 15, 2022 Author Share Posted March 15, 2022 On 3/5/2022 at 11:51 PM, tuanphan said: Try adding this to Design > Custom CSS body.homepage article .html-block { position: static !important; } body.homepage article .html-block a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } Thanks Tuanphan! Actually just saw your response. I tried adding it, but no luck. My Custom Design Code already features this: .sqs-block-html a { text-decoration: none !important; } #footer-sections a { background-image: none !important; } I added your suggested code beneath, but it didn't work. Appreciate the help! If you think of anything else please let me know. Thank you again! Link to comment
tuanphan Posted March 15, 2022 Share Posted March 15, 2022 18 hours ago, TD_Rand said: Are you use Business Plan? We can try another code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted March 19, 2022 Share Posted March 19, 2022 Add to Homepage Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('article section:nth-child(1)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/lucyhawkes"; window.location.href=href; }); $('article section:nth-child(2)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/delirious"; window.location.href=href; }); $('article section:nth-child(3)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/colossus"; window.location.href=href; }); }); </script> TD_Rand 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
TD_Rand Posted May 13, 2022 Author Share Posted May 13, 2022 On 3/18/2022 at 10:16 PM, tuanphan said: Add to Homepage Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('article section:nth-child(1)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/lucyhawkes"; window.location.href=href; }); $('article section:nth-child(2)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/delirious"; window.location.href=href; }); $('article section:nth-child(3)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/colossus"; window.location.href=href; }); }); </script> Hi Tuanphan! Thanks again for your help. I actually implemented these changes, and it was working. But now, when I try to update the site, the code is no longer in the homepage header - yet it works. Now, if I add an image block to the main page and want to make it clickthrough, I'm a bit unsure how to do that. Should I reinsert the code to header (it seems to be working without)? Many thanks! Tommy Link to comment
tuanphan Posted May 15, 2022 Share Posted May 15, 2022 On 5/13/2022 at 8:07 PM, TD_Rand said: The code has 3 parts (similar with different class name) $('article section:nth-child(1)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/lucyhawkes"; window.location.href=href; }); You will see article section:nth-child(1), article section:nth-child(2), article section:nth-child(3). It means first, second, third section When you add a new section, just repeat the code with new url, eg for fouth section $('article section:nth-child(4)').click(function() { var link = $(this).text(), href = "https://google.com"; window.location.href=href; }); Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
TD_Rand Posted May 16, 2022 Author Share Posted May 16, 2022 Thank you so much again for your help! Unfortunately, it no longer works. When I log in I don't see the code at all. I just inserted the code above for all the projects and it now appears as code in the header. Very strange. Any ideas? Link to comment
TD_Rand Posted May 16, 2022 Author Share Posted May 16, 2022 The other weird thing, is the code works for every image block except the new one "Yulisa" Link to comment
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 On 5/16/2022 at 7:31 PM, TD_Rand said: Thank you so much again for your help! Unfortunately, it no longer works. When I log in I don't see the code at all. I just inserted the code above for all the projects and it now appears as code in the header. Very strange. Any ideas? Script code need to be wrap in <script> and </script> It looks like you removed script tags so It appears on top of page Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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