Lanfear

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.

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

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 🙂