Guides
Tutorials
Pop Tags

Full Control

Making static html dynamic with no compromises.

Webpops template engine, PopTags, gives you full control over your HTML markup when rendering dynamic content. Here's how it works:

Start by hardcoding a simple HTML5 document in the index.tpl of a blank new project:

<!DOCTYPE html>
<html>
<head>
<title>What goes in, comes out</title>
</head>
<body>
<h1>When we say full control, we mean full control</h1>
</body>
</html>

Next, make the contents of that h1 dynamic with some Pop Tags.

<!DOCTYPE html>
<html>
<head>
<title>What goes in, comes out</title>
<pop:admin />
</head>
<body>
<pop:content>
<h1><pop:title /></h1>
</pop:content>
</body>
</html>

The <pop:content> tag takes a look at the current URL, and then pulls the content from the corresponding section into the template. In this case, it's the top level section of the site, aka Home. Use the <pop:title /> tag to render the title field of the content inside of th the h1 tag.

Pop tags behave like XHTML tags — if you open one, make sure to close it too.

The <pop:admin /> in the <head> loads some javascript to enable admin mode when anyone with content management permissions accesses the site with  "/admin" added to the end of the URL.

Next go into admin mode and click "Edit" in the top bar. Change title field of your home page by clicking on the h1 showing the text "Blank Project" and use the onsite editor to change it to "Simple Example".

Simple content editing

Check out our On-Site Editing screencast to learn more about admin mode.

Next, add a dynamic image to your homepage. Inside your project dashboard there is a “Content” tab, you should see the top level section with the name of "Simple Example". If you click on it, you'll see the “edit fields” button at the top of the content architect tool. This lets you customize the fields associated with your content.

Here, delete the default body field of the section and add a new image field with the name “image”. Click on the overlay to save your new field and then click on the new image field and upload an image.

Form and Form Builder

Now you use <pop:image /> within <pop:content> to render the image you uploaded.

<!DOCTYPE html>
<html>
<head>
<title>What goes in, comes out</title>
<pop:admin />
</head>
<body>
<pop:content>
<h1><pop:title /></h1>
<pop:image />
</pop:content>
</body>
</html>
"Hey! You said there are no blocks of auto-generated html — but this outputs a fully formed <img> tag!"

It's true. <pop:image/> is a convenient shorthand. Open it up to access the image properties and manually author the html image tag.

<pop:image>
<img id="look-ma" class="my own markup" src="<pop:src />" alt="<pop:alt />" />
</pop:image>

Opening <pop:image> effectively says "give me access to the src and the alt from this image field". If the content has no image then the PopTags engine simply ignores the tag

If you've uploaded an image, you should see it on your home page now!

Simple Page with Pic

Congratulations!

You've just mastered the basics of creating new dynamic content and rendering it in your template. So far we've barely scratched the surface of what Webpop can do, but no matter how deep you dig, you'll find the same basic principle: the output is exactly what you put in. This is what we mean with “Full Control over HTML and CSS.”