I have seen some posts where, if I am understanding it correctly, it stated that it is not possible to add folders or sub directories other than what is already given in Bootstrap Studio in the lower right design section. Is this correct?
Need Example: Website covers an island which includes a National Park and several towns. Information about the town may need to be in its own folder as in Town Name/index.html along with a few connected pages.
The pages object in the design tab is at root level of your site
you can build your folder structure how you want, but you can only have
html pages in the pages object
├─index.html
│
├─anotherPage1.html
│
├─anotherPage2.html
│
├─anotherPage3.html
│
├─lastPageAtRootLevel.html
│
│
├──── town1/
│ ├index.html
│ ├anotherPage.html
│ │
│ └─anotherFolderIfNeeded/
│ └index.html
│
├──── town2/
│ ├index.html
│ ├anotherPage.html
│ │
│ └─anotherFolderIfNeeded/
│ └index.html
│
│
└── here are the other folders like font,assets
So, if I understand correctly: All pages must be located in the 1st root level. A page cannot be added to, or created within, a folder that is placed in the 1st level of the root. Is there a specific reason other than the ability to do so was not originally considered or designed into Bootstrap Studio?
Is there a workaround? If I am going to keep using Bootstrap Studio, the only one that comes to mind (in my very limited understanding) is that I need to use two separate programs. Create one level in Bootstrap Studio, then copy and paste page codes into a page structure in another program, then adjust all of the links.
No, in the example above your have 5 pages at the root level
the town1 is a sub folder in that folder lives
the town1 sub folder has anthor sub folder
in the anotherFolderIfNeeded lives
In Windows 10 I just right click on the Pages folder, menu pops up and I choose New Folder. After renaming the folder I choose folder and create a page using same method. Is mac Ctrl - Click ?
I thought he learned that two days ago 
Its a beautiful 
spot to vacation. I remember using his site when planning our trip and it was really helpful and informative. Looks like a update from Bootstrap 3 to 5 and almost looked like a wappler site or cms was involved for that amount of pages ? Map hotspots is incredible.
In case you missed it, I am on a Mac using a one-click mouse. Previously, my question was about adding a sub-folder in the images folder so that I could organize images by size. That involved control clicking on the folder within the Design window (which I did). That was successful. My recent question involved trying to add a folder on the same level as the home index page. Relative to this:
The visual layout being shown in the Design Window does not appear to clearly show that adding a new folder would be on the same level as the folders for Images, Styles, etc. I am now assuming that is because those are actually inside of an Assets folder.
Hi Twinstream,
Thanks for your reply and compliment. As a warning, I am almost 74. I first created the Acadia Magic website using Apple text files. That was 24 years ago. When the web changed, I heard of Bootstrap 3.x and began trying to figure it out. I knew very little but did have a sense of design and had created many photos. Sometimes I received good info, sometimes not. I ended up with about 2,000 pages on level 1 then had to trim it down. There still are about 1,000. FYI - The pages were all designed and created by me one-page-at-a-time.
My attempt here was to come up with some ideas for an old site that was never made responsive, then apply what I learned to my main website. My needs are a lot different than most because of how much content I have and the large geographical area it covers. There is also the matter of having over a thousand images. I saw Bootstrap Studio as my last stop to try and pull this off.
One of my big issues that I have not been able to solve is converting an area map (I created in illustrator) that was “image mapped” into something responsive. Nothing has worked so far. Again, I am hoping to tap into some knowledgeable resources here if I do not irritate people for my lack of knowledge.
@Greg Just my opinion but your site is fulling working and responsive under the Bootstrap 3 format so if it were me I would keep it just like that. If there are certain areas that are not responsive like the image map, certainly the talented members can address those and make suggestions. You do know you can import your project with all the assets ? Since in your setup your image folder is in the root, the links in the imported pages could be updated using Edit > Find and Replace and then search for attributes only and only matching a certain pattern and replace with the new /assets/image folder location.
The reason for having a assets folder is that some users may want to Settings > Export Settings > Use Absolute Paths when exporting so that the pages may be moved to subfolders but still find the assets folder in the root folder to be referenced. So having your images folder in the root would have to be changed to be in the assets folder and all your href links update (using the find and replace tool).
The image map part has been awhile since I have explored that but they are quite powerful as you know once its working. The map seem responsive but the outer links around the map are not. That should be fixed I agree.
Twinstream: Thank you for replying. There are many things that I would have done differently when creating the website had I known better. I wished that I knew PHP. At the time, being on a Mac, had some challenges and I was not able to overcome them. The program I used for many years was Dreamweaver but that has been fading away into dust. It allowed me to do certain things. Search and replace has been helpful. I like being able to copy and paste sections. I have been hearing about some security issues with Bootstrap 3. I know that the breaking points have created issues. I need to modernize it so that it is better for small devices. Much of Acadia Magic was created when content was considered king. I researched a lot to write all of the content. Now, it must be reduced for cellphones.
I spent a lot of time trying to find a way to upgrade Bootstrap to at least 4.x but could not find what was needed. If Bootstrap Studio has a way, that would be great. I confess, there are some things that slow me up. Bootstrap Studio could expand their market by doing a few things.
Here is an interesting story that happened well over 15 years ago in the early stages. All of the local chambers were focusing on their towns. I realized visitors wanted more. It needed a visual aspect added for visually oriented people. I was one of the first to create a large area map with multiple links to scenics, towns, etc. It grew rapidly to where any business listed got 70 -87% of all the referrals from the website. Then, I received a call from Google. They asked me all kinds of questions about why I did things certain ways, why I used certain keywords, etc. I explained that a photo isn’t just about what it showed. It was also about where it was taken from, etc. Little did I know that they were developing their own map at the time.
Thanks again. I really do need some suggestions and expert help. At my age, we learn there is less time to waste.
I would personally concentrate on getting everything into Bootstrap Studio but stay in the Bootstrap 3 format first. Updating the links is easy enough to do for the moving of the main image folder in the root to the assets folder.
Your map which was done in illustrator was probably exported code and added ? I have simply downloaded that page and imported into Bootstrap Studio using setting Bootstrap 3 when creating a example project. If you rearrange the links to above and below your map and set the map to 100% width and 100% height and then contain them all in columns you might be fine. just a thought… Example Map
Later if you feel comfortable in Bootstrap Studio using the version 3 you could update the site to Bootstrap 5 but be aware Bootstrap 3 was Desktop down and all the media queries will have to be converted to mobile up which started in Bootstrap 4. That can be some work but …then with the help of AI it might be alot easier.
If you want the image map to be responsive you need a little javascript to update the coords when the image resize
you can do it like this
document.addEventListener(
'DOMContentLoaded',
function () {
let originalWidth =
document.getElementById('responsive-image').naturalWidth;
let originalHeight =
document.getElementById('responsive-image').naturalHeight;
function adjustImageMap() {
const img = document.getElementById('responsive-image');
const areas = img.parentNode.getElementsByTagName('area');
const imgWidth = img.clientWidth;
const imgHeight = img.clientHeight;
const scaleFactor = Math.min(
imgWidth / originalWidth,
imgHeight / originalHeight
);
originalWidth = img.clientWidth;
originalHeight = img.clientHeight;
for (let i = 0; i < areas.length; i++) {
let coords = areas[i].coords.split(',');
for (let j = 0; j < coords.length; j++) {
coords[j] = Math.round(coords[j] * scaleFactor);
}
areas[i].coords = coords.join(',');
}
}
window.addEventListener('resize', adjustImageMap);
window.addEventListener('DOMContentLoaded', adjustImageMap);
},
false
);
here is an example
Yes thats working now thanks ! I was just looking at that problem and realized I forgot to test out the overlay to see if it was responsive but I noticed it was not working. Its been 4 or 5 years since I did some image maps. I think a option also is to create multiple maps for different breakpoints if you wanted to really be concerned about loading times but I cant remember how I did that also …Thanks again. I updated my example.
Thanks. Which page did you get the map and image mapping from? Was it at acadia.ws (a really old site) or acadiamagic.com? I knew it needed javascript but never found a source. On Acadia Magic (which I hope to work on and update here) I never was able to convert the most used page on the website (which was the interactive map) to a responsive one. I only was able to do it with a straight map without any links. That is here: Mount Desert Island Map - Acadia Maine
Is all that is needed is to add the bootstrap css at the top and the js files at the bottom regardless of the map size? If this works, you made my millennium. One more question, the Acadia Magic site is still in Bootstrap 3.3.7. Will it work with that until I am able to update to 5.3?
Yes I downloaded the map page from Acadia National Park Map - Mount Desert Island. I then imported to Boostrap Studio making sure when setting a new test project to choose Bootstap 3. kuligaposten was the one that gave the script to make the map coors responsive.
So, yes its a working bootstrap 3 example although I think Bootstrap Studio use 3.4.1. Cant be much difference.
I just seperated the links to their own rows and column. Map is on a row column in the middle of them both.
I mean, I could put your whole page up as a example but the question was concerning the map …
I gave it a try on a similar page that is in Bootstrap 3.3.7 but it was not working well. Perhaps I did something wrong? I was also wondering if having the section underneath the map is screwing it up. Here is the page:
If you want muliple maps on a page you can convert your function adjustImageMap() {...} into a class
like this
class ResponsiveImageMap {
constructor(imageId) {
this.image = document.getElementById(imageId);
this.startWidth = this.image.naturalWidth;
this.startHeight = this.image.naturalHeight;
this.adjustImageMap = this.adjustImageMap.bind(this);
this.init();
}
init() {
window.addEventListener('resize', this.adjustImageMap);
window.addEventListener('DOMContentLoaded', this.adjustImageMap);
}
adjustImageMap() {
if (!this.startWidth) return;
const areas = this.image.parentNode.getElementsByTagName('area');
if (!areas || areas.length === 0) return;
const imgWidth = this.image.clientWidth;
const imgHeight = this.image.clientHeight;
const scaleFactor = Math.min(
imgWidth / this.startWidth,
imgHeight / this.startHeight
);
this.startWidth = imgWidth;
this.startHeight = imgHeight;
for (let i = 0; i < areas.length; i++) {
let coords = areas[i].coords.split(',');
for (let j = 0; j < coords.length; j++) {
coords[j] = Math.round(coords[j] * scaleFactor);
}
areas[i].coords = coords.join(',');
}
}
}
document.addEventListener(
'DOMContentLoaded',
function () {
const responsiveImageMap = new ResponsiveImageMap('responsive-image');
},
false
);
Having a reusable class like this makes it much easier to manage multiple image maps on a page
The image should have an id="responsive-image" then it will work for you . You can choose what ever as Id and adjust the script to your desired Id
Now I am even more confused. After a night’s sleep, I looked at the responsive map version that you sent and realized that none of the image-mapping data was there. Yet, it is acting as if it is. How is that happening?
I realize now that I am actually viewing the map as it exists at your location. When I tried to duplicate the results using a larger map version on a Bootstrap 3.3.7 page along with the original image-mapping coordinates, adding the id=“responsive-image” and placing the js script at the bottom, the results were not the same. Something appears missing.
I was going to mention that I noticed a few things. One was that the js script that was used on yours appeared slightly different than what you gave me to use. The example had “false” at the bottom whereas the linked file did not. (I have no idea what that means.) I tried both but noticed no difference.
The other thing I noticed was that the map links on my version appeared OK on the horizontal but were progressively off on the y axis the further down the map I went.
Also, “img-fluid” is not recognized in BS 3.3.7 so I used “img-responsive”.
How can I get mine to work with the 1070px map? FYI - Once working correctly on an updated page, I do not mind it being used as an example under certain conditions.