Guest Posted March 9, 2020 Posted March 9, 2020 Does anyone know how to add padding to the new slideshow reel in 7.1?
tuanphan Posted March 10, 2020 Posted March 10, 2020 Can you share link slideshow reel on your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Guest ladyniks Posted March 11, 2020 Posted March 11, 2020 @tuanphan I can use some help with this as well. Site: https://www.huesofcomfort.com/
Guest Posted March 11, 2020 Posted March 11, 2020 @nancydesign @ladyniks where are you looking to add padding exactly? between images or on the outside container?
tuanphan Posted March 12, 2020 Posted March 12, 2020 21 minutes ago, nancydesign said: between the images! Add to Home > Design > Custom CSS .gallery-reel-item img {left: 10px !important;} artpimpress 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
gradycomms Posted April 24, 2020 Posted April 24, 2020 (edited) @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 Edited April 24, 2020 by gradycomms
tuanphan Posted April 24, 2020 Posted April 24, 2020 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
crrjuilliard Posted May 24, 2020 Posted May 24, 2020 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/
tuanphan Posted May 24, 2020 Posted May 24, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
crrjuilliard Posted May 24, 2020 Posted May 24, 2020 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
tuanphan Posted May 24, 2020 Posted May 24, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Jarien Posted August 10, 2020 Posted August 10, 2020 (edited) 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; } Edited August 10, 2020 by Jarien
gracejung Posted September 13, 2020 Posted September 13, 2020 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
ShortAngryViking Posted September 14, 2020 Posted September 14, 2020 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
ShortAngryViking Posted September 14, 2020 Posted September 14, 2020 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
standardtoaster Posted February 3, 2021 Posted February 3, 2021 (edited) 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. Edited February 3, 2021 by standardtoaster added website for reference
helloVlad Posted May 18, 2021 Posted May 18, 2021 At the moment I'm using scale: .gallery-reel-item img { transform: scale(.9); } tuanphan and ShortAngryViking 2
FabiSantiago Posted June 22, 2021 Posted June 22, 2021 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
tuanphan Posted June 24, 2021 Posted June 24, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
DavidCliff Posted October 4, 2021 Posted October 4, 2021 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; } tuanphan 1
Broker_Noob89 Posted March 23, 2022 Posted March 23, 2022 (edited) 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 scrollTiming: 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. Edited March 23, 2022 by Broker_Noob89
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment