Static and dynamic navigation on same template?

[PhotoWebMax]

In order to learn more about setting up a PW site I am using an existing MODx site and recreating it with PW. I am doing this locally using MAMP.

This site has a static main navigation at the top that is built into a single jQuery driven nav_sprite graphic for active and mouse rollover states.  The nav_sprite graphic contains links to basic pages like home, about, portfolio and contact, etc.  These links and pages are set in stone and will not change. So this navigation is a static menu called "topNav".

The site also has a dynamic sidebar navigation in the main content area of the template for extra single pages and parent container pages. This menu is controlled by the Wayfinder MODx navigation snippet. 

So, what is the best Process Wire method of setting up this system? How do I set up the sidebar menu, called "sideBarMenu" and make sure the generated page links do not clash with the static "topNav" links at the top of the page? I need to make sure the "topNav" links do not show in the "sideBarMenu" and visa versa. 

 

Also, is there a cool, better PW way of presenting the "topNav" links instead of hardwiring them into the template?

Thanks!

Max

[kongondo]

Max,

Nothing wrong with hardcoding the topNav. It won't change, why make it dynamic and waste resources (queries to db, i.e.)?

As for the sideBarMenu, depends on how many items you want there and where they are coming from (e.g. are they simply the children of some top level pages?, etc). You can either roll up your own code (e.g., look at the example in the default PW install), or there are recursive menu functions code lying around here in the forums that you could use, or you could use our very own Wayfinder counterpart, MarkupSimpleNavigation. It is powerful, much easier to use than WF and more flexible. 

Depending on the approach you adopt, there are various ways to omit pages from appearing in a menu listing (in essence, in the results of a selector 'find'). These range from ticking/unticking checkboxes (checkbox field), exclusion using templates (i.e., via a selector), using the page's 'hide' setting, exclusion by parent, by IDs....just too many possibilities with ProcessWire! Google this forum for 'navigation' and have a read at the many possibilities...

[PhotoWebMax]

Thanks!

Keeping the topNav static will be simpler. I will try the MarkupSimpleNavigation module for the sideBarMenu now...

[PhotoWebMax]

Hmmm,

Really battling converting the MODx template into a system that PW likes. This will take more effort than I thought...

[Craig]

One way I would look at setting this up would be to create a new "Page" field with a name like sidebar_links and the "multiple" option used. Add this to the templates that your pages use.

When editing pages within the site, the sidebar_links field can be populated with any links of the admin/author's choosing. 

In your templates, you can get the sidebar_links field and use it in a couple of ways:

1. Search up the page tree, from the current page, until you find a sidebar_links field that has items in it and list them all.
2. Get all the entries from the sidebar_links fields from all the pages in the current tree and display them all in one or separate lists

To ensure the top nav links don't appear in the sidebar, I would create an array of those somewhere. Use that array to build the top nav, but also to check if any of the rendered sidebar links appear in it. If they do, then skip that link and move onto the next. You could also append/prepend the current or parent pages, depending on your preferences. You can also get the current page's siblings rather easily if you wanted to include those too.

I use a variation on this approach for the collection of random pages like About, Policy, Terms, FAQ, Contact... which may not fit into a single parent within your existing tree, but need to be displayed in that one place, can easily be updated in the CMS, and will automatically reflect title/URL changes.

[PhotoWebMax]

Thanks Craig,

To ensure the top nav links don't appear in the sidebar, I would create an array of those somewhere. Use that array to build the top nav, but also to check if any of the rendered sidebar links appear in it. If they do, then skip that link and move onto the next. You could also append/prepend the current or parent pages, depending on your preferences. You can also get the current page's siblings rather easily if you wanted to include those too.

I really do not know PHP and doing this is way out of my depth. 

I did follow the basic tuts I found and they went well. But I am really battling with getting an existing site to look and function properly in PW. Most of the content gets positioned below the container divs I want. Obviously I am missing how the default PW system placeholders get placed into a template. I need to get the fields to work where and how I want them before I figure out the navigation issues I started this thread with. 

Newbie issues for sure. But I cant help feeling my initial positive reaction to PW has taken a hit. Most forum threads I chase down seem to focus on code. I really want to  get to managing the content...

[JeffS]

The easiest way for you to just layout the HTML in a template and once you have raw HTML / CSS working the way you want, implement the dynamic parts via the API. 

You would also have something to share back here for potential feedback.  

[PhotoWebMax]

I think I have too much to contend with. Soooo, I think you are right: I need to build a very basic HTML / CSS structure. I then need to start with a stripped down blank profile install of PW and start from there...

[kongondo]

Max,

ProcessWire doesn't output any markup. So if things are appearing where you did not intend them to, then you must have placed them there . Secondly, to use PW, you will need to know some basic PHP - like was pointed out in the other thread: echo, foreach, if. You will also need to know how to use the PW API. Otherwise it will be really difficult for you. If you could invest the time to learn these, you will reap big time in the end. This is an amazing system with a lot of flexibility. But I know learning code is not for everybody . I am just being honest here and not trying to discourage you.

Btw, feel free to show us the site you want to convert (or you did that already?). Might help us give you other ideas on approaches you could adopt. I hope you don't give up on PW. 

[pwired]

This is an amazing system with a lot of flexibility. But I know learning code is not for everybody.

Hang on, it is because of the flexibility of PW that lets you start using it from any level of experience

and build from there on up into the api and php.

Most of the content gets positioned below the container divs I want - I need to get the fields to work where and how I want them before

I need to build a very basic HTML / CSS structure. I then need to start - with a stripped down blank profile install of PW and start from there

A few tips here:

Start with a simple css framework and let that take care for you where

you want to position your output, examples:

1 http://simplegrid.info/

2 http://mourner.github.io/dead-simple-grid/

3 http://arnaudleray.github.io/pocketgrid/

Hardcode your topnav in an inc file and inside the css framework of your choice

start outputting with simple php include and echo, examples:

1 <?php include("./topnav.inc"); ?>

2 <?php include("./footer.inc"); ?>

3 <?php echo $page->body; ?>

4 <?php echo $page->yourfield; ?>

5 <?php echo $pages->get("/site-settings/")->site_meta_description; ?>

With this easy setup you can already make a decent website without php and api experience.

From there you start learning step by step more complex php and processwire api and your

own css layout. In many cases however, one of those css frameworks already give you all

the layout you need, just tune it into your needs.

Last but not least a good read here: http://www.getsymphony.com/discuss/thread/79645/

Personally: processwire is what modx evo should have become, but never did.

So here we are

[PhotoWebMax]

Thanks guys.

I had to walk away from this before my head exploded. Sort of dejavu with my experience learning MODx. Scheduling, work and circumstance creates periods where I am focused on building/managing sites and long periods when I do nothing. Coming back always seems to require refreshing my familiarity with the system I am working with. After getting quite comfortable with creating static sites I moved into Evo and then Revo, both MODx products. I sort of have a love-hate relationship with MODx. But the fact is that I have a lot of time invested in the system. When I say a lot of time I mean it. My brain is the limiting factor. Learning this stuff just requires major effort and frustration on my part. I just wish I could pick up programming and coding skills. I was ready to kill myself learning Fortran in college. 

There has been a lot of chatter on the MODx forums on the question: is this system a playground for developers and code geeks or can designers and end users actually deploy the system and get working on managing their content? To my eye MODx Revo is suffering in new added signal to noise ratio when it comes to learning how to get things done. 

I have read the PW API page and while it lists a lot of under the hood features it fails (IMHO) to provide the basic "what do you want to do & here is how you do it" roadmap for building sites. The MODx documentation was bogged down in geekdom before great people like Mary starting writing progressive tutorials on actually getting results. Most open source documentation follows a geeky format that is difficult to digest for new users. Snippet documentation would list endless parameters and code details but fail to explain why they would be useful and what they actually do. 

Designers, photographers, etc, really need easy to deploy and manage web sites. Systems like MODx and PW can be great tools for one sided brain types like me. I am a photographer by trade. Building sites is very much a secondary activity. I just wish the documentation was better. 

But enough. I am rambling here. I am not ready to give up on PW yet. I think I need to fiddle with it until I have that "aha" breakthrough. However, the other thing is the voice in my head which is telling me "after all this time with MODx why are you battling with a new system from the ground floor all over again?"

[kongondo]

Max, you raise some good points (that have actually been raised before ). I'll comment on two of them:
 

I have read the PW API page and while it lists a lot of under the hood features it fails (IMHO) to provide the basic "what do you want to do & here is how you do it" roadmap for building sites. The MODx documentation was bogged down in geekdom before great people like Mary starting writing progressive tutorials on actually getting results. Most open source documentation follows a geeky format that is difficult to digest for new users. Snippet documentation would list endless parameters and code details but fail to explain why they would be useful and what they actually do.

And you are absolutely right. Remember though that PW is still a young system (in relation to it being released open source, i.e.). As with most systems, you first start with making sure that the API documentation is rock solid. This is what PW has done (in my observation). You pick up the API and run with it. Ryan (or somebody else, can't remember) summed it up beautifully in some post. Rather than teach someone how to put together a photo gallery, or a school website, you'd rather give and teach them the tools (API) to put together ANY type of site . You master the API, you master everything (even beyond PW since there is no templating language - it's just OOP PHP). But, there is a place for 'how to' tutorials. However, with the relatively few hands on deck compared to other similar projects, it is impossible to equally concentrate on the API documentation,  'how to' tutorials and answering questions in the forums, not to mention continuing the development of the core PW code. Hence, so far, 'how to' tutorials have largely remained a community effort. Joss has really tried to write a few. He has also posted in the forums an excerpt from his upcoming 'how to' PDF. I also have a few 'how to' tutorials in the pipeline (as you can see from my rather dormant website www.kongondo.com  ). We can do with a few more Marys to tell the truth...

However, the other thing is the voice in my head which is telling me "after all this time with MODx why are you battling with a new system from the ground floor all over again?"

Good point. And this is one big difference between systems that employ templating systems (like MODx) and pure OOP based systems like PW. When MODx started to crumble under my feet, I was asking myself this same question. I took the plunge into PW and here we are having this conversation. What I have learned using PW is a transferable life skill (seriously). It is like HTML or CSS. It is universally applicable. I never have to learn another templating system. This means I can (relatively easily) pick up any OOP PHP system with good API documentation were PW to disappear tomorrow....

I am happy you are not giving up yet on PW. Yes, to use it, you will have to invest time in it....but we'll be here to guide you every step of the way

[PhotoWebMax]

Good points!

On the MODx forum there used to be a lot of chatter about the importance of the project development coming first and that any documentation was secondary. And the documentation that followed was written by and for developers. I get that, totally. But...

What follows is the desire for the project to grow and become popular with different users. After a point the user base becomes stratified with different skills brought to the table. There are a ton of pixel orientated people who what to display content with minimal programming study. To serve these folks there are the forums. Any growing CMS needs a solid forum. Its just vital. 

What can happen with forum members is burnout from helping newbies. This can become infectious. The risk is that new members feel unserved and unwelcome while the forum base only sings to their own choir. 

What I see in visiting the various CMS sites is a ton of buzz words and lists of features. For the most part I find little content like "what do you want to build? This is how to get it done with MagicEasyCMS". Instead these details are usually presented in the forums for new users to dig through. My point is that good documentation and tutorials will help reduce the volume of new "how do I..." queries. 

As far as tutorials go videos can be wonderful. Producing good video tutorials is an art form all on its own. Too many tutorials feature video windows that are too small to see what is going on. Some lack voice narration with just recorded mouse clicks. Some move too fast or too slow or assume too much from the viewer.

XXX

Anyway, I came back at my self assignment and made solid progress on several steps. I moved the body placeholder in my template and created some test fields (using echo statements) in the sidebar area of my template and got it all working. I then hid the set in stone pages that are linked in my upper navSprite navigation (topNav). I then installed the MarkupSimpleNavigation module and added this to my sideBar section of my template: 

<?php
$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
echo $treeMenu->render(); // render default menu

?>

And voila: my sideBar links are there! Some CSS issues with the links but I am ok with addressing CSS. 

So, I am feeling much better about things overall. Always a good idea to walk away when frustrated. Next up is feeling my way with presenting attractive photo galleries...

Thanks again to all...

Max

[Craig]

Thanks for your point of view and feedback, Max I do agree that having documentation that is more task oriented could really benefit newcomers and give them a boost when getting started.

That is quite a large undertaking though, because with PW, there is no one single way to do most things that people want to achieve. I think it would be more of a recipe book of sorts. Starting at the top with "I want to do X with ProcessWire..." and then breaking those down further - with one or more suggested methods to try in tutorial-like formats.

Some of the content in the Wiki is OK at this - and will use one way of doing things which you can then use the same approach to your own site or to similar parts of your own site. But there is always room for improvement and hopefully those of us with the time and skill do so, will help

[PhotoWebMax]

I have a problem...

In my original topNav I am using a single navsprite image for all five active & hover state links. I am using a little jQuery eye candy as well.

The existing code looks like this: 

<ul id="topnav">
	    	<li><a href="http://www.sitename.com/" class="home"><span></span></a></li>
	    	<li><a href="portfolio.html" class="portfolio"><span></span></a></li>
	     	<li><a href="services.html" class="services"><span></span></a></li>
	     	<li><a href="about.html" class="about"><span></span></a></li>
		<li><a href="contact.html" class="contact"><span></span></a></li>
	    </ul> <!-- topnav ends -->

I can hide these pages from links so that they do not appear in my second sideBar navigation. I am working locally on MAMP here.

I then created the actual Portfolio page. I also have the Home page. The Home page address is //localhost:8888/ProcessWire-SREP/

If I click on the Portfolio link in the topNav I get taken to this page:  //localhost:8888/ProcessWire-SREP/portfolio.html   but get no content and a "the page you are looking for is not found" message.

If I change the link in the topNav to read <li><a href="portfolio" class="portfolio"><span></span></a></li> (dropping the .html at the end) I get taken to the correct page with the URL of //localhost:8888/ProcessWire-SREP/portfolio/ showing. 

If I then click on a link in the sidebar and then click back on a link in the topNav I get the error message and the url of  //localhost:8888/ProcessWire-SREP/site-map/portfolio   (after visiting the site-map page)

Obviously I need to make changes in the topNav UL. I need the empty span tags and the CSS classes for the positioning of the links and for the Jquery to work. I also think I need the .html to show at the end.

Any pointers on where to go from here?

Thanks!

[Craig]

Pages within the CMS don't have a .html extension, so you are right to remove that. Your next try with just the name ("portfolio") is close - but when you are on another page, it is treated as another directory - so it assumes you want that file (portfolio) in the current directory (site-map).

Change the topNav links to look like this:

<ul id="topnav">
    <li><a href="<?php echo $config->urls->root ?>" class="home"><span></span></a></li>
    <li><a href="<?php echo $config->urls->root ?>portfolio/" class="portfolio"><span></span></a></li>
    <li><a href="<?php echo $config->urls->root ?>services/" class="services"><span></span></a></li>
    <li><a href="<?php echo $config->urls->root ?>about/" class="about"><span></span></a></li>
    <li><a href="<?php echo $config->urls->root ?>contact/" class="contact"><span></span></a></li>
</ul> <!-- topnav ends -->

It uses the $config API variable to retrieve the site's root URL, and then just appends the name of the page you want to link to.

[PhotoWebMax]

Craig,

Brilliant! That totally works. Interesting reading on the config page as well.

Thanks!