Two templates for one page

[BFD Calendar]

For a list of film pages I'd like to have the ability to change between two views of the list: one as a list with clickable titles, one as a collage with clickable screenshots.

Is there a way to let the user switch from template 'films_list_titles' to 'films_list_images', both accessing the parent page 'films', or do I need other technology to manage this?

[LostKobrakai]

Within the single template file you can include different files in multiple fashions, these don't need different templates in the admin, as they use the same data. One example would be like this.

if( $view == "something"){
  include "view_1.php"; // Include titles view
}else{
  include "view_2.php"; // Include images view
}

[Ivan Gretsky]

Now you have to figure out how to change that $view variable...

It is possible to make those view-switch buttons a form that will set get or post variables which can be sent to the same page and caught on reload with this or this code. But you will probably want to make the layout change without the page reload via ajax which I do not know how to do. Waiting for someone with experience on that to step in ))

[Ivan Gretsky]

If you mean something like this go ask the author!

I'll be very interested to get the answer too so will watch on that topic.

[Jan Romero]

On the Rabotheater page the DOM doesn’t change at all. The buttons just change the class of the list, thereby changing the CSS. I would recommend this technique unless you want your views to show different data.

You can solve the different presentations either for the entire list, or for the individual films. I would probably go with the latter:

You have three templates for a film page:

• film.php – Just your regular page template to display a specific film. This is the only film template that is represented in the Admin.
• film_list_image.php – Only the markup for a list item showing the film and perhaps some relevant info in the “collage” style.
• film_list_title.php – List item markup including the film title  and perhaps release year, review score, or whatever.

On the list page, you render films using the $page->render() method with the chosen template as the first argument:

$film->render('film_list_image.php');

You can switch between styles by reloading the entire page with Post, Get or urlSegment input, and perhaps store the preference in $session or $user.

You could also load the films with AJAX and call $film->render() with the template there, then return the new markup to the list page. Of course, it might be better to return the film information in JSON format and build the presentation markup of choice with JavaScript on the list page.

As you can see, there isn’t one technique that fits all. The CSS option is definitely the fastest, simplest and arguably the best way, provided you can keep the markup the same between both list styles. Just have a look at the Rabotheater site in your Element Inspector. Wicked fast, no DOM changes except one class attribute, no additional server requests. You could even animate the change. I only go into the other stuff because it incorporates ProcessWire and because it answers your question about having two templates for one page.

[BFD Calendar]

The Rabotheater solution was exactly what I was thinking of. I gathered it would be along those lines but it's always good to be hinted in the right direction. The CSS is somewhat above my amateur capabilities for now. So I'll crack my head for a while and see how far I get by putting some examples on the dissecting table.

[MuchDev]

I have played around with different views using just some basic jquery. If you are feeling a bit overwhelmed just start small. Here is a fiddle I found that really simplifies the process of switching from 1 class to another. 

http://jsfiddle.net/v57JF/

Basically you just need to write the css and have jquery listen for a on('click') event on your buttons. When clicked apply class to all divs that you want to be formatted differently. Having settings stay between page refreshes and next pages is a bit more tricky as you would have to most likely use some ajax as they said, but if you getting looking pretty, you should be able to build on that fairly easily. 

[ralberts]

For the Rabotheater website we implemented the JS / CSS method described by Jan Romero above. It's basically as simple as changing the outer CSS class of the items on mouseclick (as described by MuchDev). The CSS takes care of the rendering of said class and displays a listview or a gridview depending on the outer class.
 

Using Firebug in Firefox (or something equivalent for other browsers) you can easily see changes made to the source on toggling between list and grid view. And you can also see which CSS renders the items.

[Joss]

Part of the trick here is not loading too much that is, perhaps, unused.

If the layout differences are minor and both have exactly the same content, then changing the outer class as mentioned above is fine.

However, if the the change is major and perhaps does not include all the same information, then you may want to play with some Ajax. Obviously, this has issues with people without Javascript.

So, in this case you need to call the information in as a page for the ajax to work. (I think).

The template+page that you are calling would have two container divs (partials), each containing your different layouts, image sizes, data variations or whatever.

Using the ajax .load() function, you would call in the page and also pass a parameter for the partial. 

How this would work into your system would take a bit of working out, but it does mean that you would reduce overhead on a very complex system.

[BFD Calendar]

Part of the trick here is not loading too much that is, perhaps, unused.

That is definitely a good point.

http://jsfiddle.net/v57JF/ looks fine but 1. it doesn't work when used, 2. it has identical data in grid and view while I want a grid with images only and a list with title, duration, year,....

Rabotheater and Firebug are somewhat above my skills to comprehend and adapt. Same for another example I was recommended. Quite a few container and list classes are already defined by Processwire so it's a bit of a Mikado game when throwing the whole lot into an existing site.

I admit my style tends to be more oldskool Landrover owner instead of nowadays programmer, so I'll rest my case for a while now and and let it simmer until the sky brightens and a miraculous insight is shining right in front of me. Then, like a thief of fire I'm sure I'll get there.

All the ideas above have definitely helped me to wander off in the right direction.

[BFD Calendar]

I have played around with different views using just some basic jquery. If you are feeling a bit overwhelmed just start small. Here is a fiddle I found that really simplifies the process of switching from 1 class to another. 

http://jsfiddle.net/v57JF/

Basically you just need to write the css and have jquery listen for a on('click') event on your buttons. When clicked apply class to all divs that you want to be formatted differently. Having settings stay between page refreshes and next pages is a bit more tricky as you would have to most likely use some ajax as they said, but if you getting looking pretty, you should be able to build on that fairly easily. 

Unfortunately the javascript on the fiddle page was not complete.... it took me a while to figure that out.

And yes, the grid view should have nothing else but the screenshot while the list view should have title, duration, year etc.

To me Ajax was predominantly known as a football club from Amsterdam. I kind of get the the idea what Joss is saying, making it work however....

[Joss]

One thing I will say, if there are not huge differences between the pages, don't lose a lot of sleep over ajax. When it comes into its own is where you have a lot of information and things like different sized images and so on and the list is very long - at that point you don't want to be loading up extra bits.

But, as I say, if the differences are minimal, stick to css!

[BFD Calendar]

Ok, what would you recommend if I want a grid with only images 400x300 and nothing else, and a list with images 40x30 + number + title + duration + year? There will be about 100 films.

This is the script to switch between grid and list:

<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('button').on('click',function(e) {
    if ($(this).hasClass('grid')) {
        $('#gridlist ul').removeClass('list').addClass('grid');
    }
    else if($(this).hasClass('list')) {
        $('#gridlist ul').removeClass('grid').addClass('list');
    }
});
});//]]>  
</script>

and the css

#gridlist ul { list-style: none; }
#gridlist .buttons { margin-bottom: 20px; }

#gridlist .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }

#gridlist .grid li { float: left; width: 20%; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding: 20px; }

So I reckon on the template I have a div for grid view and a div for list view where the script switches from one to the other?