Dynamic header

tommyw · 2010-06-17 21:10:29

I’m looking to convert parts of an existing site that’s currently built with PHP and Smarty to a CMS. So, I’m checking out textpattern to see if it fits my needs.

For those that know Smarty, in the PHP files we currently do something like this:

$styles[] = 'css1.css';
$styles[] = 'css2.css';
$doc->assign('styles', $styles);
$scripts[] = 'script1.js';
$scripts[] = 'script2.js';
$doc->assign('scripts', $scripts);
$doc->display('some_page.tpl');

Within some_page.tpl, I’ll call header.tpl, and in <head> section it’ll step through those 2 css files and link to them, and then the 2 js files and link to them.

Is there a way to accomplish a dynamic header like this in txp without having to dirty up the page and form files with global php? I’d want something like…

header form:

<html>
<head>
<txp:each styles>
<link href="<txp:style>.css">
</txp:each>
</head>
<body>

some_page:

<txp:set styles="css1|css2" />
<txp:output_form form="header" />
some content

and this would output to:

<html>
<head>
<link href="css1.css">
<link href="css2.css">
</head>
<body>
some content

I’ve not gotten that deep into learning txp tags so those tags probably don’t even exist, but hopefully as pseudo code it makes sense? =P

Any way for me to do this with txp? As a note, the css and js files will be in an svn repo and not in txp. We want to use a CMS for certain pages and want the least amount of duplication as possible (will clearly have to duplicate header and footer files).

Thanks for any help :D

-Tommy

Timid&friendly · 2010-06-18 04:12:18

Without getting into code example- because your example justa rough idea- txp can do this easily. I not an expert but a solution is simple enough to achieve, even combining external php includes and static external css en js so as not to duplicate certain code. (I personally never use txp css internally alway prefering external editing.)

The only thing i don’t know about is the SVN repo and how txp works with that.

tommyw · 2010-06-18 21:18:36

Timid&friendly wrote:

Without getting into code example- because your example justa rough idea- txp can do this easily.

I was hoping someone could provide me with a code example that accomplishes what the pseudo-txp code I provided above would accomplish. I kept my code short because I just need to know how that functionality works. If txp can do this easily, can you throw out some quick code that would give me a basic idea of how it works? I’ve not been able to find this exact functionality in the documentation so this would help me out a lot! :)

Ideally it would be straight txp code – in the parent file, I define which stylesheets or js files I want to include, and in the child file, it loops through them and outputs the html that links to them. I could do this if I throw in some php, but I’m trying to keep php out of my html files as much as possible.

GugUser · 2010-06-19 12:58:26

You can put in the page template:

<txp:output_form form="head" />

Then make a form “head” with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="language" content="en" />
<title><txp:site_name /></title>
<meta name="description" content="some content or other solution" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/css/css1.css" />
<link rel="stylesheet" type="text/css" href="/css/css2.css" />
<link rel="stylesheet" type="text/css" href="/css/css3.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/css/ie6-7.css" /><![endif]-->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/js2.js"></script>
</head>

In the root from your server you need the folders css and js with the files.

Gocom · 2010-06-19 14:43:29

To expand GugUser’s great example, TXP does have some tags which can be easily used to expand/modify forms’ content, without having to create new forms for different situations:

TXP doesn’t exactly provide loop/repeat/each functionality out of the box, but you can probably replicate same with conditionals. If you want to do it exactly like that with the loop and such, you can use a plugin. For example rah_repeat does exactly that.

Let’s give a small example, how the thing could be done with variables and rah_repeat:

<txp:variable name="scripts" value="jquery,lightbox,default" />
<txp:variable name="styles" value="default,typo" />
<txp:output_form form="header" />

Then in the form header:

[...]
<head>
	<txp:rah_repeat value='<txp:variable name="scripts" />'>
		<script type="text/javascript" src="/path/to/<txp:rah_repeat_value />.js" />
	</txp:rah_repeat>
	<txp:rah_repeat value='<txp:variable name="styles" />'>
		<link rel="stylesheet" type="text/css" href="/path/to/<txp:rah_repeat_value />.css" />
	</txp:rah_repeat>
</head>
<body>
[...]

maniqui · 2010-06-19 14:54:32

Hi Tommy,

I was reserving the contents of this post for a more elaborated TXP Tip, but now that you have asked it, I’ll have to post it here :)
To accomplish what you are looking for, you could rely in the magic of <txp:yield />, a tag which works in tandem with <txp:output_form />, when used as a container tag.

For example, this is the header form I used on a recent project:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<txp:hide>Following yield is used to add, at least, three forms: meta, css and js</txp:hide>
<txp:yield />

</head>

Then, on some of my page templates I’ve this code at top:

<txp:output_form form="header">
  <txp:output_form form="meta" />
  <txp:output_form form="css" />
  <txp:output_form form="js" />
</txp:ouput_form>
... and body, contents, etc, footer...

If you have read what <txp:yield /> does, and follow the code above, you will know by now that the above snippet, when processed by TXP, will output something like this (it will depend of the content of each form: meta form, css form, and js form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta ... />
<meta ... />
<title>My super site</title>
<meta ... />

<link rel="stylesheet" ... />
<link rel="stylesheet" ... />

<script type="text/javascript" ...></script>
<script type="text/javascript" ...></script>

</head>

Cool!
But that’s just the tip of the tip of this tip.
Let’s take a look at the real code inside my css and js forms (let’s discard meta, as in this particular site, I’ve not did the following trick on that particular form).

My css form:

<link rel="stylesheet" ... />
<link rel="stylesheet" ... />


<txp:yield />

My js form:

<script type="text/javascript" ...></script>
<script type="text/javascript" ...></script>

<txp:yield />

As you can see, those two forms have their own <txp:yield />, which is waiting to be populated, when needed, which enable us to have more TXP fun.
On some other page templates, I have this code at top:

<txp:output_form form="header">
  <txp:output_form form="meta" />
  <txp:output_form form="css">
    <link href="/css/some-extra-styles.css" rel="stylesheet" type="text/css" />
  </txp:ouput_form>
  <txp:output_form form="js" />
</txp:ouput_form>

As you can see, it’s very similar to what I’ve in other page templates, but in this case, I’m using the container method not just for header form but also for css form, which enables me to add some extra styles sheet for a particular page template.
Once this is rendered, the output will be something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta ... />
<meta ... />
<title>My super site</title>
<meta ... />

<link rel="stylesheet" ... />
<link rel="stylesheet" ... />

<link href="/css/some-extra-styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" ...></script>
<script type="text/javascript" ...></script>

</head>

As you can see, there is our extra style sheet.

Similarly, you can do the same with the js form.

<txp:output_form form="header">
  <txp:output_form form="meta" />
  <txp:output_form form="css">
  <txp:output_form form="js">
     <script src="/js/some-cool-script.min.js" type="text/javascript"></script>
  </txp:ouput_form>
</txp:ouput_form>

Which will be rendered like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta ... />
<meta ... />
<title>My super site</title>
<meta ... />

<link rel="stylesheet" ... />
<link rel="stylesheet" ... />

<script type="text/javascript" ...></script>
<script type="text/javascript" ...></script>

<script src="/js/some-cool-script.min.js" type="text/javascript"></script>

</head>

Cool!
But, again, this is just the tip of this tip.
Imagine what is possible if you add some TXP army knife plugins like smd_if, smd_each and smd_multi_choice (must have on any TXP toolbelt).

For example, you may prefer/need/want that if the yield is being used, then, to make it override the default output for its form.
For example, in the css form, we do some magic with smd_if (conditionals on steroids)

<txp:smd_if field="NULL" operator="eq" value='<txp:yield />'>
<!-- if the yield is empty 
(that is, if the output_form tag was used in its self containing mode (<txp:output_form />)),
then, output the following:
-->

<link rel="stylesheet" ... />
<link rel="stylesheet" ... />

<txp:else />
<!-- if the yield is *not* empty, then return the yield -->
  <txp:yield />
</txp:smd_if>

Another example: similarly to the pseudo code in your first post, you could do something like this:

On your page template:

<txp:output_form form="header">
  <txp:output_form form="meta" />
  <txp:output_form form="css">
  extra-styles, widget-styles, super-styles
  </txp:ouput_form>
  <txp:output_form form="js" />
</txp:ouput_form>

Then, on your css form, you could use smd_each to do something like this:

<link rel="stylesheet" ... />
<link rel="stylesheet" ... />

<txp:smd_each type="fixed" include="styles:<txp:yield />" paramdelim=",">
  <link rel="stylesheet" href="/css/{smd_var_value}.css" />
</txp:smd_each>

(Refer to smd_each documentation for more details on plugin options).

I’ll stop by now, but will let you know that there are more amazing and nasty uses and tricks for <txp:yield />.
Let me know if this post made sense.

maniqui · 2010-06-19 15:36:52

Oh, Gocom was faster, and his example (based on rah_repeat) is very similar to the smd_each example in my post.
Gocom uses a txp:variable to populate the values and feed them to rah_repeat, and I used the txp:yield. One advantage of using the yield is that its scope is just the form where it’s being used. It’s created and then, destroyed.

Gocom · 2010-06-19 15:50:34

maniqui wrote:

Oh, Gocom was ~~faster~~

Ninja ;-)

tommyw · 2010-06-21 16:20:31

Nice, both of those examples do exactly what I was looking for. Thanks for the help guys :D

Textpattern CMS

Textpattern CMS support forum

#1 2010-06-17 21:10:29

Dynamic header

#2 2010-06-18 04:12:18

Re: Dynamic header

#3 2010-06-18 21:18:36

Re: Dynamic header

#4 2010-06-19 12:58:26

Re: Dynamic header

#5 2010-06-19 14:43:29

Re: Dynamic header

#6 2010-06-19 14:54:32

Re: Dynamic header

#7 2010-06-19 15:36:52

Re: Dynamic header

#8 2010-06-19 15:50:34

Re: Dynamic header

#9 2010-06-21 16:20:31

Re: Dynamic header

Board footer