Creating Content Types

Posted by jwage on January 15, 2010

Everything in Sympal is based around the concept of content records which are represented by a Doctrine sfSympalContent instance. We allow Sympal developers to easily extend content records with custom content types. This means developers can add new fields for that content type, render content records of that type with custom templates and themes. You can even customize the pattern to use to generate routes for content of that type.

In this blog post we'll demonstrate how you can easily extend the existing page content type and write your own content templates to render it.

This blog post assumes that you are starting this just after finishing the 1.0 Quick Start Guide.

Adding the Custom Content Type

To extend the default Sympal page content type we just need to login with our administrative user. If you didn't enter a custom username and password when installing then you can just login with the username admin and password admin. After you have logging in, navigate to your dashboard and click to manage your content types:

At the bottom of the list of content types you can easily click to add a new content type:

Enter the information for the content type and click save:

Next, when you go to create some content you will see the ability to add some new content for the new "My Custom Page" content type. Create a new content record to test the new content type:

Now if you go back to the content list you will see the new content record for your custom content type:

Notice how the URL is built using the route pattern we described in our content type that we created earlier. This is possible thanks to the normal Symfony routing system!

Customizing Content Type Template

Lets take a look at our newly created content record, it just uses the default content template included with Sympal so it is pretty basic. It just contains a title and body.

We are ready to customize the content template your new content type should use by default. Before we can do this we just need to generate a new module to hold our content templates:

php symfony generate:module sympal my_content_templates

Next, create a new partial named _view_my_custom_page.php in the templates directory of our new module. Paste the following code in the new partial:

<?php sympal_use_stylesheet('/css/my_custom_page.css') ?>
 
<div id="my_custom_page">
  <h1><?php echo get_sympal_content_slot($content, 'title', 'Text') ?></h1>
 
  <span id="image">
    <?php echo get_sympal_content_slot($content, 'image') ?>
  </span>
 
  <span id="body">
    <?php echo get_sympal_content_slot($content, 'body', 'Markdown') ?>
  </span>
</div>
 

To render the content template properly you will need the following /css/my_custom_page.css file as well:

#my_custom_page
{
  position: relative;
  height: 500px;
}

#my_custom_page #image
{
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 0;
  margin-right: 5px;
}

#my_custom_page #image img
{
  width: 100px;
}

#my_custom_page #image input
{
  width: 90px;
  height: 90px;
}

#my_custom_page #body
{
  position: absolute;
  top: 50px;
  left: 120px;
}

The last step is to make the new content template available for your new content type. To do this we just need to add some new configurations to our config/app.yml:

---
all:
  sympal_config:
    # ...
    my-custom-page:
      content_templates:
        default_view:
          template: my_content_templates/view_my_custom_page

Now our new content template is ready to use and we can make use of it. Just go back to edit your content type you created and under the Rendering section choose the new template we just created:

Now when we go to edit our test page we created earlier, it will be rendered using our new content template. Here is what our content template looks like in edit mode where I have added some dummy text:

Now if you disable edit mode you can see how the content template is rendered:

That is it! You have extended the default page type to allow you to create your own custom pages with a custom url and a custom content template!

Comments (365) Add a comment


Markdown syntax is enabled.