Add padding to slideshow reel in 7.1

Does anyone know how to add padding to the new slideshow reel in 7.1?

Can you share link slideshow reel on your site?

@tuanphan I can use some help with this as well. 

Site: https://www.huesofcomfort.com/

@nancydesign @ladyniks where are you looking to add padding exactly? between images or on the outside container?

between the images!

21 minutes ago, nancydesign said:

between the images!

Add to Home > Design > Custom CSS

.gallery-reel-item img {left: 10px !important;}

You're a genius! thank you. 

you've saved the day yet again! thanks!

@tuanphan when I used your code, it added the padding by cropping the image on the left. Any tips on how to get the padding to just go between the images without cutting it off?

URL:  https://synthesizer-scarlet-yx66.squarespace.com/

Password: jhlcompany

14 minutes ago, gradycomms said:

@tuanphan when I used your code, it added the padding by cropping the image on the left. Any tips on how to get the padding to just go between the images without cutting it off?

URL:  https://synthesizer-scarlet-yx66.squarespace.com/

Password: jhlcompany

@media screen and (min-width:992px) {
.gallery-reel-item {
    width: 90px !important;
}
}

On 4/23/2020 at 8:24 PM, tuanphan said:

@media screen and (min-width:992px) {
.gallery-reel-item {
    width: 90px !important;
}
}

 

On 3/12/2020 at 6:12 AM, tuanphan said:

Add to Home > Design > Custom CSS

.gallery-reel-item img {left: 10px !important;}

 

both of these cut off parts of my images. would appreciate any help you can offer, thanks!

here's my site url (password is password): https://tarpon-mandolin-lblr.squarespace.com/

1 hour ago, crrjuilliard said:

 

both of these cut off parts of my images. would appreciate any help you can offer, thanks!

here's my site url (password is password): https://tarpon-mandolin-lblr.squarespace.com/

Where is gallery reel?

3 hours ago, tuanphan said:

Where is gallery reel?

I'm creating an automatically sliding gallery. already used code to hide the slide buttons. just needed to increase the padding between the logos

3 hours ago, crrjuilliard said:

I'm creating an automatically sliding gallery. already used code to hide the slide buttons. just needed to increase the padding between the logos

It seems you can't. Why don't use Gallery Grid?

On 5/24/2020 at 4:48 AM, crrjuilliard said:

 

both of these cut off parts of my images. would appreciate any help you can offer, thanks!

here's my site url (password is password): https://tarpon-mandolin-lblr.squarespace.com/

Hey,

I ran into the same problem, and just got it working with this:

.gallery-reel-item img {
    object-fit: contain !important;
}

Hi @tuanphan--

Unfortunately, this code cuts off the right side of the image when I increase it to 100px. I am looking to create a photo separation kind of like in the CAMPAIGNS section of this website below:

https://rafsimons.com/ss20 CAMPAIGNS

How would I be able to achieve this layout?? (Would be great if you have any insight on horizontal scrolling as well) 

Thank you!! 

.gallery-reel-item img {left: 10px !important;}

Best,

Grace

On 8/11/2020 at 2:32 AM, Jarien said:

Hey,

I ran into the same problem, and just got it working with this:

.gallery-reel-item img {
    object-fit: contain !important;
}

 

i added that code to my  gallery reel also ***AFTER**** i ensured all vectors/images were same ratio. works well

On 5/24/2020 at 8:04 PM, crrjuilliard said:

I'm creating an automatically sliding gallery. already used code to hide the slide buttons. just needed to increase the padding between the logos

are you trying to have the same gap between all of the images? 
I am working on that same situation currently. I had to make sure all vectors/images were the same size/ratio to start with

Hi, I am having this same problem currently in Squarespace 7.1 Slideshow Reel, all images are the same square pixel size and the two codes above still cut off the right side of the images by moving them into their neighbors - the images do not space outward from each other. Any suggestions? Thanks!

https://innovativeintensity.squarespace.com/ bottom of the page. I need to add more spacing between these logos.

At the moment I'm using scale:

.gallery-reel-item img {
    transform: scale(.9);
}

Hi same issue.

Can't add space without cropping the images, which is annoying.

Anyone know how to fix this? I tryed the solutions above but they didn't work.

tx

On 6/23/2021 at 2:28 AM, FabiSantiago said:

Hi same issue.

Can't add space without cropping the images, which is annoying.

Anyone know how to fix this? I tryed the solutions above but they didn't work.

tx

Can you share link to reel on your site?

Hi all, just picking this up. I had the same problem, so I put a positive position on the container (which crops, as you know) and a negative position on the img, to the value of half. This re-aligns the image centrally. 

.gallery-reel-item-src{
  left: 34px
}
.gallery-reel-item img{
      left: -17px;
}

On 5/18/2021 at 4:23 PM, helloVlad said:

At the moment I'm using scale:

.gallery-reel-item img {
    transform: scale(.9);
}

 

I used this combined with code from another site to achieve my desired outcome.  I wanted to make an auto scrolling bar down the bottom with logos to run through and found some solutions would crop the images and make it a little frustrating to deal with. Solution for my fix:

FOR AUTO SCROLLING:

PAGE>ADVANCED>CODE INJECTION (ADJUSTABLE CODE IS BOLD)

Gallery:  1 will select the first reel on your page. Change to 2/3/4 etc if multiple on the page.
Direction: 1 for right, 2 for left scroll
Timing: In milliseconds. 3000 for 3 second scroll.

<script>
    /**
    *  Gallery Section Auto Scroller
    **/
  (function () {
    setAutoScroll({
      gallery: 1,
      direction: 2,
      timing: 3000,
    });

    /*
    * Copy and paste the above code
    * to target more auto-scrolling
    * sections
    **/

    /** gallery
    * gallery section order on the page. Ex:
    * 1 = the first gallery section on a page,
    * 2 = the second gallery section on a page
    **/

    /** direction
    * direction the gallery should go in.
    * 1 = backwards,
    * 2 = forwards
    **/

    /** timing
    * timing between each slide, in milliseconds. Ex:
    * 2000 = 2 seconds
    **/

    function setAutoScroll(settings) {
      function init() {
        let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];

        function clickArrow() {
          if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")) {
            let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
            if (arrow) arrow.click();
          }
        }

        window.setInterval(clickArrow, settings.timing);
      }

      window.addEventListener("DOMContentLoaded", init);
    }
  })();

</script>

To then adjust image sizes and padding (use the scale to adjust size of images)

DESIGN>CUSTOM CSS

[data-section-id="INSERT SECTION ID NUMBER HERE"].gallery-reel {
 padding-right:0px;
 padding-left:0px;
  height:20vh !important;
  
  .gallery-reel-item img {
    transform: scale(.75);
}
}

It is best practice to ensure the images are all the same size image to ensure this works as you desire.