Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.
Multiple/Styles : Suggestions of Best Practice?
Goto page 1, 2  Next
 
Post new topic   Reply to topic    Smarty Forum Index -> General
View previous topic :: View next topic  
Author Message
Amadiere
Smarty Rookie


Joined: 20 Feb 2006
Posts: 5

PostPosted: Mon Feb 20, 2006 2:23 pm    Post subject: Multiple/Styles : Suggestions of Best Practice? Reply with quote

I'm currently involved with a project at my work which requires multiple ways of viewing the same information (e.g. Printable versions, Standard versions and one's with Javascript as examples). This obviously, lead me to Smarty.

At this point, I should mention that I am new to Smarty (though not to PHP) and therefore, some of my questions/ideas will be fairly newbie-ish. Feel free to correct me, I won't take offence (usually Twisted Evil ).

I've been reading around and I am unable to answer my questions completely, nor am I able to satisfy my desire for perfection (aim for perfection and excellence comes naturally...).

What is the best structure to use to create a multi-templated style?
I am taking this from a purely structural standpoint currently because of my lack of knowledge depth with Smarty. But this is my idea:

Code:
/  - root of my application
/cache/  - template cache folder
/compile/ - originally "template_c" but I didn't like it.
/config/  - config dir?

/templates/
/templates/red/
/templates/green/
/templates/blue/

/html/ - the webroot of my application
/include/ - the main bulk of my php code.


Am I taking the correct approach? I took the liberty of having one cache/compile/config directory for all the styles - is this a bad (unworkable?) approach?

I considered having the following structure, but ruled it out as it seemed repeatitive (maybe this is more ideal however), though there were no real facts behind me deciding this.
Code:

/html/  - webroot
/include/  - php code

/templates/red/template/
/templates/red/cache/
/templates/red/compile/
/templates/red/config/

/templates/green/template/
/templates/green/cache/
/templates/green/compile/
/templates/green/config/

/templates/blue/template/
/templates/blue/cache/
/templates/blue/compile/
/templates/blue/config/

The latter of the suggestions proves easier for adding more styles.

Programmatically, I am going to determine which template would need to be shown (e.g. user preferences and page options). Then when smarty is initialised, setup the appropriate directories. Is this method correct? I've read around and spotted comments regarding "Applications" being setup and these serving the purpose of allowing multiple styles. A quick browse through the documentation didn't throw any pages out that were relevant (maybe it's WoodForTree's Syndrome).

If anyone could spare the time to comment on, suggest improvements (and why) to my design's I would be very grateful. Or if it would be better to say "RTFM", throw me a link or two Cool .

Thanks,

edit: p.s. I am currently writing this before I have undertaken any major coding. I have little testing scripts etc, but no real foundations have been laid. So I cannot say with any confidence that I understand the potentials and limits of Smarty.
Back to top
View user's profile Send private message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7284
Location: Lincoln Nebraska, USA

PostPosted: Mon Feb 20, 2006 4:57 pm    Post subject: Reply with quote

There are many ways to skin a cat, but I'll explain my setup. What you are calling a style, I call a theme. Actually a lot of what you are going to see here are my own file/dir naming conventions, use whatever works for you.

I use only one set of Smarty directories (templates, configs, compile, cache) per website (Apache virtual host.) There is a subdir for each theme. There are basically four top-level areas for each theme: template files, config files, image files and CSS files. The themed template files live within $smarty->template_dir/THEME, and the themed config files live within $smarty->config_dir/THEME. Images and CSS files live within DOCROOT/images/THEME and DOCROOT/css/THEME respectively.

I use a reserved theme name of shared for anything sharable between themes.

Example PHP:

Code:
// switchable themes managed with cookies
$theme = isset($_COOKIE['theme']) ? $_COOKIE['theme'] : 'default';

$smarty->assign('theme',$theme);
$smarty->display("$theme/init.tpl");


Example template:

Code:

{config_load file="shared/init.conf"} {* shared configs *}
{config_load file="$theme/init.conf"} {* themed configs *}
<link rel="stylesheet" type="text/css" href="/css/shared/init.css"> {* shared CSS *}
<link rel="stylesheet" type="text/css" href="/css/$theme/init.css"> {* themed CSS *}
{include file="shared/foobar.tpl"} {* shared template *}
{include file="$theme/foobar.tpl"} {* themed template *}
<img src="/images/shared/trashcan.gif"> {* shared image *}
<img src="/images/$theme/masthead.gif"> {* themed image *}



The default theme is hard coded in this example, but I actually use a variable pulled from a Smarty config file.

My setup is actually a tad more complicated, but that should give you some ideas.


Last edited by mohrt on Tue Jan 20, 2009 5:14 pm; edited 2 times in total
Back to top
View user's profile Send private message Visit poster's website
Amadiere
Smarty Rookie


Joined: 20 Feb 2006
Posts: 5

PostPosted: Mon Feb 20, 2006 5:40 pm    Post subject: Reply with quote

That's just the type of reply I was looking for!
The setup you have there seems to make a lot of sense and even answers me a few questions I was starting to form about how to deal with sharing of templates.

Judging by your comments and ideas, my first suggestion was almost right. It just wasn't fully formed, nor detailed in some areas. I'm glad I was at least vaguely on the right track! Now, I plan something along the lines of:
Code:

-- Within the Webroot ---
/html/
/html/images/red/
/html/images/blue/
/html/images/green/
/html/css/red/
/html/css/blue/
/html/css/green/

-- Outside of the Webroot --
/cache/
/compile/

/config/red/
/config/blue/
/config/green/

/templates/red/
/templates/blue/
/templates/green/

And if (and this is my smarty-newbie head speaking) cache and compile require seperate directories for each theme, then it would be correct to add them as the templates and config have.

With regards to the shared folder, I had contemplated placing them directly in the /templates/ folder (ie. not /templates/shared/ ). However, I think I may have struggled when things required me to organise them a little bit better - I think you converted me on that aspect also.

Thanks very much for both your time and effort in the reply. It's provided me with more than enough to think about and is very much appreciated!
Back to top
View user's profile Send private message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7284
Location: Lincoln Nebraska, USA

PostPosted: Mon Feb 20, 2006 7:57 pm    Post subject: Reply with quote

Quote:
And if (and this is my smarty-newbie head speaking) cache and compile require seperate directories for each theme, then it would be correct to add them as the templates and config have.


You only need one compile_dir, one template_dir, one cache_dir and one config_dir. Since the different theme names are right in the filepath, Smarty does all the work internally to keep things separated. You should never have to touch files inside the compile_dir or cache_dir.
Back to top
View user's profile Send private message Visit poster's website
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7284
Location: Lincoln Nebraska, USA

PostPosted: Mon Feb 20, 2006 9:28 pm    Post subject: Reply with quote

While I'm at it, I'll go one level deeper on the file structure I use. This gets pretty intense, but is very useful information I've fine tuned over years of use.

You will likely have different modules on your site, such as a calendar module and classifieds module. Within each theme I have a separate subdir for each module. This subdir contains items that are specific for the module. One slightly tricky aspect of this setup is the templates and their structure and display order.

You are going to have portions of the template that you want controllable per module, such as module navigation. I call these locations. There is a top-level template that defines the basic layout of the theme. I call this layout.tpl.

There will be times you don't want to display layout.tpl, such as when displaying a single image, or a printable page. This is facilitated by a cascading file structure and a page variable.

Example:

calendar.php:

Code:
// calendar module, set up theme and mod values (hard coded for example)
$smarty->assign('mod','calendar');
$smarty->assign('theme','blue');
$smarty->assign('page','main');
$smarty->display("$theme/$mod/init.tpl");


$theme/$mod/init.tpl:

Code:
{if $page eq "image"}
   {include file="$theme/$mod/image.tpl"}
{if $page eq "printable"}
   {include file="$theme/$mod/printable.tpl"}
{else}
   {include file="$theme/layout.tpl"}
{/if}


$theme/layout.tpl:

Code:
{include file="$theme/header.tpl"}
<table>
  <tr>
    <td>{include file="$theme/$mod/location_left.tpl"}</td>
    <td>{include file="$theme/$mod/location_main.tpl"}</td>
    <td>{include file="$theme/$mod/location_right.tpl"}</td>
  </tr>
</table>
{include file="$theme/footer.tpl"}


$theme/header.tpl:

Code:
{config_load file="shared/init.conf"}
{config_load file="$theme/init.conf"}
{config_load file="$theme/$mod/init.conf"}
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/shared/init.css">
    <link rel="stylesheet" type="text/css" href="/css/$theme/init.css">
    <link rel="stylesheet" type="text/css" href="/css/$theme/$mod/init.css">
    <title>Calendar</title>
  </head>
  <body>


(I know this example isn't great, you probably don't want to wrap your main layout in an HTML table. But for the purpose of this example, it is dumbed down a bit.)

So the basic flow of the file structure is to enter the $theme/$mod/init.tpl from the PHP script. This template determines if we are loading an image/printable page, or the default layout.tpl page (controlled by the page value assigned from the calendar module.) layout.tpl does the chore of forming the page for the site. It includes theme-level templates plus all location templates in the module subdir. This particular theme has three locations: left, main and right.

The idea behind location templates is to have controllable content per module. In this example we have a location_left.tpl. Maybe we want a calendar event list in that location when in the calendar module, and a recent classifieds list when we are in the classifieds module. Since each module has its own location_left.tpl file, this is easy.

Each theme can have any number of location templates, but it must contain at least one, which I call location_main.tpl. Beyond that you can have as many as you want, but each module subdir must contain all location templates included by layout.tpl. Each module directory usually has template files unique to the module (maybe calendar has a view_event.tpl), and those are included from it's location_main.tpl file.

I use config files to hold locale-specific texts and file paths that differ from the development and production environments. You could split up your configs to lang_en.conf, lang_de.conf, etc, then control what lang file is loaded by an assigned variable.

There are many many other specifics that are just too numerous to list here. This is a lot to swallow, but for enterprise-level applications a structure like the one above is invaluable. Once you put it to use you should get the hang of it quickly and tweak/expand to your liking.

Have fun!


Last edited by mohrt on Tue Jan 20, 2009 5:17 pm; edited 2 times in total
Back to top
View user's profile Send private message Visit poster's website
Amadiere
Smarty Rookie


Joined: 20 Feb 2006
Posts: 5

PostPosted: Mon Feb 20, 2006 11:58 pm    Post subject: Reply with quote

You've actually covered some of the thoughts I had while I was out, with regards to the internal templating structure. I'm familiar with the concept (and to some degrees the practice) of nesting templates and it seems a fairly robost way of creating things.

e.g. I created a "related links" template. All the logic exists in here to display related links however is best for the current template. This tpl can then be included within it's appropriate (for lack of a better word) sub-layout folder "location_left.tpl" possibly - which would be done inside the templating layer. (This example may be too diluted I think, but my emphasis is ensuring that my programming layer does not determine how a page should be designed. The layout and locations .tpl's in the presentation layer will do that).

I'm liking Smarty more and more and I know I'm going to get told off by my boss for being over passionate about the software i'm writing... but I just can't help it at times! Shocked
Back to top
View user's profile Send private message
iriePub
Smarty Regular


Joined: 16 Jun 2006
Posts: 53

PostPosted: Sat Jun 17, 2006 11:56 am    Post subject: Reply with quote

I think, it's better to place css/images/configs/templates and javascript each in a subdir of the themes dir, so that you can share it later.

I descripbed it here:

http://www.phpinsider.com/smarty-forum/viewtopic.php?t=8161

I opened this thread to hear your opinions, so please tell me, what you think about it!!
Back to top
View user's profile Send private message
mateusfig
Smarty Rookie


Joined: 27 Aug 2006
Posts: 24

PostPosted: Sat Sep 09, 2006 2:36 pm    Post subject: Reply with quote

Hello, i posted this in another thread but just 1 guy replied me and he said he use this structure (except he dont use Modules folders). seems other thread is a little died and, well, this one here is a sticky...more properly


--------------------------------------------------
what about this structure:

Code:

-|project_root
--|LIB
---| ...
---| ...
---| ...
--|MODULES
---|mod_1
---|mod_2
--|TEMPLATES
---|tpl_cache
---|tpl_config
---|tpl_compile
--|THEMES
---|theme_1
----|modules
-----|mod_1
------|style
------|js
------|templates
------|images
-----|mod_2
------|style
------|js
------|templates
------|images
---|theme_2
----|modules
-----|mod_1
------|style
------|js
------|templates
------|images
-----|mod_2
------|style
------|js
------|templates
------|images



I'd like opnions on this structure i created to organize a multi-theme website. What is wrong, etc...

Into MODULES folder, there goes only the php files for each module. The js, css (style), images needed for the entire website was placed into LIB (classes, fucntions, js, css and packages like smarty). Then it means everything is common is in LIB and everything regarding a only module, is into THEME/theme_name/modules/mod_name

thanks in advance
Mateus
________
Bmw R 1200 Rt History


Last edited by mateusfig on Sun Feb 13, 2011 2:58 am; edited 1 time in total
Back to top
View user's profile Send private message
bj9
Smarty Regular


Joined: 08 Sep 2006
Posts: 57

PostPosted: Wed Sep 13, 2006 4:42 pm    Post subject: Reply with quote

their, this guy does it the same way, I do it:
http://www.phpinsider.com/smarty-forum/viewtopic.php?t=8161
I tzink, it's really good!!
Back to top
View user's profile Send private message
Ancient
Smarty Pro


Joined: 07 Jul 2007
Posts: 197
Location: Omaha, Nebraska, United States of America

PostPosted: Sun Nov 11, 2007 2:10 am    Post subject: Reply with quote

Wouldn't defining the style_path be as good?
Code:
if($_SESSION['style'])
 {
   $style_path = $_SESSION['style'];
 }
else{
   $style_path = 'Default';
 }
$smarty->display($style_path . '/' . 'template.tpl');

_________________
Smarty all the way.
Back to top
View user's profile Send private message Send e-mail MSN Messenger
bladetmc
Smarty n00b


Joined: 20 Dec 2007
Posts: 3

PostPosted: Sat Dec 29, 2007 12:48 am    Post subject: Reply with quote

Well closely from my opinion.

No need to set templates into public dir, try to put the minimal amount of info into your public dir.

Here is my way of doing it (a short overview). (I dont do every button themed, but the whole looks, no need to make seperate config stuff).

Code:
/config/
/lib/
/modules/
/classes/
/template_c/
/public_html/
/public_html/index.php
/public_html/js/
                 /{$styles}/css/
                 /{$styles}/
/public_html/images/
/public_html/imagestore/
/templates/{$styles}/


Where styles the name is of your style. images is just images u use for cms/boxes (used in every theme, no need to keep copies). imagestore is my i can upload myself place, same for filestore, but then shielded from public and used for files).

From your config file comes the default, called 'default' or whatever u like, the session after user is choosing or logging in that will change (if available).

Define some constants, but i dont use them alot, only framework path and assigning config data to my smarty postfiler, that handles style vars like ##style##.

Since u have locations defined in your application, only need to make $style available to your php files and smarty, the rest is css/html.
Back to top
View user's profile Send private message
TakingSides
Smarty Rookie


Joined: 11 Dec 2010
Posts: 30

PostPosted: Tue Aug 16, 2011 8:04 am    Post subject: Reply with quote

I thought I would extend this topic with some further information.

Quote:
You only need one compile_dir, one template_dir, one cache_dir and one config_dir. Since the different theme names are right in the filepath, Smarty does all the work internally to keep things separated. You should never have to touch files inside the compile_dir or cache_dir.


The only time I have ever changed the compile_dir is when working with multiple languages.

when you have 1 template, a pre-compile tag replacement, and 5 languages. You need to change the default functionality in Smarty:

/Smarty/generated/templates_c/<Theme_Name>/en_GB/
/Smarty/generated/templates_c/<Theme_Name>/nl_NL/
/Smarty/generated/templates_c/<Theme_Name>/de_DE/

Since you do not want to override your english translated hompage into French, do you?

--

Please note the below information has not been tested, or checked (an assumption was made), any constructive criticism is welcomed.

Many development environments love to have widget based MVC's (From experience in enterprise software companies), and Smarty offers the simplest widget manipulation. Technically I would create a new directory called widgets, and enable this as a safe Smarty plugin directory; but for the purpose of this example...

1. Create a file:

i. ./Smarty/plugins/function.widget_breadcrumbs.php
ii. ./Smarty/plugins/function.widget_members_status.php
iii. ./Smarty/plugins/function.widget_sidemenu.php

2. Create your function:a

Code:
function smarty_function_widget_breadcrumbs($params, $smarty) { ...
function smarty_function_widget_members_status($params, $smarty) { ...
function smarty_function_widget_sidemenu($params, $smarty) { ...


You can also have a widgets, template directory; and do the following....

Code:
function smarty_function_widget_members_status($params, $smarty) {
    // your default values
    $default_values = array('opt1' => 1,
                                        'opt2' => 2
                                        );
   
    // set options as default values, override with $params from Smarty.
    // this is like jQuery's, $.extend( Array1, Array2 ); when creating custom plugins.
    $options = array_merge($default_values, $params);

    /* ... Your Code Goes Here ... */

    $smarty->parent->assignWidget('widgetName', array('widgetVar1' => $value,
                                                                                  'widgetVar2' => $anotherValue
                                                                                  ));
   
    // Now you will need to create a class, and extend the Smarty class
    // see the example below to accomplish this.
    $smarty->parent->displayWidget('members_status');
}


Finally extending the Smarty class...

Code:
final class TemplateEngine extends Smarty {
   
    public function __construct() {
        // standard PHP5 class inheritance, execute the original constructor....
        parent::__construct();
   
        // configure your own custom stuff here overriding Smarty's default class data
        // implement your own Security Policy Class?
    }
   
    public function assignWidget($widget, $data) {
        $this->assign($widget, $data);
    }

    public function displayWidget($widget) {
        // change the directory to the widgets....
        $this->compile_dir = '/var/www/site.co.uk/production/lib/Smarty/generated/widgets_c'
        $this->templates_dir = '/var/www/site.co.uk/production/widgets'
       
        // return the template for the widget
        return $this->fetch($widget . '.tpl');
    }

}


3. Use in Smarty:

Code:
<div id="leftMenuArea">
    {widget_sidemenu attr1="some_value" attr2="option2"}
</div>
Back to top
View user's profile Send private message
rodneyrehm
Administrator


Joined: 30 Mar 2007
Posts: 698
Location: Germany, border to Switzerland

PostPosted: Tue Aug 16, 2011 8:32 am    Post subject: Reply with quote

TakingSides wrote:
Quote:
You only need one compile_dir, one template_dir, one cache_dir and one config_dir. Since the different theme names are right in the filepath, Smarty does all the work internally to keep things separated. You should never have to touch files inside the compile_dir or cache_dir.


The only time I have ever changed the compile_dir is when working with multiple languages.

when you have 1 template, a pre-compile tag replacement, and 5 languages. You need to change the default functionality in Smarty:

/Smarty/generated/templates_c/<Theme_Name>/en_GB/
/Smarty/generated/templates_c/<Theme_Name>/nl_NL/
/Smarty/generated/templates_c/<Theme_Name>/de_DE/

Since you do not want to override your english translated hompage into French, do you?


Have a look at $compile_id. It allows you to have multiple (differently) compiled versions of the same template. You wouldn't need to extend Smarty to accomodate for the above directory structure - Smarty can do it for you.
_________________
Twitter
Back to top
View user's profile Send private message Visit poster's website
TakingSides
Smarty Rookie


Joined: 11 Dec 2010
Posts: 30

PostPosted: Tue Aug 16, 2011 8:38 am    Post subject: Reply with quote

globe wrote:
TakingSides wrote:
Quote:
You only need one compile_dir, one template_dir, one cache_dir and one config_dir. Since the different theme names are right in the filepath, Smarty does all the work internally to keep things separated. You should never have to touch files inside the compile_dir or cache_dir.


The only time I have ever changed the compile_dir is when working with multiple languages.

when you have 1 template, a pre-compile tag replacement, and 5 languages. You need to change the default functionality in Smarty:

/Smarty/generated/templates_c/<Theme_Name>/en_GB/
/Smarty/generated/templates_c/<Theme_Name>/nl_NL/
/Smarty/generated/templates_c/<Theme_Name>/de_DE/

Since you do not want to override your english translated hompage into French, do you?


Have a look at $compile_id. It allows you to have multiple (differently) compiled versions of the same template. You wouldn't need to extend Smarty to accomodate for the above directory structure - Smarty can do it for you.


Very snazzy, i forgot about the $compile_id feature. For the benefit of anyone else:

$compile_dir = '/var/www/site.co.uk/production/lib/Smarty/generated/templates_c';
$compile_id = 'en_GB';

Smarty will automatically create the Theme directories? In much the same way as /themes/<name>/templates_here

Displayed using:
$smarty->display('index.tpl', 'en_GB');

Would this be correct?
Back to top
View user's profile Send private message
rodneyrehm
Administrator


Joined: 30 Mar 2007
Posts: 698
Location: Germany, border to Switzerland

PostPosted: Tue Aug 16, 2011 8:44 am    Post subject: Reply with quote

TakingSides wrote:
Smarty will automatically create the Theme directories? In much the same way as /themes/<name>/templates_here


yup, at least close enough…

TakingSides wrote:
Displayed using:
$smarty->display('index.tpl', 'en_GB');
Would this be correct?


no, second parameter of display is the cache_id, third is the compile_id:
Code:
$smarty->display('index.tpl', null, 'en_GB');

_________________
Twitter
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    Smarty Forum Index -> General All times are GMT
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP