I'm preparing my components to revamp my personal website and configuring Lightbox gallery essentially customising for my own needs.
My issue is with changing the code to change
div class="col-sm-6 col-md-4 col-lg-3 item"> if I convert to HTML and edit in Notepad++ I can edit the col-lg-3 to col-lg-2 which is perfect for what I need and also expand to show 18 images. But when I do that I can no longer edit the images in Bootstrap Studio. I'm sure I could do this easier in version 5.4.0 - now using 5.4.2
A bit of help would be appreciated
You don't have to edit anything at all with the col size in a text editor, you can make those changes right in BSS in the Options pane. Almost every setting has a little arrow to the right of it. Just change your Large size to 2 by clicking on that column and in the options look for the width setting at the top. Click the little arrow next to it and it will expand more options for you. Now change that 3 to 2 an that should be all you need to do. Also, it's the same in both versions of BSS.
You'll find that there are a lot of settings with little arrows next to them that can be opened to change specific break point settings. What that is doing is making the media queries for you so you don't have to code them. Also it's giving you the ability to do this in the app so you don't lose the ability to edit things like the images easily in the app as well.
Also, be sure you realize that BSS works from Mobile first setup so start with your smallest size first and change the settings you want there, then go up to the next larger size you want to change and so on. This is important because the CSS is written with the smallest size being read first now instead of largest. Seems a bit backwards I know, but someone decided that was the best way to do it so that's what we got (someone in Bootstrap and basic web design that is, not this app lol)
Let me know if that's what you were looking for or if you need further info.
Very helpful, just what's needed and simple to do. Is there an easier way to add the extra columns, I've done it by Copying and pasting in the Overview Panel to go from 6 to
18. Now I just need to tweak some Lightbox parameters, it's around 11 years since I last did that :D
Thanks for your prompt help
You can do multiple columns by highlighting multiple ones in the Overcview Panel and right click and choose duplicate. Duplicate is a much better setup than just copy as it will duplicate all the settings as well where Copy works intermittently at all let alone making sure it got everything. When you duplicate you can also choose in the Preview window the item you want to duplicate muliples of such as your Column, then just repeatedly hit the duplicate button (in the blue bar at the top left of any selected component). Makes duplicating go a bit faster without dealing with a right click menu. Not perfect for all things, but most.
One thing I would recommend is ... get the first lightbox set up exactly how you want it before duplicating so you don't have to go in and change settings on 100 light boxes lol.
Hope that helps :)
Just want to point out that with recent updates, you can select from the Overview pane each Column and edit them all at one time.
Such as the column size adjustment.
I'm assuming based on the code, you are using the Lightbox Gallery component I created.
35603 user downloads
Saj's Design Test Bed
For photo albums I can recommend nanoGallery
here is an example
Thanks Jo, yes I realised better to make changes before duplicating. i think my first website was 1993/3 so in that respect I'm not a newbie, just kind of lost touch of changes about 14 years ago. I used to teach basic design (CorelDraw but could just as easily have been Illustrator) at a college and oversaw web design for multiple websites, plus running e-Commerce sites.
My own website is large and not responsive that's the bit I should have addressed years ago, when I say large over a Gigabyte but it is very Photo heavy (I am a photographer). It'll be larger as a lot of the older images were quite heavily JPG compressed mid 90's for 1440kb modems.
I'm finding Bootstrap Studio exactly what I need, sure there's odd minor issues and best reported to the Coders. I could easily get around the issues by re-editing in another program but it's better that the root issues are, fixed,
Maybe I should put some simple bits for Tutorials together more for beginners than advanced users. I've made my Header and Footer and now adapted Lightbox Gallery, as well as 3 column Article and will move on, but essentially if I move from say a 3 Column Article to Lightbox Gallery the header text is the same place on the screen.
I think some of the Videos I've seen to do simple tasks are far less useful than the reply you gave me :D
Since you recommended Nanogallery (which I also use) and seem to have a good handle on it, I wonder if you might have the answer to a question. When Nanogallery is in lightbox mode (full screen), in my galleries, advancing the slides and then hitting the browser's back button causes the slideshow to go back one slide on my gallery, whereas on your example, it simply exits the gallery. I would prefer that sort of behavior, rather than the back button essentially taking you back to the previously shown slide.
You can see what I'm talking about with my galleries on this page
Any help is appreciated.
I see that you add your albums with custom code, you change that behavior with this setting
If you set "locationHash": false visitors can't share a picture via email or to social media. If you take a look at the browser address bar you will see the difference of your album and my album
Thanks @IanG hopefully there was something there that helped. I do agree the videos are quite old and outdated and hopefully there will be some revamps there as well as the forums coming sometime in the future to help with that.
Thank you for the prompt response. I will investigate and let you know. Thanks again!
That really is very impressive and I would like to download the component but clicking your download button doesn't elicit anything I recognise. (Apologies if I'm missing something obvious!)
Look in the online library for: Some examples of how to implement nanoGallery
@Jo, I tried to copy multiple columns as you suggested, there's issues they appear in a Preview but aren't there in the HTML.
But I've other issues and Martin said there were some major coding upgrades and I think this is part of the same issues I've been having so worthy of a Bug report.
Thanks. I had checked the online library earlier but it didn't show. I does now.
This was extremely unexpected and generous of you. THANK YOU!!! I owe you one!
And now it has gone...
I was hoping to add it to the BSS installation on my desktop after originally only adding it to my laptop. Has the name changed?
You are welcome
Here is an example how you make albums and filter with tags
Scroll down and request the code ;)
Most generous of you to do this. You certainly seem to know your way around Nanogallery2.
I can see possibly using something like this on future galleries, though not necessarily for this client. They would never appreciate (or pay for) the amount of time and effort that you must have spent creating this example, which again, I am both grateful and surprised you did. I assume you must have a way to automate the numbering and naming of all the images, and didn't type all that code out by hand. If you did... well... wow!
(BTW, I established some dialogues with other BSS users outside of the forums, via email. If you ever wish to communicate with me outside the forums my email is firstname.lastname@example.org)