Jump to content

How to refresh/reload a spesific block or section with code and how to re-render image gallery lighthouse view images

Recommended Posts

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
  • Replies 1
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted (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 by takis-7124
code update
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.