My Virtual Pet Game Embedded in Plone

With Plone, you don't need to create a fully custom add-on and be a full-time Python developer to create a basic content type customization.  If you need to add a basic page layout to a custom created content type created through the Plone Control Panel, it isn't all that difficult to do.  In this News article, it will act as both an announcement for adding my Virtual Pet game to the site, along as a basic guide to explain how this was all put together.  It's actually really easy once you know where to go.

Content Type

First, you'll need to head over to your administrative Control Panel in Plone, this is located on the bottom left when you click your user profile, it's labeled Site Setup, click it to get started.

Once in there scroll down to the Content section, and locate Contact Types, it's icon is a gem of sorts.

In the Content Types control panel, click the button at the top left labeled Add New Content Type...

This will bring up a modal dialog box asking for some basic information, it should be fairly self-explanatory, just give your content type a name, and a description.  The short name should auto-populate based on the name.  Then press Add to continue.

This will add the Content Type, and you should still be on the same Control Panel page, scroll down to find your newly created Content Type and click it to open it.

To create an Embedded Page example as I have on my Plone site here, these are the steps:

• To to the Fields tab.
• Add new field...
• Below is a list of all the fields you should create for this:

You should make all these fields Required as well.

One you have added these 3 fields, go ahead and press the Done button at the bottom to save the Content Type.

Zope Management Interface: Page Template

Now, you should be back at the Content Types Control Panel page.  Next, you'll see along the top there is a navigation bar with all the sections from the Control Panel listed, on the far right, there should be one called Advanced.  If you click onto this section, it should show a drop-down menu of sorts, and in there, you should see one called Management Interface.  Go ahead and click it.

Okay, this page might look really complicated if you haven't been here before, but there are only two things we need to do to configure this Content Type to use a custom created view template.  In the list locate portal_skins, and click on it to open it.  In here there should be several folders, the one we want is called custom.  Open that one.  This folder might be completely empty, and that's fine, we'll be creating a new Page Template here, and here's how.  On the top right of the page there is a drop-down labeled Select type to add, click onto it to reveal a rather huge list.  It is sorted alphabetically, so just scroll through and locate and click Page Template to add it.  This should open a modal dialog box asking for some information.  The only one you need to fill in is Id, the first one, I recommend calling it iframe_view.  Click onto Add and Edit to create the template itself.  You can remove the example template it provided you, and replace it with this one, which I'll explain after:

<html xmlns="http://w3.org" xml:lang="en"
      lang="en"
      metal:use-macro="context/main_template/macros/master">
    <metal:content-core fill-slot="content-core">
        <iframe tal:attributes="src context/url; width context/width; height context/height"></iframe>
    </metal:content-core>
</html>

This template might look very complicated if you haven't seem HTML before, or even if you have, you'll notice that it's not fully HTML, and that there are some custom tags and attributes.  The first of these attributes you'll notice is metal:use-macro=, which references the main Plone site template, and using it for our page here.  For proper Plone site integration, this macro should always be used.  All of your standard HTML content should be placed into the content-core slot as seen here.  The tag metal:content-core handled that bit as you could probably assume.  The next set of attributes are tal:attributes, with the value "src context/url; width context/width; height context/height" which is how we obtain those fancy fields we created earlier in the Content Types Control Panel.  There are technically three parts to this attribute, separated by a semi-colon.  The first part sets the src, the second sets the width, and the third one sets the height.  The actual HTML attribute to be placed is separated by a space and then what to replace it with, this is called an expression path.  To access all of the fields from a Content Type for example, we use the path of context/, and each variable there is the Short Name from the Content Type created.  Once you understand how it all works, it's actually not too difficult to start creating custom views for your content types.

Once you have placed the template into the editor, you can go ahead and press the Save Changes button below the editor.  There is one last thing we need to do in this interface to tell the Content Type we created what view to use.

Zope Management Interface: Portal Types

Along the top of the page, you should see a path of sorts, it should currently read "Page Template at / portal_skins / custom / iframe_view".  Each of these segments are clickable, and we need to go back to the first page we saw here, so click onto the first / there, and you should be brought back to the page with all those icons.

From that main page again, scroll down until you find portal_types in the list and click it to open it.

It should present you with a list of all the Content Types available in Plone, it is more or less the same ones you saw in the Control Panel from earlier.  In this list, you should see the Content Type we created earlier called Embedded Page, click it to open it.

These are some of the more advanced properties for the Content Type here, so don't change anything unless you know what it does.  We are looking for a property called Default view method, scroll down a bit to find it.  It's value should currently be just view.  Change this value to the same one as the Id for the Page Template we just created a moment ago, which should be iframe_view.

Once you have done that, scroll to the bottom and click on Save Changes.  And that's it!

Now, you can go into Plone, and on the left side try adding your new Content Type as you would any content type, and fill in all the details from the fields you created.  Once it's saved, you should then see the URL you entered load into an iframe just like my Virtual Pet does on this site.

Enjoy!