How to publish from project file with Bootstrap 5

Beginners
1

I am new to Pinegrow. I checked a test publish by uploading a page with FTP and “surprise” images, etc., did not arrive with it. What information from the project folder needs to be uploaded for pages to look and function appropriately? … I never used Bootstrap before.

Thanks

2

Hi @Richard,
I would need to see your project, but generally, you need the ‘bootstrap’ and ‘bootstrap_theme’ folders and your main HTML page. The url for the surprise me images should be added to the CSS file in the 'bootstrap_theme folder. You can check the stylesheet manager under the File menu to see if there are any other stylesheets attached.
Cheers,
Bob

3

Thanks Rob. I am a bit disoriented trying to use PInegrow with bootstrap. I am not a web developer, but have had success using an old Serif Webplus 8 program (word press). That program is obsolete and I am trying to transition into Pinegrow. I am also new to Ubuntu although I have been using fedora and Opensuse Tumbleweed. I has a slow tranistion into linux, then virtual machines and Emacs. I put off transitioning into something like Pinegrow for far too long. All that was to let you know that I am a newbie when it comes to Bootstrap and web building.

I attached a snapshot of my project folder. and yes, there is a bootstrap folder containing a css and js folder. There is no bootstrap theme folder but I am still at a “playing with a page” level.

What in this folder needs to be uploaded to the host server? And yes, those jpeg are my “surprise me” images.

Richard

Project

4

Hi @Richard,
I guess I misunderstood what you mean by “surprise me” images. If you are using the Pinegrow Design panel it adds something called a surprise me image that it gets the page colors from. So, the only thing that you should need to upload are the images, index.html, and the bootstrap folder. But, you have to make sure that the structure in your hosting directory matches that of your local project. The links to the CSS and images have to be pointed correctly. That depends on how things are uploaded. You are just uploading as a static HTML page, not WordPress, correct?
Bob

5

Hi @RobM,

I have not played with website code much before but I am shooting for a static html page for now. If I understand correctly, what I have started to build in Pinegrow with Bootstrap 5 will not work when I upload images, index.html, and boostrap folder - UNLESS I ensure that any links in index.html, including an embedded link for the background image, are pointed to my web site (example → https://caid.ca/bckgrdimage.jpeg).

If this is correct, then Pinegrow is actually geared to url-based web site development and not project folder-based development. Do I have this correct?

I attached an XL and XS screen shot of the index.html layout I am working on plus the CSS attributes for my background image. I trust I am am good to go since the style attribute has the back-ground image: pointed to url(‘photoname.jpeg’).

Richard

CAID-1
CAID-1962×730 78 KB

CAID-2
CAID-2289×764 32.8 KB

CAID-3
CAID-3311×722 43.2 KB

6

Hi @Richard,

No, not really. You can enter links as either absolute or relative. You just have to make sure the folder structure on your host matches that of your local.
So for your example:
/bckgrdimage.jpeg would be the same as https://caid.ca/bckgrdimage.jpeg.
But it can also be entered as bckgrdimage.jpeg without the forward slash.
The difference is that the host would look at the calling page (say index.html) and get the beginning part of the path from that. So if the calling page was https://cais.ca/main/home.html, the image would be https://cais.ca/main/home.html/bckgrdimage.jpeg and you would have to make sure that the image was in the same main folder as your index.html.
For relative URLs you can also make you directory a little more complicated. You can use ./img/bckgrdimage.jpg to indicate it is in the img folder that is located at the same level as your index.html.
Pinegrow can handle any of these types of URL. When you do a drag-and-drop it defaults to relative to the base URL.
Hope this helps,
Bob

7

Hi @RobM,

That information is helpful. Particularly the /img/bkgrdimage.jpeg suggestion. I noted there was a “.” in your typing (ie. “./img/bkgrdimage.jpeg”). Was the decimal a typo?

Also, I presume that all links can be adjusted this way for links to pdf documents where I could cleanup the hosting web folder with “/docs/somefile.pdf”?

@Richard

8

Hi @Richard,
Nope, the “decimal” wasn’t a typo. It means start with the current directory. If there were two decimal points it means go to the parent directory. So if you have the (artificial) structure:

mydomain.com
    assets
        other.jpg
    pages
        index.html
        second.html
        logo.jpg
    images
        background.jpg

Then from index.html you would have a URL of ../images/background.jpg or a URL of ./logo.jpg or a URL of assets/other.jpg depending on the image you wanted.
Make sense?
Bob

9

Thanks @RobM. This is clear.