Basic Usage: Inserting content - Level-2/Transphporm GitHub Wiki

Inserting content

Transphporm allows you to insert content into any element on a page. Traditional template engines force you to place markers in the markup which will then be replaced (essentially using str_replace) within the content.

Transphporm takes a different approach and allows you to insert content into any element on the page using a CSS-like syntax. You don't need to provide special markers in the template, the template is plain old HTML without any special syntax. The elements on the page can then be targeted using CSS style syntax,

This allows an unprecedented level of flexibility. Rather than having to consider which parts of the content may be dynamic and adding things like {{user.name}} in the template at the correct position, these concerns can be ignored when designing the template and some static content inserted in its place. Transphporm can then replace any content on the page. This allows you to-reuse a template. Sometimes you might replace some content, other times you might use the default from the template!

Basic example

To insert content into an element, select the element with a CSS selector and then write some content to it:

page.xml

<!DOCTYPE html>
<html>
	<head>
		<title>My Website</title>
	</head>

	<body>
			
		<h1>My Website</h1>

		<main>

		</main>

	</body>

</html>

style.tss:

h1 {content: "Transphporm is awesome!" }

index.php

$template = new \Transphporm\Builder('page.xml', 'style.tss');
echo $template->output()->body;

Which will print:

<!DOCTYPE html>
<html>
	<head>
		<title>My Website</title>
	</head>

	<body>
			
		<h1>Transphporm is awesome!</h1>

		<main>

		</main>

	</body>

</html>

You can add as many rules to your tss file as you like. For example, changing style.tss to:

title {content: "Welcome to my website about Transphporm" }
h1 {content: "Transphporm is awesome!" }

Will now generate the HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my website about Transphporm</title>
	</head>

	<body>
			
		<h1>Transphporm is awesome!</h1>

		<main>

		</main>

	</body>

</html>

Concatenation

You can concatenate strings by setting multiple values for the content property:

h1 {content: "String 1 ", "String 2"; }

Will generate the html <h1>String 1 String 2</h1>

This is particularly useful when dealing with dynamic data (See the section on external data for a more information on this)

For example, you might want to generate a welcome message in the format <p>Welcome back, $name</p>. Assuming data(name) contains the name of the logged in user, you can use the following to display the welcome message:

p {content: "Welcome back, ", data(name); }

Note: This can also be done using the pseudo-element :after

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️