Jump to content


* * * * *
Photo

Creating the default demo site in IP.Content 2.0


IP.Content 2.0 includes a fully-featured demo site by default when you install the software anew. If you have upgraded from IP.Content 1.x, however, this demo site will not be installed. While we felt that the technical necessities were sufficiently difficult to skip this step (coupled with the fact that we expect most people who are upgrading to already have some sort of content and not require "demo" data to be inserted), many have expressed interest in recreating the default demo site from IP.Content 2.0 after upgrading. This tutorial is meant to show how you can create the default demo site in the ACP using the tools provided by IP.Content.

When you upgrade to IP.Content 2.0, the articles system and demo article data is installed. To that end, we will not be going into detail on how the article system is setup specifically.

From the ACP, visit the My Apps tab, and choose IP.Content. The landing page for IP.Content's admin control panel area is the "Pages" management section.

First, we will create two blocks in the Blocks manager which we will be using, but before we do that, let's create a category to put these blocks in. Click "Blocks" in the left hand menu, and then click the "Add Category" button. For the category name, call it "URLs and Variables", and save the category. Now, click the "Add Block" button. For the first block, on the first screen of the wizard choose "Custom". On the second screen, choose "Raw PHP" and hit Continue. We will name this block "IP.Content Media Folder", for the block key enter "ipcontent_files", and for the category choose our "URLs and Variables" category, then hit Continue. The cache time is not very important for this particular block. Because the data does not change, enter '*' and hit Continue. For the block content enter the following

include( DOC_IPS_ROOT_PATH . "media_path.php" );
echo CCS_MEDIA_URL;

This loads our media_path.php file and uses the defined media URL. You could alternatively echo out the actual URL (hardcoded) if you wish. Hit Continue after supplying the PHP code.

Now we will create our second block similarly to the first. Hit "Add Block", choose "Custom" for the block type, and choose "Raw PHP" for the content type. We will call this block "IP.Board CSS URL", give it a key of "ipb_css", and again, place it in the "URLs and Variables" category. Unlike the first block, the content of this block can change from user to user, so we recommend entering "0" for the Cache TTL setting. When asked for the block content, enter

echo $this->settings['public_dir'] . 'style_css/' . $this->registry->getClass('output')->skin['_csscacheid'] .'/';

This essentially prints out the URL to the CSS folder for the user viewing the page. Continue and save the block.

The demo site uses one custom CSS file to style the demo pages as you would see them displayed on a new installation. While this step is unnecessary, for organizational purposes we will create a folder in the IP.Content ACP area to store this CSS file in.

Click on the Pages left hand menu link to access the page management area. On the bar that says "Site Root", click the "Add Folder" icon to the right, and when prompted for a folder name, enter "assets". Click the "Create" button. Your new "assets" folder will be added into the file management window.

Attached Image: demosite1.png

Next to the new "assets" folder click the "Add File" button, and choose "Add CSS File". When the form presents itself, specify "demo" for the filename (the extension is automatically added), ensure the "/assets" folder is selected, and for the content, add the following

Attached File  css.txt   15.68KB   699 downloads


Upon saving the form, you will be brought back to the page management screen. You can expand your "assets" folder to see the new demo.css file listed under it if you like.

Attached Image: demosite2.png

At this point, we should create the media database that we will be using on the front end. Click the Databases left hand menu link to access the databae management area, and then click the "Add Database" button. On the first tab of the form, enter the following:

  • Database name: Media Demo
  • Database key: media_demo
  • Language strings:
  • Singular, lowercase: video
  • Plural, lowercase: videos
  • Singular, capitalized first letter: Video
  • Plural, capitalized first letter: Videos

On the second tab enter the following

  • Allow user modifications: No
  • Wiki-style modifications: No
  • Require approval of new videos: No
  • Store revisions: No
  • Database open: Yes
  • Allow comments: Yes
  • Require approval of comments: Yes
  • Comments bump record: No
  • Allow ratings: Yes

On the permissions tab, specify the permissions as you feel appropriate for your site. Just leave the rest of the options on their defaults for now (we will come back and update them later) and save the database. You will be brought to the screen where you can add your database fields now. We want to add a total of 5 fields as follows:

    • Field name: Video Title
    • Field description: The main title of this video
    • Field type: Text input box
    • Allow user editing: No
    • Treat numerically: No
    • Field validation: None
    • Allow HTML: No
    • Field required: Yes
    • Maximum length: 80
    • Truncate in listing: 0
    • Field name: YouTube ID
    • Field description: YouTube video ID
    • Field type: Text input box
    • Allow user editing: No
    • Treat numerically: No
    • Field validation: None
    • Allow HTML: No
    • Field required: Yes
    • Maximum length: 0
    • Truncate in listing: 0
    • Field name: Description
    • Field description: Short description of this video
    • Field type: Text area
    • Allow user editing: No
    • Treat numerically: No
    • Field validation: None
    • Allow HTML: No
    • Field required: No
    • Maximum length: 0
    • Truncate in listing: 0
    • Field name: Thumbnail
    • Field description: Image to represent this video in the system
    • Field type: Single file uploads
    • Allow user editing: No
    • Treat numerically: No
    • Field required: No
    • Extra options: gif,jpg,jpeg,png
    • Truncate in listing: 0
    • Field name: Length
    • Field description: Length of this video
    • Field type: Text input box
    • Allow user editing: No
    • Treat numerically: No
    • Field validation: None
    • Allow HTML: No
    • Field required: No
    • Maximum length: 0
    • Truncate in listing: 0

Any options that were not specified you can leave on the defaults. None of the fields need a default value. After you have added the fields, your field management screen should look like like the following screenshot.

Attached Image: demosite8.png

Next, we will create a couple of categories for our videos. While this step is not strictly required, we will show how this is done so you can understand how the category system works for each database. Click the Manage Categories button at the top right and you will be presented with the category management screen for this database. We will be adding both categories configured as follows:

    • Category name: New Features
    • Friendly URL title: new
    • Category description: Check out how to use some of the latest features of IP.Content
    • Show video listing in this category: Yes
    • Enable RSS Feeds: Yes
    • Category name: Other
    • Friendly URL title: other
    • Category description: Other videos you may be interested in
    • Show video listing in this category: Yes
    • Enable RSS Feeds: Yes

Now, click the "Manage Videos" button at the top right. Click "Add Video", fill in the form and submit. Add a couple of videos so that you will have some demo data to work with on your demo site. Here is a screenshot of one video you can add (you will need to upload a screenshot of the video yourself):

Attached Image: demosite9.png

At this point we have our database created, our fields defined, our categories defined and a couple of videos added to the database. There are 2 more things we must still do before our database is fully ready for use. The first thing we need to do is create our custom templates for this database.

Click "Database Templates" in the left hand menu. For organizational purposes we will add a new category to store these templates in. Click the "Add Category" button and for the Category Name, enter "Demo Media System" and hit the Save button. Now click "Add Template", and choose "Add "Category" Template". For the Template title enter "Media System Categories", for the Template key enter "media_categories", for the Template category, select "Demo Media System", and for the template content enter

<!-- 
	This template is a sort of 'front page' template for the media section.
	Rather than showing categories in the normal way, it actually shows blocks
	such as Latest Video, Recent Videos and a category listing feed. -->

<div>
	<div id='videos_latest'>
		{parse block="latest_video"}
	</div>
	<div id='videos_recent'>
		{parse block="recent_videos"} 
	</div>
</div>

Save this template. Click the Add Template button again, and this time choose "Add "Listing" Template". For Template title enter "Media System Listing", for the Template key enter "media_listing", and for the Template category, again choose "Demo Media System". For the template content, enter the following

It is important to note that the field ids referenced above may not (and in fact, most likely won't) match the field ids in YOUR database. Anywhere you see "field_#" (where # is a number) you will need to change that field to represent the appropriate content based on YOUR field ids. Here is a quick map of what fields each field id should represent:

  • field_9 (and field_9_value): Video Title
  • field_10 (and field_10_value): YouTube ID
  • field_11 (and field_11_value): Description
  • field_12 (and field_12_value): Thumbnail
  • field_13 (and field_13_value): Length

<div class='sort_bar'>
	Sort by: 
	<ul>
		<li <if test="$this->request['sort_col']=='record_saved'">class='active'</if>>
			<a href='{$data['parent']['category_link']}?{$this->_search}&amp;sort_col=record_saved&amp;sort_order=desc'>Most Recent</a>
		</li>
		<li <if test="$this->request['sort_col']=='rating_real'">class='active'</if>>
			<a href='{$data['parent']['category_link']}?{$this->_search}&amp;sort_col=rating_real&amp;sort_order=desc'>Highest Rated</a>
		</li>
		<li <if test="$this->request['sort_col']==$data['special']['title']">class='active'</if>>
			<a href='{$data['parent']['category_link']}?{$this->_search}&amp;sort_col={$data['special']['title']}&amp;sort_order=desc'>Title</a>
		</li>
		<li <if test="$this->request['sort_col']=='record_views'">class='active'</if>>
			<a href='{$data['parent']['category_link']}?{$this->_search}&amp;sort_col=record_views&amp;sort_order=desc'>Most Viewed</a>
		</li>
	</ul>
</div>
<div id='video_category'>
	<h2>{$data['parent']['category_name']}</h2>
	<div style='padding: 10px'>
		<if test="is_array( $data['records'] ) && count( $data['records'] )">
			<foreach loop="$data['records'] as $r">
				<div class='video_thumb'>
					<a href='{$r['record_link']}'><img src='{$r['field_12_value']}' {parse resize_image="{$r['field_12_value']}" maxwidth="140"} /></a>
					<br />
					<a href='{$r['record_link']}'>{parse expression="IPSText::truncate( $r['field_9_value'], 60 )"}</a> <span class='time'>{$r['field_13_value']}</span>
					<if test="$data['database']['database_rate']">
						<br />
						<span class='rating'>
							<if test="$record['rating_real'] >= 1">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$record['rating_real'] >= 2">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$record['rating_real'] >= 3">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$record['rating_real'] >= 4">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$record['rating_real'] >= 5">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if>
						</span>
					</if>
				</div>
			</foreach>
		<else />
			<div class='no_messages'>
				No videos in this category
			</div>
		</if>
	</div>
</div>

Hit the Save button. Click the Add Template button again, and this time choose "Add "Display" Template". For Template title enter "Media System Display", for the Template key enter "media_display", and for the Template category, again choose "Demo Media System". For the template content, enter the following

{parse js_module="rating"}
{parse template="include_lightbox" group="global" params=""}

<php>
	//print_r( $data['record'] );
</php>

<div id='video_view'>
	<div id='video_info'>
		<h2>
			<if test="$data['database']['database_rate']">
				<span class='rating'>
					<if test="!$this->memberData['member_id']">
						{$this->lang->words['m_rating']} 
							<if test="$data['record']['rating_real'] >= 1">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$data['record']['rating_real'] >= 2">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$data['record']['rating_real'] >= 3">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$data['record']['rating_real'] >= 4">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$data['record']['rating_real'] >= 5">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><span id='rating_text' class='desc'></span>
					<else />
						{$this->lang->words['m_rating']} 
							<a href='#' id='user_rate_1' title='{$this->lang->words['m_rate_1']}'><if test="$data['record']['rating_real'] >= 1">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if></a><a href='#' id='user_rate_2' title='{$this->lang->words['m_rate_2']}'><if test="$data['record']['rating_real'] >= 2">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if></a><a href='#' id='user_rate_3' title='{$this->lang->words['m_rate_3']}'><if test="$data['record']['rating_real'] >= 3">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if></a><a href='#' id='user_rate_4' title='{$this->lang->words['m_rate_4']}'><if test="$data['record']['rating_real'] >= 4">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if></a><a href='#' id='user_rate_5' title='{$this->lang->words['m_rate_5']}'><if test="$data['record']['rating_real'] >= 5">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if></a> <span id='rating_text' class='desc'></span>
						<script type='text/javascript'>
							rating = new ipb.rating( 'user_rate_', { 
												url: '{parse url="app=ccs&module=ajax&section=rate&id={$data['database']['database_id']}&record={$data['record']['primary_id_field']}" base="public"}&md5check=' + ipb.vars['secure_hash'],
												cur_rating: <if test="isset($data['record']['rating_real'])">{$data['record']['rating_real']}<else />0</if>,
												rated: null,
												allow_rate: <if test="$data['database']['_can_rate']">1<else />0</if>,
												show_rate_text: false
											  } );
						</script>
					</if>
				</span>
			</if>
			{$data['record'][$data['database']['database_field_title'] . '_value' ]}
		</h2>		
	</div>
	<div style='padding: 10px; text-align: center'>
		<object width="660" height="392"><param name="movie" value="http://www.youtube.com/v/{$data['record']['field_10']}"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/{$data['record']['field_10']}" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="392"></embed></object>
	</div>
	<div style='padding: 10px; margin-top: 15px;'>
		<strong style='font-size: 15px'>{$data['record'][$data['database']['database_field_title'] . '_value' ]}</strong><br />
		{$data['record']['field_11_value']}
	</div>
</div>

<if test="!empty( $data['comments'] )">
	<br /><br />
	<div id='video_comments'>
		<h2>Comments</h2>
		{$data['comments']}
	</div>
</if>

Save this template. Now we have the database templates ready that our media system will use. We have just one step left we need to finish - we need to go back and update the database configuration to point to the new templates (and our new database fields).

Click "Databases" in the left hand menu, and click the pencil icon next to "Media Demo" to edit the media demo database. On the first tab, point "Categories Template" to our new "Media System Categories", point "Listing Template" to our "Media System Listing" template, and point "Display Template" to our "Media System Display" template. Click the Options tab so that we can edit the database options. For "Title Field" change the dropdown to "Video Title", for "Content" field change the dropdown to "Description", and for "Default sort field" make sure "Last Updated Date" is selected. Default sort order should be "DESC" and you can set the default videos per page to whatever you like. Save the database.


Now we are ready to create the page template that our demo site will use. We are creating a page template since the "wrapper" of the site will be reused for all of the pages of the demo site - this allows us to define the wrapper HTML once, and reuse it elsewhere. If we decide we later want to edit the wrapper we will only have to edit it in one place that way.

Click "Page Templates" in the left hand menu, and then click the "Add Template" button. For the title specify "IP.Content Demo", for the key specify "ipcontent_template", and for the template HTML enter the following

<php>
	// Set variables for the menu
	$done = 0;
	
	if( strpos( $_SERVER['REQUEST_URI'], 'media.html' ) ){
		$menu['media'] = "active"; $done = 1;
	}
	
	if( strpos( $_SERVER['REQUEST_URI'], '/articles' ) || !$done ){
		$menu['articles'] = "active";
	}
</php>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		{ccs special_tag="meta_tags"}
		<title>IP.Content Demo</title>
		<link rel="stylesheet" type="text/css" media="screen" href="{parse url="app=ccs&module=pages&folder=assets&page=demo.css" base="public"}" />
		<link rel="stylesheet" type="text/css" media="screen" href="{parse block="ipb_css"}ipcontent.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{parse block="ipb_css"}ipb_editor.css" />
		<script type='text/javascript'>
			jsDebug = {parse expression="intval($this->settings['_jsDebug'])"}; /* Must come before JS includes */
			USE_RTE = <if test="userte:|:$this->memberData['members_editor_choice'] == 'rte' && $this->memberData['_canUseRTE'] === TRUE">1<else />0</if>;
			DISABLE_AJAX = parseInt({$this->settings['disable_text_ajax']}); /* Disables ajax requests where text is sent to the DB; helpful for charset issues */
			inACP   = false;
		</script>
		{parse template="includeJS" group="global" params="array('sharelinks' => 'sharelinks', 'rating' => 'rating', 'editor' => 'editor')"}
		{parse template="includeVars" group="global" params=""}
		<script type='text/javascript'>
			Loader.boot();
		</script>
	</head>
	<body id='ipboard_body'>
		<div id='header'>
			<img src='{parse block="ipcontent_files"}/demo_images/logo.png' alt='Logo' />
			<div id='demo_site'>
				This minisite is both a Getting Started guide for IP.Content 2.0, and an example of some of the things that be accomplished with it!
			</div>
		</div>
		<div id='outer_container'>
			<div id='menu_bar'>
				<ul>
					<li class='{$menu['articles']}'><a href='{$this->registry->ccsFunctions->returnPageUrl( array( 'page_seo_name' => 'index.html', 'page_id' => 2 ) )}' title='Articles'>Articles</a></li>
					<li class='{$menu['media']}'><a href='{$this->registry->ccsFunctions->returnPageUrl( array( 'page_seo_name' => 'media.html', 'page_id' => 4 ) )}' title='Media'>Media</a></li>
				</ul>
			</div>
			<div id='container'>
				{ccs special_tag="page_content"}
			</div>
		</div>
		<div id='copyright'>
			IP.Content  2010 IPS, Inc.

			You are free to reuse the content of this demo site.
		</div>
	</body>
</html>

There is a lot to digest in this template here. Firstly, we have some PHP code at the top of the template. This code is here to allow us to set some variables to determine which tab will be "lit up" when displaying the page (the "Articles" tab or the "Media" tab) based on the URL. We also use the two blocks we just created, as well as some special tags in IP.Content to control where certain things display, namely "{ccs special_tag="meta_tags"}" (which controls where the meta tags for the page are displayed), and "{ccs special_tag="page_content"}" (which controls where the page content will be put within the template). There are also two lines in the template we will need to come back to and edit later on to generate proper urls.

After you have supplied the above template, hit the Save button.

Most of our page is going to be generated by IP.Content blocks, and the articles database. Click on the "Blocks" link again to load the Block Manager. We will create a new category for the next set of blocks called "Article Blocks" (as before, click the "Add Category" button, supply the title, and hit the Save button). While we are at it, let's go ahead and create our other category too. Click "Add Category" one more time, and for the title supply "Demo Media System Blocks" and hit Save again. Now we can create the rest of our blocks we will need.

We will be creating a total of 7 more blocks. For each of the following, click "Add Block", choose the appropriate options when asked, and follow the wizard.

    • Type of Block: Feed
    • Type of Feed: Articles
    • Title: Articles Menu
      Key: articles_menu
      Category: Article Blocks
    • Type of Content: Categories
    • Cache TTL: 240 (you can set this to whatever you like, however note that if you add new categories, they will not show up until you update the block, or the cache TTL is reached and the block is recached)
    • Template Content:
      <div class='general_box'>
      	<h3>{$title}</h3>
      	<ul class='hfeed'>
      		<if test="is_array( $records ) && count( $records )">
      		{parse striping="feed_striping" classes="row1,row2 altrow"}
      		<foreach loop="$records as $r">
      			<li class='hentry {parse striping="feed_striping"}' style='padding: 4px 4px 4px {parse expression="$r['level']*20"}px;'>
      				 <a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $r['category']['category_database_id'], $r['category']['category_id'] )}'>{$r['category']['category_name']}</a>
      			</li>
      		</foreach>
      		</if>
      	</ul>
      </div>
      
    • Type of Block: Feed
    • Type of Feed: Articles
    • Title: Recent Articles
      Key: recent_articles
      Category: Article Blocks
    • Type of Content: Articles
    • On the filters page, you can leave the defaults and just hit Next
    • Column to sort by: Submission Date
      Order Direction: DESC
      Offset: 0
      Limit: 6
    • Cache TTL: 0 (you can set this to whatever you like, however note that if you add new articles, they will not show up until you update the block, or the cache TTL is reached and the block is recached)
    • Template Content:
      <div class='general_box' id='recent_articles'>
          <h3>{$title}</h3>
          <ul>
              <if test="is_array( $records ) && count( $records )">
              {parse striping="feed_striping" classes="row1,row2 altrow"}
              <foreach loop="$records as $r">
              	<li class='{parse striping="feed_striping"}'>
      				<a href='{$r['url']}'>{parse expression="IPSText::truncate( $r['field_1_value'], 30 )"}</a>
      			</li>
              </foreach>
              </if>
          </ul>
      </div>
      
    • Type of Block: Feed
    • Type of Feed: Articles
    • Title: Recent Comments
      Key: recent_comments
      Category: Article Blocks
    • Type of Content: Comments
    • On the filters page, you can leave the defaults and just hit Next
    • Column to sort by: Submission Date
      Order Direction: DESC
      Offset: 0
      Limit: 6
    • Cache TTL: 0 (you can set this to whatever you like, however note that if you add new articles, they will not show up until you update the block, or the cache TTL is reached and the block is recached)
    • Template Content:
      <div class='general_box' id='recent_comments'>
          <h3>{$title}</h3>
          <ul>
              <if test="is_array( $records ) && count( $records )">
              {parse striping="feed_striping" classes="row1,row2 altrow"}
              <foreach loop="$records as $r">
              	<li class='{parse striping="feed_striping"}'>
      				<img src='{$r['pp_mini_photo']}' width='{$r['pp_mini_width']}' height='{$r['pp_mini_height']}' class='photo' />
      				<p style='margin-left: 35px;'>
      					<a href='{$r['url']}'>{parse expression="IPSText::truncate( $r['field_1_value'], 30 )"}</a>
      
      					<span class='desc'>By <a href='{parse url="showuser={$r['member_id']}" base="public"}'>{$r['members_display_name_short']}</a>, {parse date="$r['date']" format="short"}</span>
      				</p>			
      			</li>
              </foreach>
              </if>
          </ul>
      </div>
      
    • Type of Block: Feed
    • Type of Feed: IP.Content Databases
    • Title: Latest Video
      Key: latest_video
      Category: Demo Media System Blocks
    • Database: Media System
      Type of Content: Records
    • On the filters page, you can leave the defaults and just hit Next
    • Column to sort by: Submission Date
      Order Direction: DESC
      Offset: 0
      Limit: 1
    • Cache TTL: 0 (you can set this to whatever you like, however note that if you add new records, they will not show up until you update the block, or the cache TTL is reached and the block is recached)
    • Template Content:
      <h2>Our Latest Video</h2>
      <div style='padding: 10px; text-align: center'>
      <object width="660" height="392"><param name="movie" value="http://www.youtube.com/v/{$records[0]['field_10']}&hl=en_US&fs=1&color1=0x3a3a3a&color2=0x999999&border=0&showinfo=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/{$records[0]['field_10']}&hl=en_US&fs=1&color1=0x3a3a3a&color2=0x999999&border=0&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="392"></embed></object>
      </div>
      
      <div style='padding: 10px'>
      <h3>{$records[0]['field_9']}</h3>
      </div>
      Note:You will have to change all instances of $records[0]['field_#'] (where # is a number) in the above code to match the field ids of your media database. Replace "field_10" with the appropriate key to represent "Youtube ID", and replace "field_9" with the appropriate key to represent "Video Title".
    • Type of Block: Feed
    • Type of Feed: IP.Content Databases
    • Title: Category List
      Key: media_categories
      Category: Demo Media System Blocks
    • Database: Media System
      Type of Content: Categories
    • Cache TTL: 0 (you can set this to whatever you like, however note that if you add new records, they will not show up until you update the block, or the cache TTL is reached and the block is recached)
    • Template Content:
      <php>
      	// Modify the array so that categories are hierarchical
      	$this->_categories = array();
      	
      	foreach( $records as $r ){
      		$this->_categories[ $r['category']['category_parent_id'] ][ $r['category']['category_id'] ] = $r['category'];
      	}
      	
      	//print_r( $this->_categories );
      </php>
      
      <div id='category_list'>
      	<h2>{$title}</h2>
      	<ul>
      		<if test="is_array( $this->_categories ) && count( $this->_categories )">
      			<foreach loop="$this->_categories[0] as $r">
      				<li>
      					<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $r['category_database_id'], $r['category_id'] )}'>{$r['category_name']}</a>
      					<if test="count( $this->_categories[ $r['category_id'] ] )">
      						<ul>
      							<foreach loop="$this->_categories[ $r['category_id'] ] as $sub">
      								<li>
      									<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $sub['category_database_id'], $sub['category_id'] )}'>{$sub['category_name']}</a>
      								</li>
      							</foreach>
      						</ul>
      					</if>
      				</li>
      			</foreach>
      		</if>
      	</ul>
      </div>
    • Type of Block: Feed
    • Type of Feed: IP.Content Databases
    • Title: Recent Videos
      Key: recent_videos
      Category: Demo Media System Blocks
    • Database: Media System
      Type of Content: Records
    • On the filters page, you can leave the defaults and just hit Next
    • Column to sort by: Submission Date
      Order Direction: DESC
      Offset: 1
      Limit: 20
    • Cache TTL: 0 (you can set this to whatever you like, however note that if you add new records, they will not show up until you update the block, or the cache TTL is reached and the block is recached)
    • Template Content:
      <div id='videos_recent'>
      	<h2>Recent Videos</h2>
      	<div style='padding: 10px'>
      		<if test="is_array( $records ) && count( $records )">
      			<foreach loop="$records as $r">
      				<div class='video_thumb'>
      					<a href='{$r['url']}'><img src='{$r['field_12_value']}' {parse resize_image="{$r['field_12_value']}" maxwidth="140"} /></a>
      					
      
      					<a href='{$r['url']}'>{parse expression="IPSText::truncate( $r['field_9_value'], 60 )"}</a> <span class='time'>{$r['field_13_value']}</span>
      				</div>
      			</foreach>
      		</if>
      	</div>
      </div>
      Note:You will have to change all instances of $r['field_#_value'] (where # is a number) in the above code to match the field ids of your media database. Replace "field_12_value" with the appropriate key to represent "Thumbnail", replace "field_9_value" with the appropriate key to represent "Video Title", and replace "field_13_value" with the appropriate key to represent "Length".
    • Type of Block: Feed
    • Type of Feed: IP.Content Databases
    • Title: Hot Videos
      Key: top_videos
      Category: Demo Media System Blocks
    • Database: Media System
      Type of Content: Records
    • On the filters page, you can leave the defaults and just hit Next
    • Column to sort by: Rating
      Order Direction: DESC
      Offset: 0
      Limit: 10
    • Cache TTL: 0 (you can set this to whatever you like, however note that if you add new records, they will not show up until you update the block, or the cache TTL is reached and the block is recached)
    • Template Content:
      <div id='videos_hot' class='videos_block'>
      	<h2>Hot Videos</h2>
      	<div style='padding: 10px'>
      		<if test="is_array( $records ) && count( $records )">
      			<foreach loop="$records as $r">
      				<div class='video_mini_thumb clear'>
      					<a href='{$r['url']}' style='float: left'><img src='{$r['field_12_value']}' {parse resize_image="{$r['field_12_value']}" maxwidth="40"} /></a>
      					<div class='info'>
      						<a href='{$r['url']}'>{parse expression="IPSText::truncate( $r['field_9_value'], 60 )"}</a>
      
      						<span class='rating'>
      							<if test="$r['rating_real'] >= 1">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$r['rating_real'] >= 2">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$r['rating_real'] >= 3">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$r['rating_real'] >= 4">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if><if test="$r['rating_real'] >= 5">{parse replacement="rate_on"}<else />{parse replacement="rate_off"}</if>
      						</span>
      					</div>
      				</div>
      			</foreach>
      		</if>
      	</div>
      </div>
      Note:You will have to change all instances of $r['field_#_value'] (where # is a number) in the above code to match the field ids of your media database. Replace "field_12_value" with the appropriate key to represent "Thumbnail" and replace "field_9_value" with the appropriate key to represent "Video Title".

In many of the blocks we are accessing data for the feeds to make the blocks more interesting and useful. To do this, we have to access field data for the records, with the typical variables being something along the lines of "$r['field_#_value']" (where # is a number). You will have to adjust these lines to match your own database ids. One way to find out the right field number is to click on Databases, click the button next to "Media Demo" and choose Manage Fields. As you mouse over each of the fields, look at the URL in the address bar of your browser. At the end of the URL you will see "&field=#" - this # is the id that you need to represent that field.

Now you should have all of the blocks that will be used created and saved. You can click the magnifying glass icon next to each block to view a preview of the block if you like (be aware that our custom CSS will not be applied to the preview, so the content may not be formatted exactly as it will be on the front end once embedded into our pages).

Attached Image: demosite4.png

The next step we need to take is to add two pages, one to display our articles and one to display our media database. First, we will create our index page which will display the articles, and then we will create a page to show our media database.

Click the "Pages" link in the left hand menu to go back to the page management area. Then click on the "Add Page" icon on the "Site Root" bar, and choose "Add Page" from the dropdown. For page name, we will call it "Articles", for page filename we will specify "index.html", and for folder we will leave it on "/". We will set the editing content method to "Raw HTML", and the "Template to start with" we will need to choose "IP.Content Demo". "Only edit page content" we should leave on "Yes", and "Use IPB Wrapper" we should select "No", and then continue.

Attached Image: demosite5.png

For the page content, enter the following

<div class='site_callout'>
This page demonstrates the brand new article system in IP.Content 2.0. The category menu is generated with a Feed block.
</div>
{ccs special_tag="navigation"}
<div id='article_sidebar'>
	{parse block="articles_menu"}
	{parse block="article_search"}
	{parse block="recent_articles"}
	{parse block="recent_comments"}
</div>
{parse articles}

Here, you will notice we are calling in many of the blocks that we created earlier, and we are adding the { parse articles } tag to display articles. When we continue, we want to leave caching off, let all groups access this page, and then we can finish this page.

Next we will create the media page. Again, click to "Add Page" and choose to "Add Page" from the dropdown. For the page name, enter "Media" and for filename enter "media.html". For the folder, we can leave it on "/" again. Specify the last 4 options the same way we did with index.html (Raw HTML, Use IP.Content Demo template, Only edit page content Yes, and Use IPB Wrapper No). Continue.

Attached Image: demosite6.png

For the page template, enter the following

<div class='site_callout'>
This page demonstrates one possible use of the Database feature, used to create full-featured media section for your website.
</div>

<div id='videos'>
	<div class='left' id='videos_menu'>
		{parse block="media_categories"}
		{parse block="top_videos"} 
	</div>
	<div class='left'>
		{parse database="media_demo"}
	</div>
</div>

Continue, set page caching to 0, and allow all groups to access the page again. Save this page.

Now, we need to update our IP.Content Demo page template to fix some ids, so you need to grab those ids. Mouse over the index.html file in the page management area here, and note the value after "page=" in the URL shown in the address bar. For me, "index.html" has an id of 2. Do the same for media.html (which has an id of 3 for me). Now, click Page Templates in the left hand menu and click on the IP.Content Demo template so that we can edit it. Within the template, look for the following

<ul>
					<li class='{$menu['articles']}'><a href='{$this->registry->ccsFunctions->returnPageUrl( array( 'page_seo_name' => 'index.html', 'page_id' => 2 ) )}' title='Articles'>Articles</a></li>
					<li class='{$menu['media']}'><a href='{$this->registry->ccsFunctions->returnPageUrl( array( 'page_seo_name' => 'media.html', 'page_id' => 4 ) )}' title='Media'>Media</a></li>
				</ul>

You will notice here that there are two calls to a function that builds a page URL, and they specify a page_id parameter. What we need to do is set this value to match the pages we just created (so I would not need to change index.html in my case, however I need to change page_id from a 4 to a 3 for the media.html file). My resulting HTML is

<ul>
					<li class='{$menu['articles']}'><a href='{$this->registry->ccsFunctions->returnPageUrl( array( 'page_seo_name' => 'index.html', 'page_id' => 2 ) )}' title='Articles'>Articles</a></li>
					<li class='{$menu['media']}'><a href='{$this->registry->ccsFunctions->returnPageUrl( array( 'page_seo_name' => 'media.html', 'page_id' => 3 ) )}' title='Media'>Media</a></li>
				</ul>

Save the page template. That's all we have to do! Now, if you click the little green arrow next to index.html, it will open this page in a new browser window, and you can browse your new default demo site.

Attached Image: demosite7.png



1 Comments

Can you please touch on "permissions" ? Thanks

Developer Docs · Error Codes