I cannot save my BBS design changes any longer

Bootstrap Studio Help
1

Since some days the „save“-entry in the file menu is greyed out, the disc symbol in the top row of the window, too, and when I press Ctrl + S nothing happens. When I want to quit the app, the notice appears that all changes will be lost, if I go on. „save as“ isn’t greyed out. Of course, I tried this, too, did chose another file name, but afterwards the file could not be found at the place where it should be or anywhere else. Only „Export to html“ still works, but this way I cannot continue working at my site. Not even an error message appears why „save“ is disabled. I use the latest version of Linux Mint.

When I start BSS again, a panel can be opened with one item in red concerning the size of my website. It is larger than 100 MB, whereas the size should not be larger than 20 MB. After exporting I find 422 MB. Before buying BSS I found the information that the app can also be used for larger sites. But the notice it should not be larger than 20 MB is exactly the opposite. In my opinion even 422 MB isn’t a large site, and I just started building my site a few weeks ago. So I expect having assembled 100 times more after years. I have a lot of svg files which can be imported as images into BSS, whereas audio files have to be linked by URL. To reduce the size I could link the SVGs, too, but I don’t want to do this. I object to linking URLs, because when the location of the external files has to be changed some days, I would have to adjust all the URLs, too. This would be the end of my site.

As I mentioned already, I use Linux Mint. May I ask if the windows version of BSS works a little better, because the problem described above isn’t not all, what doesn’t work. For example, some days ago an update was installed automatically, where I could read that a bug was fixed concerning padding and margin. But even now this feature doesn’t work properly, neither the orange and the green handles to adjust padding and margin, nor the adjustment according to different viewports. I managed to solve this problem by using media queries in the CSS stylesheet. Ctrl + Z doesn’t work properly, too. Never before I did have a problem with this shortcut, neither with Microsoft, nor with Adobe software. For this reason I use this shortcut in BSS, as far as it works, only for one step backwards, because it behaves not as it should.

Thank you very much.

2

Your website can be over 20 MB. It’s just recommended to keep it below that for speed. I’ve had a number of websites that were in the 50-60 MB range, but only because they had upwards of 500 pictures in photo galleries.

400 MB is EXTREMELY large for a website made with BSS. Since you can’t import videos or PDFs, the only assets that could account for such a large file size would be images, which suggests you are using extremely large images that haven’t been optimized. It you’re importing dozens (or hundreds) of images that are many megabytes in size, and then shrinking them down via CSS, that would account for your huge .bsdesign file.

3

Sorry to hear you’ve run into problems! Indeed 400mb is way above the typical Bootstrap Studio website. We are planning a solution for managing large collections of media files (images, pdfs, videos etc), but this is some time off. Out of curiosity, what type of website are you building that uses so many large SVG files?

The only workable solution right now is to upload the media separately and link them via URL. If you need to change the URLs in the future, you can use the find/replace dialog in the app.

For the margin and padding tool, can you try if the instructions in our basic editing video work for you?

4

Thank you for your interest in the problems I am dealing with. I published a range of books, meaning print, and put a selection of the book’s content into SVGs with the purpose that visitors of my website in future can read the texts and listen to audio recordings of these texts simultaneously. Unfortunately I can’t send you a link, because the site isn’t ready. There is no way for me to create HTML-text instead of image files to present the contents of my books, because they are sophisticatedly layouted. Each line is followed by another line of commentation, what is the exact opposit to fluid text layout HTML is based on. Of course, I tried already to reduce the size of the SVGs, but this leads to lower quality. PNG leads to smaller file sizes, but SVG is better. PDF leads to lower size without a decrease of quality, but I’m not sure, if the content of these single page PDFs would be visible immediately after opening the webpage. Besides I didn’t find a way to remove the PDF header with the page number, tools etc. for all browsers. SVG, as it seems to me, can be integrated easier into a webpage.

I did watch all the new videos of the Bootstrap Studio Academy. Here I first noticed that padding and margin can be changed in the described way. But this not working for me is the much smaller problem.

5

But SVGs are vector based, it shouldn’t matter the size of the images… Are you by any chance converting images, that are not vector based into SVGs?

You’d probably be best making your images into WebP image formats. They have a small file size and high image quality.

6

Thank you, catkin. I create SVGs out of printable PDFs I used before for publishing my books using Illustrator. I don’t know the right expression in English, but according to the dictionary the term is „decimal place“. In the Illustrator export dialogue you can chose from value 1 to 4. If I chose 2, the result isn’t satisfying, if I chose 3, it is ok, so that for 4 there is no need, what would lead to the best possible result. I guess the higher the level, the more code is created resulting in bigger file size.

But in my opinion it is less useful to think about how to shrink the file size. Even if I could reduce them to the half, after adding ten times more files to my site it would be five times bigger. I just started building my site. The only way I can see is to link all files with external URL as martin said and I was able to conclude by myself, too. Also the search functionality I found already, but to substitute thousands of URLs some days after moving the files is something I want to avoid urgently. A recommendation for the software to use I would appreciate very much.

7

I understand the use case now, yes

8

If you are converting the text to outlines, you’re going to get enormous SVGs, whether they contain images or not. Changing the decimal places reduces the number of vector nodes, which reduces the size of SVG, but it also degrades the quality. And if your SVGs do contain embedded images, and they are high-res, that will also make the SVG files very large. I don’t think using SVGs is a practical solution.

If you want people to be able to read your books online, the proper way to do this is to put them on your website as HTML text, and recreate the formatting as best as possible. If you’re using BSS, then you’d use Bootstrap’s responsive grid system to approximate your page layout. It’s a lot of work, especially if it’s a big book with a lot of pages, but you could probably create scripts to help streamline the process. (This is where it might make more sense to consider a database-driven website, so you could populate template-based pages with the text saved in a database)

Another option would be to put a high res image of just the first page of the book, and then have a link they can click to download a PDF version with all the rest of the pages. That’s a pretty common technique.

I do something like this for one of my clients who writes articles for a local magazine.

They supply me with a PDF and I convert it to a fairly high-res image (about 1000 px wide x 1300 tall,) which is very readable on desktop. I have thumbnails for each article that when clicked open the full size images in modals. Below the thumbnails is a button to download the original PDF. This system works well for desktop, and when you open a PDF in a web browser, it’s a very straightforward process and it looks like this…

image
image850×718 242 KB

If you don’t want to turn your books into actual HTML, the way I’d make them readable would be to reformat them as PDFs, upload them to your server, and link to them on your website. I’d also make a single column version of the PDF for mobile with the width set up at a typical mobile screen width (around 360 pixels.), and a normal size PDF for desktop. Then you could either use JS to detect the user’s screen size and have it download the appropriate PDF for their device, or just have two buttons to download desktop or mobile.

Also, if your books are multipage, you’d be a lot better off using InDesign to create your books. Illustrator is for creating Illustrations. It has a lot of text features because you can use it to make flyers, posters, etc, but anything involving lots of pages should be done in InDesign. Then it’s very easy to change the page size in order to export PDFs as single column or multi-column.

1 Like
9

Thank you very much for your detailed reply again, printninja. I received from you twice very useful advise in the past, but in this case I cannot follow quite. First, I feel strongly the necessity to rule out transforming the texts of my printable, already existing PDFs into HTML-text, because the layout is too elaborated. It isn’t fluid text as in almost every other book, printed or e-book. So displaying the texts as images seems to me the only solution. For example, nobody who wrote a mathematical treatise with TEX gets the idea to reproduce the entire content in HTML afterwards.

Second, I want to combine the texts with audio. Each item of the Accordion we talked about earlier, combines one audio player with one text sequence, in my case an image. This is to allow listening and reading simultaneously. I address people who learn foreign languages and are interested in literature like me. Audio files within PDFs should be possible according to Adobe, but practically this leads to problems. I like this idea very much and tried a lot, but discarded this approach at the end. Fot this reason I now use the HTML audio tag instead. On my website I use PDFs as everybody else is wont to do it, but only, if the text isn’t combined with audio.

The PDF you were so kind to display or the high res first page image of it has a black border and a header. Both doesn’t make sense in my case, whereas a single SVG matches much better. Why, for example, I should communicate to the visitor that it is the first page, when no second page follows. Besides a high res image has no advantage compared to SVG. By the way, the SVGs I am speaking of don’t contain pictures, meaning pixel graphic. There is also no need to make it downloadable. And, to create a different PDF for the web I can rule out as well as transforming the content of my existing PDFs into HTML-text.

Of course, I use InDesign for creating my PDFs, also for adjusting the length of each page, but within InDesign you can only export PDF, no SVGs. So you have to open the PDFs afterwards in Illustrator to create the SVGs. But talking about Illustrator and InDesign is less interesting for me. I try to find a solution for my webdesign problems. So much as I like InDesign, so much I dislike Dw where it seems to be possible to import all kind of files you want, SVG, PDF, audio etc. Maybe there is something else beside Dw, I thought.

10

This is a very interesting problem, I haven’t imagined Bootstrap Studio being used for interactive books in such way. Would it be possible to see one of the SVGs so we can investigate what can be done?

11

I fear the discussion which will follow after posting one of my SVGs. For example, when my brother, an it-scientist himself, had a glance on the texts, immediately started dissuading and recommended another kind of layout. Printninja sounded in a similar way. But I want to leave the content as it is for several reasons. The it-world is one thing, and the humanities and didactical aspects are something different. For this reason I want to avoid posting content. But thank you very much for your interest.

12

@Yorik, → Martin ← is the actual developer of Bootstrap Studio and wants to investigate. If needed use the forum PM (Private Message) feature to send him a link directly and privately.

1 Like
13

A quick AI search resulted in the following… maybe one of these will be helpful

Several approaches exist tor showing books on a website:

1. Javascript Libraries:

  • BooksJS: This is an open-source JavaScript library that uses PDF.js to build interactive book previews on the web.
  • Foliate-js: This library renders e-books in the browser and supports various formats like EPUB, MOBI, KF8, FB2, CBZ, and PDF (experimental with PDF.js). It’s pure JavaScript, small, modular, has no hard dependencies, and doesn’t require loading the whole file into memory.
  • Turn.js: This library leverages HTML5 to create a page-flipping effect for displaying content, resembling a book or magazine. It offers dynamic page loading via Ajax and supports various browsers and devices, including older ones like IE8.
  • Wubook Javascript library: This library helps build and deploy responsive widgets or bars on website pages. It avoids conflicts with other third-party libraries.

2. Embedding Options:

  • Google Drive Embedder: Embed eBooks stored in Google Drive using this plugin.
  • Flipbook Plugins: Use plugins like FlipSnack to embed flipbooks with a page-turning effect.
  • PDF Embedder: Embed PDFs on your website using a PDF embedder plugin.
  • Direct Embed Code (e.g., from Amazon KDP): If you join the Amazon Associates program or if the platform offers an embed option, you can use the provided HTML code to embed a preview or link to your book.
  • : Utilize iframes to embed content like books from other websites (e.g., Internet Archive’s BookReader or Book Creator).
  • FlipBuilder: Embed flipbooks created using FlipBuilder’s online service or desktop client by copying and pasting the provided embed code into your website’s HTML.

3. Utilizing External Services:

  • Elfsight PDF Embed widget: Embed books using Elfsight’s widget by creating an account, getting the setup code, and inserting it into your website editor.
  • LibraryThing Book Display Widgets: These widgets offer various display styles (grid, shelf browse, carousel) and customization options. They can be populated with data sources like series, awards, or custom lists.
14

I’m probably way off the mark here but Affinity Publisher lets you export PDF’s as SVG’s.

15

Most vector software can save files as SVG. That’s not the OP’s problem.

Their problem is that they want to convert all the pages of their books into SVG files to maintain the formatting so they can be read on a website. This is just not practical. It’s not how one would normally put a book online. The typical way is to convert the book into a PDF format (one for mobile and one for desktop) or to convert to HTML, and use ordinary CSS to recreate the layout as closely as possible. Then it’s responsive, and there’s no need for PDFs, But obviously the layout won’t mirror the book because it will adapt to whatever size screen it’s viewed on.

1 Like
16

hey Martin about the solution for large assets, how about:

  • do not directly save the file in bss safe file, but rather just safe the absolutePath to the file on the installed machine.
  • on preview mode, render them with base64(manually got from fs and the path provided by the safe file).
  • on export/published, validate the files, export the static file from the path reference from safe file, then render them normally using http src, href etc.
17

Hi Yorik,

first of all, thank you for pointing out the problem. I had only been following the thread casually – until I realized yesterday that I might be affected by this soon as well.

For a website project, I create six versions of each image. When I started setting up three new subpages, I checked the file size of the .bsdesign file – and your description immediately came to mind.

Luckily, it wasn’t a big effort for me to reduce the file size significantly: I simply deleted the high-resolution images from the BSS media library. Since I manually adjust the srcset entries using copy and paste anyway, and I don’t publish directly from BSS but only export, I just need to upload the large images for the new projects separately via FTP.

I hope you’ve also found a practical solution in the meantime. If not, maybe consider sharing an example file despite your concerns. It’s totally understandable that your focus is on solving the core problem rather than discussing alternative approaches – and I think everyone can respect that.

If you’re not ready to share a link for now, for whatever reason, it would still be great if you could post the finished site here later on. I’d really like to see how you solved it.

Best regards,
Torsten