Jump to content
changwuf31

Dual themes site

Recommended Posts

Hello Everyone,

Just found out and installed process wire.

I'm wondering what is the best way to create a site that serve two purpose.

1. As a normal responsive site

2. As a touch screen kiosk site.

Any help appreciated :rolleyes:

Share this post


Link to post
Share on other sites

HI changwuf31

As kongondo says, ProcessWire leaves not only the markup to you but also the way you structure the site. That means all the tricks that are available to the static website developer are available to the ProcessWire developer, without having to try and convert it or bend it to a particular way of doing things.

I recommend that you not only read the ProcessWire tutorial linked to above, but also the one on how to install a CSS Framework http://processwire.com/docs/tutorials/installing-a-css-framework/ 

You might also want to read up about device detection and so on. Basically, anything you could do with a static site, you can do with PW without a learning curve.

Isn't that nice?

:)

Share this post


Link to post
Share on other sites

@changwuf31
 

I'm working on a touch screen club check-in kiosk at the moment. It's a fusion of Bootstrap 3 and uses the just-released MarkupCrossfade module to handle a full-screen background crossfaded slideshow where each slide is simply a page in ProcessWire. Because it's a kiosk I have control of the browser being used so I don't have to worry about cross-the-board browser compatibility.

Share this post


Link to post
Share on other sites

Thank you guys for the warm welcome :)

Maybe I'll rephrase the question.

What I'm looking for is actually, a way to serve two site (each with their own theme), but the database is the same.

The kiosk will only be accessed via intranet, and the responsive site will be on public network.

I'm looking for a way to share the code as much as possible, but I'd like different theme for the intranet and the responsive site.

@netcarver, nice module. Will definitely check it out later

Share this post


Link to post
Share on other sites

I'd probably take a shot at this by assigning the kiosk a fixed IP address and then adding a check to the top of each template file that looked at the $_SERVER['REMOTE_ADDR'] variable and compared it with the known kiosk IP.  A match should be coming from your kiosk so you could then serve content (eg. different style sheets) just for that machine.

Share this post


Link to post
Share on other sites

Given that the kiosk browser won't have an address bar, you could use a GET query string (like example.com/?kiosk=true) and use that to decide which template to show. That way, you wouldn't be relying on IP addresses and if anyone did attach that parameter in their regular browser, they would just get the kiosk version.

  • Like 1

Share this post


Link to post
Share on other sites

@netcarver, @davep: Thanks for the input, guys.

Now, after trying both the tutorial suggested by @kongondo and @joss,

my idea is that I'd like to serve kiosk site with "site/templates/kiosk",

and the responsive site with "site/templates/web".

Any idea on how I can achive this ?

Share this post


Link to post
Share on other sites

Template files, by default, need to be in the templates directory, not a subdirectory. But that does not mean you cannot include files from other directories.

I don't know what design differences you will make, but assuming that you have detected what device you are on (kiosk or other would be the best starting point), then just serve up the portion of the template that you need.

You could either use php to include another page (which could be in any directory for your organisational purposes - there is no technical reason for it to be anywhere particular) or just divide the page up and serve up only a portion.

For simplicity, I would probably go for the first.

So, for the home page, for instance, you have a template called home.php

The only code in this template would effectively say

<?php

// some detection stuff resulting in getting a $kiosk value -  I have no idea what!

 if($kiosk){ 
   include(./kiosk/home.inc);
 } else {
   include(./web/home.inc);

All your templates would basically have the same code. 

The .inc files would then contain everything your normal template file would.

Something like that.

  • Like 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...