Managing your website's assets within BlueberryCMS is a little different than other website platforms. First of all, we don't use FTP. FTP is an unsecure method of transferring website files, so file management is done through your browser. We use a CDN and databases to store images and other files.
Directory Hierarchy
The root of your website by default is inaccessible. There are only two files that we store in the root folder which are site.css (Which are the styles you've configured in Global Settings) and page.css (Which are the styles you've configured under the CSS tab for any Web Page.)
/
/site.css (Global Settings)
/page.css (Web Page CSS)
/Documents (folder)
/Images (folder)
Files you've uploaded in the File Manager are in these respective locations:
/Documents/MyFile.pdf
/Images/MyFile.jpg
Accessing Assets
We took it upon ourselves to help organize project files into two specific primary folders: Images and Documents. The 'Images' folder is used to store image files (jpg, gif, png) and the 'Documents' folder is used to store document files (css, js, pdf, doc, font files and video files)
You can access your website's assets in your code by using it's relative path to our CDN.
Image Files
For Images within a Web Page
When referencing files stored in the File Manager using HTML elements, use the following format starting with the leading '/' forward slash.
<img src="/Images/path-to-file/image.jpg" alt="" />
Images within CSS file
If you're using an actual CSS file stored in your File Manager, be sure to specify the correct directory level using ../../ notation relative to where the CSS file is stored. For example, let's say you have a CSS file and saved it in "/Documents/css/style.css" and have an image stored in "/Images/MyFile.jpg".
.my_style {
background-image: url("../../../Images/ui/image.jpg") top center no-repeat;
}
Images within Global Settings CSS
When referencing any files stored in the File Manager using CSS in the Global Settings or Page CSS sections of BlueberryCMS, use this format without the leading forward slash.
.my_style { background-image: url("Images/image.jpg");
Document Files
For Documents within a Web Page
<a href="/Documents/path-to-file/spreadsheet.xls" />
CSS within a Page Template
<link rel="stylesheet" href="/Documents/path-to-file/styles.css" />
JS within a Page Template
<script src="/Documents/path-to-file/scripts.js"></script>
