takis-7124 Posted March 8 Share Posted March 8 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 Link to comment
takis-7124 Posted March 9 Author Share Posted March 9 (edited) 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 */ Edited March 10 by takis-7124 code update 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