Every project can be loaded as a library of another project. That means that all the components and resources de ned in the library project will become available for use in the current project. That’s a powerful way of defining reusable
website components.
Up to now we were using components within a single project. Let’s call it Project A. The Team member component was both defined and used in Project A.
Imagine that now we start to work on a website for another client that will also include a Team section. Let’s call this project Project B.
Wouldn’t it be convenient if we could simply use the Team member component from Project A in Project B?
We can do that with Pinegrow!
Open Project B and open or create the page where team members will be listed.
Use File -> Load project as library to load Project A as a component library.
Team member component is now listed in LIB panel. Simply place team members on the page just like you would any other element from the LIB panel.
What should we do if we need to change the component defined in library project?
Imagine that we want to change the Team member component by adding the job title of each member under the name.
Because the component is defined in Project A, we have to open Project A and make the change there.
No need to close Project B to do that! Select File -> Open project in new window and open Project A in a new Pinegrow window.
There we make the necessary edits (add <p class=”job-title”> under <h3> and make the element editable with Editable area action) and save changes.
Back in Project B we choose Components -> Refresh loaded libraries and then Update components. That will reload components from Project A and update components on open pages.
Component library resources
In many cases components rely on CSS stylesheets, Javascript files, images and other files to display and function correctly. These files are called component library resources.
Imagine that we add team.css to Project A. This CSS file includes CSS rules for styling team members. We also add a folder assets/images/team with placeholder images for team members.
We want these resource files to be included in Project B (or any other projects that will use the Team member component).
But first we have to set which resources are required for Project A component library.
To do that we open Project A, and in PRJ tab right-click on team.css and select “Required by library”. That will open the Resource editor dialog and add team.css to the list of resources. There we can reorder resources to set the correct order for how they’ll be included on pages. For Javascript files we can also choose to include them in the footer of pages (by default CSS and Javascript files will be included in the <head> element).
Do the same for assets/images/team folder – right click on the folder in PRJ view and choose “Required by library”.
Click on Save in Resource editor window to save changes.
Back in Project B choose Components -> Refresh loaded libraries and Components -> Add or update resources. A dialog window will open. Under Project A section choose either “Add to all les” or “Add to the current page” to copy resources to Project B and include them on pages. Library resources are placed in folder components/<library name> in order to avoid conflicts with existing files.
These steps are needed only when library resources change and need to be updated or added to the project that is using the library.
If we would now open Project C and load Project A as library, Pinegrow would ask us immediately if we want to add Project A library resources to Project C.