GeothermalCanada

Solution found! 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. Found a quasi-solution using derrick's example. Navigation sidebar combined with summary blocks within a blog provides, for the most part, the functionality needed. Still hoping for a better solution though! Automatically-generating summary blocks right on the spot in response to user input, would be exquisite.

As mentioned it was an iframe embed, meaning an entire other webpage opened within the sidebar. The result of this was that a clicked link would open yet another whole webpage within that same sidebar pane - though I wanted it to open in the larger page not the sidebar. This is why I can't use iframe as a solution here. Another solution is needed. For now I did a mass copy-&-paste of all the links, but it's a lousy solution that I'm only using temporarily. Hoping to find a better way soon!

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.

@derricksrandomviews Here's how my blog looks after adding a sidebar using code. The grid layout hasn't been implemented yet as I'm still working on that, but the sidebar with accordion really helps with the navigation! There's just one problem I'm having though. The cloud tag I use to link to authors, opens the author's works directly in the sidebar instead of the page itself! How do I fix this problem? I really would like to avoid forcing new window opens if it's possible to avoid it. Here's the blog: https://www.geothermalcanada.org/catalogue/category/Geothermal Canada Content Basically the search by author feature is a window that opens another page site that has only the tag cloud on it and nothing else. But I want a click to result in the author's works to be listed on the page itself, not in the sidebar. Here's the code I used to embed the tag cloud: <iframe src="/authortags" width="100%" height="500px"></iframe> Any better way of doing this? Any help would be tremendously appreciated!!! 🙏 Edit: I've removed the iframe code as it was slowing down my site too much. Will need to find another way to embed the tag cloud!

That's excellent! Very close to what I am looking to do. However, the page refreshes and hops to a different URL each time you select a category. I was hoping to avoid the page refreshing/hopping if that's possible. Also, I'm on Bedford 7.0 and reluctant to jump to 7.1 as we have a very large amount of content (hundreds of blog posts and around 100 pages) and it's imperative that nothing breaks or gets lost in the transfer. So I don't know if what you have is possible in 7.0 without some major custom coding (possibly Javascript, etc). Honestly I'd be happy if I could just get a grid view (like you have) instead of a list view (which is what we currently get on our site).

Another question! I know it's past the deadline but I'll try asking anyway. When you have two images and one of them overlaps the other, and both images have a drop shadow, how do you code it so that neither drop shadow overlaps the other image? If you'd like to see an example of what I mean: https://www.geothermalcanada.org/ See how the banner shadow is on top of the white area? I'd prefer it not be. But if I boost the z-index of #page, it causes the shadow of the white page to show on top of the banner (that's not good either).

No need to answer. I've figured this one out using the following code: #siteWrapper { background-color: transparent; background-image: url(IMAGE URL HERE); } #page {background-color: rgba(255,255,255,1); mix-blend-mode: normal;}

Sure. You don't just copy and paste the entire thing though. Put this in your site custom CSS page: .container { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } And put this code into a code block on your site page where you want to put the video: <div class="container"> <iframe class="responsive-iframe" src="VIDEO EMBED URL HERE"></iframe> </div> ofc you'll put the video embed url where it says to. I think it also works for items other than youtube videos but I'm not sure.

The answer you're looking for is here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_iframe_169

Hi Becca! All of these questions are for a Bedford 7.0 site. 1) I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members ) 2) I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this? 3) I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code? Thanks so much for any and all help!

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.

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.

One more thing I'm having trouble with: (Bedford 7.0) https://www.geothermalcanada.org/corporate-members Here's the code header injection I'm currently using to increase the height of the slideshow pane: <style> .sqs-gallery-block-slideshow { height: 30vh } </style> I can't get the images in the slideshow to scale up to fill the pane. I'd like to be able to scale them up so that their width matches the width of the pane. All images should be centered vertically. For images that are taller than the pane when scaled up, I'm fine with them being cropped above and below. I want the aspect ratio of each image to stay intact (no stretching). Thanks once again for any help. Edit: nevermind, I started a new thread for this.

Flawless! Thank you.

https://www.geothermalcanada.org/catalogue-menu Just scroll down you'll find the buttons. I've rounded the edges.