Integrating with an existing site

JimR · 2013-03-09 15:01:41

I've got a general question about how to integrate the pages generated by TTG Publisher, Gallery, and Auto Index into an existing web site. I have it in the back of my mind I read about this somewhere but now I can't find it.

My (WordPress) web site is just a few pages and one for a photo gallery. Each page layout has a few things above the nav, the nav bar for each page, and then all the content below.

Generating that page from Publisher and using the templates will wipe out that page's layout created by WordPress. On the other hand, I can't really recreate the same header I have within the TTG templates.

Seems like there's two approaches: 1) use a PHP Plugin to replace the header and nav code using my existing output from WordPress or 2) find a way to insert the output from Publisher into an existing page.

#1 could get complex. Just the header code coming out of WordPress is 50 lines of HTML, plus some includes for the CSS. Plus it's responsive, and has special cases dealing with mobile devices. I'd also have to be careful to not get CSS conflicts between WordPress and TTG code. My head start spinning trying to think of how to deal with this approach.

I don't know if #2 is even possible. If so, there's something I'll have to change about the page that's defined in WordPress so the output from Publisher can be inserted into it.

Maybe there's another option?

How do we get the output from TTG to integrate into an existing web site, and keep (at least) the header and nav working?

Matthew · 2013-03-09 16:21:50

From my perspective, scenario #1 would be the best approach: use PHPlugins to clear the masthead and navigation, and replace them with your own stuff.

In my experience, WordPress is incredibly unfriendly toward accepting content from outside its own system.

JimR · 2013-03-14 09:01:47

Matthew wrote:

use PHPlugins to clear the masthead and navigation, and replace them with your own stuff

Ha! Easier said that done.

I'm about to start this, but the very first question I've got: "How do I insert my WP code into a TTG page?"

Let's say I replace the masthead and navigation entirely. My site is using different PHP and CSS. How do I get my code inserted?

What about the collisions of the name space (e.g. TTG and WP have a class "content")?

PS - looks like this thread should migrate to PHP Plugins

Last edited by JimR (2013-03-14 09:12:37)

Matthew · 2013-03-14 10:10:58

I've never tried to jam WordPress parts into a non-WordPress page, so you're on your own with that. I'm not even sure whether it can be done with the target page being removed from the larger WordPress architecture.

I reckon you'd just want to get the WordPress source that's output when your page is viewed, rather than using all the PHP source.

The tutorial is for CE2 -- so you will need to update the functions for CE3 PHPlugins hooks -- but this should give you the general idea how to proceed:
http://theturninggate.net/2012/04/ifram … -are-good/

JimR · 2013-03-14 10:21:45

Yeah, I had just come to that conclusion myself and was re-reading that exact tutorial.

Now I'm getting really sleepy :-|

JimR · 2013-03-14 10:33:48

Matthew wrote:
ttg_head_styles was a hook in CE2, but I've removed it in CE3

Uh oh - how do I hook in my styles with CE3 (to replace masthead and nav)?

Matthew · 2013-03-14 10:46:23

Use ttg_head_end to put in your new styles/stylesheet.

JimR · 2013-03-21 11:11:56

Well, I've made a great deal of progress. There's a few things I can't seem to fix, but willing to live with. I plan to make a list of my notes of things I discovered along the way in the hopes it will help others.

Here's something I can't figure out. It's had me stumped for days. My site's menu bar has "Photography" as the last item, pointing as all the TTG generated stuff (Auto Index and Gallery pages). I have a dropdown menu for the gallery sub-pages, and it looks like this:

Photography >
Gallery A
Gallery B
Gallery C
[and so on]

My Wordpress theme is using Superfish.js for this drop down menu. When things are running from a desktop, it works as expected (minus some cosmetic things I can't figure out but may just have to live with).

The menu will drop down while hovering over it with the mouse. You can click on the a child menu to get to that gallery. You can also click on Photography to get back to the top (the main Photography page).

But...TTG is doing something to the Superfish menu when it's on my iPhone.

Touching the Photography menu on an iPhone causes the menu to drop down, but instantly goes to that link. Superfish should be waiting for a second touch after it shows the drop down menu. As I said, it works that way when it's a WP page - touch the Photography menu, the menu drops down and you can then touch any of the child items or the parent and get to that page.

When the menu is installed from my TTG hooks something is changing the menu's behavior. I've looked through all the sources in the WP theme, but I don't see what's causing the problem. I think Superfish just knows how to do the right thing (?). At least it knows how to behave when installed by the WP theme.

So now I'm thinking it's something about the TTG world causing this.

I see calls to JQuery deep inside TTG (e.g. ttg.init.js for one). I think something about the JQuery calls is changing the behavior of Superfish, but I can't figure it out.

Matt, any clues you can offer on how to either prevent Superfish from doing the wrong thing, or how to get it to do the right thing?

Matthew · 2013-03-21 11:35:19

A few issues at work here.

1. It may be the WordPress theme is switching things up.
2. It may be that our specifying a mobile viewport for responsive design is telling the iPhone to interpret touch events somewhat differently.
3. I have found that not all touch devices or mobile behave the same in this regard. For example, Android browsers/Chrome seems not to trigger the hover events on the first tap, and just goes to the link.

So to get around all of this, we use the responsive design and re-layout the menu on touch screens. This way there is no hover event, so we don't hit inconsistency issues with hover vs. touch interpretations.

So your WordPress dropdowns working on iPhone or iPad is nice, but they're probably a real problem for users of other touch devices.

The real issue here is why you're having to mess with TTG drop-down menus on an iPhone? That shouldn't be happening; you should be seeing the responsive layout.

JimR · 2013-03-21 14:17:49

Matthew wrote:

The real issue here is why you're having to mess with TTG drop-down menus on an iPhone? That shouldn't be happening; you should be seeing the responsive layout.

The entire site navigation menu support should either be how it works in the Wordpress theme, or taken from TTG. I started out trying to put the TTG menus into the other world. I tried taking the nav generated by TTG output and wedging that into the WP theme (which has similar hooks as TTG Plugins). But that started to unravel the further I got into it

The WP theme I'm using is entirely responsive, though with different trigger points for screen size. The WP theme is showing "normal" desktop like menus for smallish screens, like the portrait view of an iPhone. The wider screens of tablets also have normal drop down menus.

I got 90% done pushing the Wordpress theme into the TTG Plugins.

Either way it's been a challenge. Both worlds have so much foundation assumptions built into their frameworks.

I can't seem to seam the two into a seamless experience

Last edited by JimR (2013-03-21 14:19:29)

Matthew · 2013-03-21 14:50:53

Either way it's been a challenge. Both worlds have so much foundation assumptions built into their frameworks.

Well, that is the nature of frameworks. And frankly, WordPress is a bit of a mess in that regard. WordPress itself is one framework layer, and then nearly ever theme for WordPress adds an additional framework layer different from every other WordPress theme. Building Chado was somewhat dreadful, and I am not really looking forward to working on the CE3/Chado2 theme, though it will need to be done.

But really, I am sworn off of "normal drop-down" menus on any kind of touch interface. They're too inconsistent. At least when the parent item is both an active hyperlink and the drop-menu trigger. Not a big deal if the parent isn't hyperlinked. This was probably the largest deciding factor in how I ended up handling navigation for CE3. On touch screens, I think it imperative that parent items not pull double-duty as both hyperlink and drop-trigger.

JimR · 2013-03-21 23:10:49

Matthew wrote:

I am sworn off of "normal drop-down" menus on any kind of touch interface.

That's understandable.

How then to solve a parent menu item that is a page, plus have navigation to the child pages?

Plus, have it work on both small screens like a smart phone and larger mobile devices like an iPad.

I may just given up on secondary navigation from within the Wordpress/theme world, and only present it while I'm within the TTG Plugins world.

Matthew · 2013-03-21 23:13:20

For TTG, I flatten the menu at 1024 so that drop-downs don't exist on landscape iPads. Your WordPress theme uses smaller breakpoints, so I don't really know what to tell you about that. :-/

JimR · 2013-04-13 04:27:09

Well, it took me much longer than I had expected but I did get it all working

When I started this I hadn't any CSS, PHP, or JavaScript experience. I was a software engineer in my former career, but hadn't written any code in over 12 years. So I had to teach myself how to write, and debug, web server code. Plus I was out in uncharted territory.

I have successfully integrated a fully responsive WordPress framework with TTG3. I'm really happy with the result. There's a few really minor things (a pixel off here and there), but I doubt anyone will notice. Other than that, I'm perfectly content at calling it a success.

Now, on with blogging and updating my galleries. The really cool thing - I can stop being a web designer and get back to being a photographer.

http://reekes.net

PS - there was a number of things I uncovered in this process. In the interest of saving others days of frustration, and if anyone is interested, I'll write my notes on the journey.

Community @ The Turning Gate

#1 2013-03-09 15:01:41

Integrating with an existing site

#2 2013-03-09 16:21:50

Re: Integrating with an existing site

#3 2013-03-14 09:01:47

Re: Integrating with an existing site

#4 2013-03-14 10:10:58

Re: Integrating with an existing site

#5 2013-03-14 10:21:45

Re: Integrating with an existing site

#6 2013-03-14 10:33:48

Re: Integrating with an existing site

#7 2013-03-14 10:46:23

Re: Integrating with an existing site

#8 2013-03-21 11:11:56

Re: Integrating with an existing site

#9 2013-03-21 11:35:19

Re: Integrating with an existing site

#10 2013-03-21 14:17:49

Re: Integrating with an existing site

#11 2013-03-21 14:50:53

Re: Integrating with an existing site

#12 2013-03-21 23:10:49

Re: Integrating with an existing site

#13 2013-03-21 23:13:20

Re: Integrating with an existing site

#14 2013-04-13 04:27:09

Re: Integrating with an existing site

Board footer