takis-7124

So my problem is this. Just realized that the icons I use in a website - over 100 and in over 50 pages in different combinations - are shitty in darkmode. So I need to substitute and re upload them with the same name. Do I have to re insert every new image to every single place it was previously uploaded or is there a way to expedite this (import.export or something)? An older post from @paul2009 suggests that I am doomed but its as old as 2019 so I hope for the opposite. Fact that I can upload 2 files with the same name, worries me so is there a way to rename the "unique Squarespace URLs" mentioned?

Links work, if you mean that. The idea is for you not to have access to the product (/p/......) pages as I am not really selling stuff, merely using the shop template as I need access to category etc. functions for summary block. If its too much of a hassle, just leave it - I would rather bend your ear another time on something that is REALLY above my head and is completely broken 😃. The 2nd code structure I used may not be perfect but its still a valid solution for all practical purposes and fast to implement, just a one line code; even the history of universal filter works. Am I just an anal perfectionist. EDIT: Yeah, definitely dont bother with it. I wrote a script in excel to automate the URL renaming code generation so anything else would just be cumbersome. Thanks for your time.

That worked partially. The Title under the picture now points to the correct https://www.dphworld.com/antiparos/kallisto/ as intended but the picture per se still points at https://www.dphworld.com/villas/p/antiparos/kallisto . Adding <a href="https://www.dphworld.com/antiparos/kallisto/">Villa Kallisto | Antiparos | 16 Guests</a> in the metadata of the 2 thumbnails didnt cut it either

Both image and title use same link, throughout the site. Villa name and image is constant and specific for each villa. No sure how to implement what you are suggesting.

Did you manage to find a workaround on that @abc? Exact same problem

https://www.dphworld.com/villas/mykonos/#anchor If a pass is needed in any step, its 1234 I was forced to use the store so as to get access to some perks, such as categories etc. but I am NOT interested in the cart and checkout function. Managed to redirect the product (to be added to cart) picture bellow in red circle away from the store and to the internal site-link that I want (/mykonos/helios), using the Java snippet bellow. So yes, I have a working solution BUT it is not ideal since eventually its going to be repeated over 100 times, meaning over 1200 lines of code and hard to upkeep. Is there another way to force the image to link to another page of the site? No code preferably or at least shorter/easier/CSS TIA <!----MYKONOS - HELIOS ---> <script> document.addEventListener('DOMContentLoaded', function() { var customLink = document.getElementById('thumb-bhelios-estate-mykonos-18-guests-9-bedsb'); if(customLink) { var links = customLink.getElementsByTagName('a'); for(var i = 0; i < links.length; i++) { links[i].href = 'https://www.dphworld.com/mykonos/helios'; } } }); </script> EDIT: ADDITIONALLY, I just now noticed that by using a summary block in another page to display those products, the URLs revert back to the original ones leading to the "cart page", instead of the intended URL forced by the java script. https://www.dphworld.com/antiparos/iris pass 1234 (2nd picture, the bottom url is by hovering on the middle image) This was countered by a non elegant solution, provided by the script bellow which does also simplify the code but - unfortunately - hovering over obviously displays the old "wrong" address. For the time being its only implemented in https://www.dphworld.com/corfu/phos pass 1234 I would really prefer a more elegant solution where the old address is not displayed and the code is simple <!-- VILLA URL redirection --> <script> function redirectUrl(fromUrl, toUrl) { // Check if the current URL matches the old URL if (location.pathname === fromUrl && !window.frameElement) { // Redirect to the new URL window.location.href = toUrl; } } // Define the old and new URLs and call the function redirectUrl("/villas/p/phos-estate-corfu-12-guests", "/corfu/phos"); </script>

Looking for the same solution, for different reasons. Did you come up with a solution how to link a variant photo to url? In theory, indeed it should be possible but my skills are nowhere near there. My only need is to add a link to the variant picture

Wasn't answered but I found a better workaround. According to squarespace support this method does not work as a bandaid to gallery block render/display issue but worked for me. Used a section gallery and now all thumbnails load in both chrome and firefox and all lightbox images are rendered to proper resolution. You can use the following code to tweak the gallery and lightbox, now it has 2 switches to control thumbnail and lightbox. Feel free to improve /* LIGHTBOX CONTROLS FOR FLOOR PLANS */ /* General controls and adjustments */ .gallery-lightbox-controls { display: flex !important; } [data-lightbox-section-id="65eba2ee2952eb7dd0fc1ef9"] { .gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * { stroke: white; stroke-width: 4px; } .gallery-lightbox-close-btn-icon * { color: white !important; } /* Change the background lightbox color - gallery */ .gallery-lightbox-background { background: #404040; opacity: 0.8; } /* Mobile gallery lightbox arrow position */ @media screen and (max-width:932px) { .gallery-lightbox-control-btn[aria-label="Previous Slide"] { left: -22px; } .gallery-lightbox-control-btn[aria-label="Next Slide"] { right: -10px; } } } /* Desktop gallery thumbnail position / per row */ @media screen and (min-width:933px) { section[data-section-id="65eba2ee2952eb7dd0fc1ef9"] { .gallery-grid-wrapper { grid-template-columns: repeat(3, 1fr) !important; } .gallery-grid.gallery-grid--layout-grid { padding-left: 25vw !important; padding-right: 25vw !important; } } .gallery-grid.gallery-grid--layout-grid { align-items: center !important; } } /* END LIGHTBOX CONTROLS FOR FLOOR PLANS */

Excellent explanation. Works like a charm. Apparently I was using wrong syntax. Section and lightbox sections are different. Thanks

Thanks for taking the time @Beyondspace . Lightbox pops up if you press any of the gallery pictures with the floor plans of the house, towards the end. Circled in red below

Trying to apply CSS to a specific image gallery section ((add gallery/images - not add gallery block) I tried entering the section, then yui I see with inspect and ultimately even the entire page with collection but the damn code keeps applying to the entire site and not only on that particular gallery section . Am I getting the syntax wrong or is targeting gallery sections impossible? Forum seems to suggest is doable but cant get it right section[data-section-id="65eba2ee2952eb7dd0fc1ef9"] is the one in question. trying to apply it to the following code. Entering that, with or with out the word section, with or without * before { ...code ...}, doesnt seem to work. What gives? https://www.dphworld.com/santorini/homer pass 1234 /* LIGHTBOX CONTROLS FOR FLOOR PLANS */ /* General controls and adjustments */ .gallery-lightbox-controls { display: flex !important; } .gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * { stroke: white; stroke-width: 4px; } .gallery-lightbox-close-btn-icon * { color: white !important; } .gallery-grid.gallery-grid--layout-grid { align-items: center !important; } /* Change the background lightbox color - gallery */ .gallery-lightbox-background { background: #404040; opacity: 0.8; } /* Desktop gallery thumbnail position / per row */ @media screen and (min-width:933px) { .gallery-grid-wrapper { grid-template-columns: repeat(3, 1fr) !important; } .gallery-grid.gallery-grid--layout-grid { padding-left: 25vw !important; padding-right: 25vw !important; } } /* Mobile gallery lightbox arrow position */ @media screen and (max-width:932px) { .gallery-lightbox-control-btn[aria-label="Previous Slide"] { left: -22px; } .gallery-lightbox-control-btn[aria-label="Next Slide"] { right: -10px; } } /* END LIGHTBOX CONTROLS FOR FLOOR PLANS */

So basically I found a bug in Squarespace where a media library cannot load properly and lighthouse pictures are rendered in low resolution. Only bandaid solution I can think of, to which tech support will not assist because apparently it not their job to support when their product breaks down, is automatically refreshing that particular block or at least section of the page. For some weird reason, refreshing with F5 fixes most of the glitches so I need to make it an automatic process, relevant to that particular block or section alone. No idea how to code this so help would be appreciated. Ideally, code should have a "how many times" switch too. #block-yui_3_17_2_1_1709761603063_20548 is the offending gallery block that needs to be refreshed/reloaded, in section[data-section-id="65e8e4f405c27949534e7f67"] Also How to automatically refresh/re-render those images but in lighthouse view – they cant properly render without refresh at the moment If needed, https://www.dphworld.com/santorini/pelos , pass 1234 7.1, business plan Of course, if you have another idea its more than welcome. the problem is that the block gallery does not load all the times unless the page is refreshed (different behaviour between firefox and chrome) and that those gallery images in lighthouse view mode are rendered in low resolution. The 1st of the images *always* in low res

This is now a certified bug by squarespace . Apparently something is misbehaving with a combination of media libraries and lighthouse image rendering. Hopefully, they will fix it. Meantime, I came up with this band-aid. Tech support dismisses it as "not working" but frankly, it does for me. 0 display problems in either browser and no resolution problems

Visitor and incognito at that, to avoid cache application, both in Mozilla and chrome as well as on mobile devices with no previous access. The problem as I said is not with the top gallery pictures of the villa it self, but rather with the floor plans in the bottom gallery, right under "Review the floor plans" heading and just above the why chose the villa" picture (#block-4657ac005d8cd9a6035f). Top gallery with house, pools etc displays fine. Just checked to re verify and it persists. Unless I refresh, pictures below wont appear despite occupying space - as if they don't render? I also made sure that a CSS for blocking a certain display on top gallery in mobile view IS NOT the cause - though it couldn't be, plus problem occurs in all resolutions @media screen and (max-width:932px) { .sqs-gallery-thumbnails.sqs-gallery-design-strip { display: none; }} Thanks for the good words.

https://www.dphworld.com/crete/ariadne pass is 1234 7.1, business plan First gallery on top of the page, displays fine (property photos) Second gallery near the bottom of the page (property floor plans), consistently refuses to display unless I refresh the page. Occurs in both desktop and mobile. Cant be a cache issue as I also tried it on a separate computer and with incognito mode. What gives? Any help appreciated