Help Please Using Web Design Software (Pinegrow) with Processwire

[StephanB]

Hi PW Community-

I only very occasionally am involved with web design. I've built a couple small sites with PW in the past, but it has been several years. As I update my own personal site, I would love to use PW again instead of Wordpress. I'm hoping to find the simplest strategy to use my web design software (Pinegrow) for building pages that I will convert to PW templates. The site will be mostly static with 10-15 pages, but will use Hanna Code (which I think I can already add in the Pinegrow editor) to add some additional functionality.

WHAT I HOPE IS POSSIBLE - I would like to create an entire bootstrap site in Pinegrow, and export all pages and necessary files into a PW templates subdirectory. Then in PW I will create a template file for each html page in my site, and pull the code from the page into its corresponding template file. Once this initial setup is complete, I should be able to work in Pinegrow to make design changes to the site, and simply upload any edited html files back into the templates subdirectory.

HELP NEEDED -

1. First, is this even a logical way of doing this? I am not directly converting the original html page files to templates to save myself from having to convert back and forth from php every time I want to edit in Pinegrow.

2. What would be the best way to copy each page's html code into the corresponding php template file? Would it be to use 'includes', or is there a better way? Please help with the php syntax for the template file.

3. Will links created in Pinegrow be a problem inside a PW template subdirectory? Would I have to make all my links absolute in Pinegrow, or would relative links work?

Thanks in advance!

-Stephan

[BrendonKoz]

Hello Stephan!

Hopefully you've scoured the forums and found similarly posed questions by now, but just in case you haven't - ProcessWire is, at its core, a solution for a CMS - a content management system. ProcessWire simply takes that concept a bit further by allowing those who use it to custom tailor the system itself. So with that very short explanation, a Content Management System is something that manages content. This means that once you've come up with a visual template, theme, or whatever you'd want to call it, the system itself is what manages everything from that point onward. Going back and forth from a development tool and using it as your page editor, and hoping that the CMS you choose will simply ingest that - if I'm understanding your use case correctly here - isn't really something that many systems can take advantage of.

Theoretically I suppose that it could be used to do it, but it's a lot of work to get it to a point to where it won't realistically even be used to manage things on the site. Using any CMS for this scenario seems like overkill, where the primary content is managed by a visual HTML editor.

1. If it's logical to you, I can't say it's wrong. I will say that it's unique! It's also likely not the best option as:
   1. You're relying on your visual HTML editor tool (Pinegrow) to produce proper HTML/CSS/JS that is accessible, and without errors -- and that will always work with whatever main template you intend to embed it into
   2. You're installing a PHP/MySQL tool which, other than perhaps for page and navigation management, isn't really being used for anything else, and the powerful functionality found elsewhere in it could not be properly used (ex: search).
2. I think, using the scenario you've provided, the simplest way would be via a PHP include. It's hard for me to picture it all as I'd think if you went this route, it'd almost make more sense to simply manage everything within Pinegrow and just upload all changes manually. I haven't looked at it closely enough, but I think you can manage a navigational structure within Pinegrow, it's just a bit more work.
3. It could be a problem. It all depends on how you create the pages in both systems.
   1. If you're not particularly careful with it though, then my answer here would be, "Yes, it could be a problem."
   2. Absolute vs relative links would depend on your naming conventions, templating, and internal page creation within PW and Pinegrow.

What you could do is use Pinegrow to manage the website in its entirety, as you seem more familiar with that as a tool. Study up on ProcessWire and how it works (and/or other CMS/CMFs to see what might fit your ability and effort the best - flat file-based CMSs might work better for you) - and then slowly convert it to being managed by a CMS instead of Pinegrow.

[StephanB]

Thanks very much for the reply BrendonKoz! Although I can muddle through a little bit of hand coding (php and html) I prefer to use Pinegrow's functionality as both a visual page builder and code editor in one for designing. The code produced is very clean. What I hoped since PW's templating system is so flexible, is that it would be easy to switch between the two, but as you say, I may be complicating something that was designed to be simple in PW. Thanks again for the suggestions!

[valeriekmori]

Not sure it can help you but here (removed link) some information about web development with PW 

 

 

 

Edited December 26, 2022 by diogo
Link wasn't related to PW or Pinegrow (removed)

[allanrobert]

Theoretically, you can do this in Pinegrow if you understand how to work in a graphic editor. I have little experience in web design in anything other than WordPress. But I hope you can share your experience with the new software if you created something there. Drop a link to your other post or describe it here if you can.
BTW, I was thinking about studying web design. But this isn't necessary while I order designs from experienced designers. I'm glad I can ask them a lot of questions or Eat More Brain Designs on their website blog. There are several articles with useful information in their blog.

[jploch]

My new module PAGEGRID can be a good alternative to website builders like Pinegrow or Webflow. This way you don't have to convert your design to ProcessWire templates and can design and edit pages directly in the backend.