GeothermalCanada Posted December 16, 2023 Share Posted December 16, 2023 (edited) Here is the webpage in question: https://www.geothermalcanada.org/corporate-members I'm using Bedford 7.0 Here's the code I used to increase the height of the slideshow pane: <style> .sqs-gallery-block-slideshow { height: 30vh } </style> I need the images inside the slideshow to do all of the following: scale up to match the width of the pane center vertically maintain their aspect ratio And I need the description (when hovering the mouse over the image) to be flush with the bottom of the pane. There also seems to be a needlessly large margin between the top of the text box and the first line of the text; I'd need that margin to be shrunk to be closer to the text. I tried clicking the "automatically crop images" option within the slideshow options, and while it scales the images to the width of the pane, it also crops the images too aggressively, in a way that I can't seem to do anything about. It also presses the images against the top of the pane instead of centering them. However, I understand that, no matter what, tall images are going to be too tall for the pane once they are scaled up, and will be cropped to fit the pane. I'm fine with that. Any help is very much appreciated. Edited December 16, 2023 by GeothermalCanada Removed unnecessary parts Link to comment
GeothermalCanada Posted December 18, 2023 Author Share Posted December 18, 2023 (edited) I rectified the situation by painstakingly editing each image one by one to add white space above and below, and replacing it into the collection with its description and clickthrough link. Doing this made the images show properly without being cropped to oblivion. However, I feel like this time consuming process shouldn't have been necessary. Here's the code of the images when the page is looked at in browser and the "inspect" feature is used: <div class="sqs-gallery sqs-gallery-design-stacked" id="yui_3_17_2_1_1702929853173_573" style="height: 349.996px;"> There should be an entry box directly in the edit slideshow options, letting you directly enter the height you want the images to be cropped at. The "height: 349.996px;" should be easily changed to whatever you want it to be. Edited December 18, 2023 by GeothermalCanada Link to comment
Solution GeothermalCanada Posted January 24 Author Solution Share Posted January 24 Great news!! I finally figured out a way to make gallery slideshow blocks work much better than before. Here's the CSS that makes the difference; copy and paste this into your page code header (or site CSS page without the style tags): <style> .sqs-gallery.sqs-gallery-design-stacked { height: 478px !important; max-height: 50vw !important; } .thumb-image.loaded { width: 100% !important; max-width: 956px !important; left: 0px !important; object-fit: contain !important; } </style> And of course you can play around with the values to suit your needs and specific situation. Hope this helps some people. tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment