gallery: auto-caption images with the file name, sort alphabetically

Site URL: https://www.outstampingcreations.ca

site: www.outstampingcreations.ca
pw: ineedhelp

I am using a masonry gallery to display all the stamp design options I have(on website: available options --> design stamps), however the gallery leaves much to be desired when it comes to trying to sort the images in a particular order. They seem to go willy nilly and randomly switch images on me or move them to the bottom after I try to set an image in a specific order. Seeing as I will constantly be adding images of new designs available, I will constantly have to re-sort them. The only option to do this without driving me crazy is delete all images in the gallery and re-add them as they will automatically be organized by file name and thus alphabetically at that time. BUT this also means I at times will have to re-caption 40+ images.

Is there:
a) a way to make image captions automatically appear using the file name without having to manually add each one?
b) sort the images alphabetically so I don't have to delete and re-add them all each time I add new stamps?

I have one more unrelated question... it appears some text boxes have 17px padding all sides except the top. I figured it had to do with my custom CSS code but can't figure out which is causing the issue so maybe not? Here's all the custom CSS I am currently using for design:

//MAKE 3 COLUMNS ON MOBILE CONVERTING MASONRY TO GRID//
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
        height: auto !important;
        display: grid;
        grid-template-columns: repeat(4, 25%)!important;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        padding: 10px;
    }
    figure.gallery-masonry-item {
        position: relative !important;
        width: 100% !important;
        transform: unset !important;
    }
    .gallery-masonry-item-wrapper {
        height: 100% !important;
    }
}
//MAKING 10 COLUMNS ON PC BY TURNING MANSONRY TO GRID
@media screen and (min-width:768px) and (max-width:4000px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
        height: auto !important;
        display: grid;
        grid-template-columns: repeat(10, 9.5%)!important;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        padding: 10px;      
    }
    figure.gallery-masonry-item {
        position: relative !important;
        width: 100% !important;
        transform: unset !important;
    }
    .gallery-masonry-item-wrapper {
        height: 100% !important;
    }
}

.sqs-block-button a {
      color:#fff !important; 
      background-color: #000
}

.sqs-block-button a:hover {
      color:#fff !important;
}

.image-caption p{
      color:black;
    font-family: Utile Narrow !imporant;
      font-size: .6em !important;
    margin-top: 0px;
    margin-bottom: 0px;
}
//center image block caption//
.sqs-block.image-block .image-caption-wrapper p {
     text-align: center !important;
}
//decrease padding above caption on block images//
figcaption.image-caption-wrapper {
    padding-top: 10px;
}
.gallery-caption p {
    text-align: center !important;
    margin-bottom: 0px !important;  
}

//decrease height between caption and image//
figcaption.gallery-caption.gallery-caption-grid-masonry {
      padding-top: 2px !important;
}

// Move Over Button on hover //
.sqs-block-button .sqs-block-button-element--small {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

.sqs-block-button .sqs-block-button-element--small:hover {
  margin-left: 50px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

/* Image Captions on Hover for Panograms*/
.page-section[data-section-id="61475378934103148a4e5601"]{
.image-caption-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center; /*vertically centered */
  justify-content: center; /*text align center*/
  background: rgba(255, 255, 255, 0.8) !important; /* Background Overlay*/
    }
}

#block-yui_3_17_2_1_1632078087225_12531 {
  background-color: hsl(209, 0%, 13%);
  h3{
  color:hsl(37, 0%, 95%)!important;
  }}
#block-yui_3_17_2_1_1631223080617_27126 {
  background-color: hsl(209, 0%, 13%);
  h3{
  color:hsl(37, 0%, 95%)!important;
  }}
#block-yui_3_17_2_1_16312 {
  background-color: hsl(209, 0%, 13%);
  h3{
  color:hsl(37, 0%, 95%)!important;
  }}
#block-yui_3_17_2_1_1631223080617_70724 {
  background-color: hsl(209, 0%, 13%);
  h3{
  color:hsl(37, 0%, 95%)!important;
  }}

.header-nav-item a:hover {
    color: hsl(227, 83%, 43%)!important;
  text-decoration: underline;
}

I love how much info is on this forum - I've already been able to solve many problems myself by reading other threads so thank you for all those answers and thank you in advance for my questions 🙂

Anyone? Or is what I'm looking for not possible with the gallery block?

On 9/20/2021 at 6:04 AM, Lanfear said:

I have one more unrelated question... it appears some text boxes have 17px padding all sides except the top.

SS has a pattern of top and bottom items padding are different from items in the field ( middle ) of a layout. So most likely it is not your CSS that is doing this effect but SS is doing it.

I may or may not be able to answer the other points in your queries.

On 9/20/2021 at 6:04 AM, Lanfear said:

b) sort the images alphabetically so I don't have to delete and re-add them all each time I add new stamps?

I'm a little confused by why you need to delete everything and add it all back in. If you are adding new images to already existing images they are added at the end of the old ones. So if you need to maintain an alphabetic order, you only need move the new images at the end into alphabetic order within the old images.

On 10/9/2021 at 1:32 PM, creedon said:

I'm a little confused by why you need to delete everything and add it all back in. If you are adding new images to already existing images they are added at the end of the old ones. So if you need to maintain an alphabetic order, you only need move the new images at the end into alphabetic order within the old images.

Thank you for your reply, Creedon! The reason why I delete everything and add it all back in is because IF I try to sort things within the gallery to edit the order, it's horrendous. It randomly swaps images that aren't even related to the one I am moving, after I let go of the image,. It's impossible for me to drag it one image at a time to put in alphabetical order when it continuously switches other images around on me that I'm not even selecting. Therefore I don't really have any other option but to delete all the images, and re-upload them. When I do this, it uploads them in alphabetical order as per the image names so I don't need to fiddle with trying to hand sort them, if that makes sense.

@Lanfear

Ah I see.

I'm wondering why the gallery editing is unstable. I've not noticed any issues moving things around.

Does the editing go funky right away or does it fritz out when adding over x number of images?

On 10/11/2021 at 8:58 PM, creedon said:

@Lanfear

Did this issue ever get resolved? I'm having a similar issue. Gallery images don't stay where I want them to when I drag them around. I want them to alphabetize automatically.

On 10/11/2021 at 5:58 PM, creedon said:

I'm wondering why the gallery editing is unstable. I've not noticed any issues moving things around.

Does the editing go funky right away or does it fritz out when adding over x number of images?

Answering my own question since I've been doing a fair amount of work in gallery pages on v7.1 recently.

The ordering of images using the drag and drop feature is unstable. I've not narrowed down to a formula for breakage but here are some observations.

When working with only a few images that all fit in the drag and drop area without scrolling things seem to work OK.

When working with a fair number of images (10ish or more) that seems to be an issue.

If you have to drag and scroll that seems to cause issues.

Images not staying where dropped. Popping back to where they were?

Being dropped one off from where they were dragged to?

The image grid not updating properly, images disappear but if you leave the dialog and come back, they are still there.

Basically severly broken. Once things go bad you might as well cancel out of the dialog and try again.

1 hour ago, btolpa said:

I want them to alphabetize automatically.

There is no automatic alphabetization.

Also please see my previous post.

Thank you for the follow up but, whoa, that's a big issue for Squarespace to not have fixed. 7.1 is super glitchy and restrictive.

I am having the same exact issues. Trying to move one image in my gallery block and it just randomly moved all the images all over and caused a mess. It was set up so that paintings in a series are next to each other and now they are all over the place and I'm not able to fix it because it just keeps randomly moving images anytime I try to move one. https://www.nanettepowell.com/paintings

Is there a fix for this?

It's frustrating but I was able to sort them by dragging and dropping the images without them randomly sorting after I logged completely out of my account and logged back in.