I’ve been working on this site, thirtydogs.com, for some time now. Thirtydogs is basically a place where you can find and share ideas for somewhat unconventional things to do with your time.

Ideas on thirtydogs.com can range from Start an ant farm to Roast wieners or marshmallows over the stovetop element.

I built Thirtydogs using the PHP framework Codeigniter. It’s a great, lightweight framework. It had what I needed without a bunch of extra crap.

Anyways, go check it out and make sure to check back often. There’s a lot of features sitting at the 90% mark that I should be rolling out over the next couple of months. We’re also planning on tightening up the design. I think the most interesting thing will be to see what this site evolves into as a community develops around it. Hopefully some creative people dig the site and we can build a nice big database of ridiculous ideas.

Remember, waste your time creatively.

Overall I like FrogCMS. I’m not convinced it has enough features to be worth using on a regular basis (for me). It is however so easy and fast to use that you might as well use it as oppose to building a pure static site.

Too lightweight?

I like lightweight software. I do most of my work in Notepad++ (as opposed to a heavy IDE), I use Foobar2000 instead of iTunes or Windows Media Player. I love working with the lightweight Codeigniter PHP framework. FrogCMS’s slogan is Content Management Simplified and their project goal is clear:

The philosophy of Frog CMS is to keep the core CMS as light, fast and flexible as possible.

The reality for me is that it’s easy to use and fast to get going but doesn’t quite do a whole lot for you in the end. That being said, if you have a website design and some fairly static content you could easily go with FrogCMS and benefit from having a backend admin, user management and few other tools. However, as soon as your needs grow beyond that you would find yourself either considering a more powerful CMS or writing your own plugins (more on that next) both of which would take a lot more work.

Extending with plug-ins

I love the idea of starting with a lightweight core but having the option to increase the power and flexibility of a system with plug-ins. This has always been WordPress’s philosophy as well. In the case of FrogCMS there doesn’t seem to be a whole lot of plug-ins to choose from. If you have PHP skills it might be cool to use FrogCMS as your base and do all your custom development in the form of plug-ins. It would sure beat doing all the dev work from the ground up and naturally keep things more manageable and modular. If the FrogCMS community were to grow and more supported plug-ins hit the scene much more would be possible and would quickly change be general opinion.

For freelancing? for clients?

For me, one of the main reasons to use a CMS is for a client website. Often a client will want to be able to add and manage their own content to some degree. Why shouldn’t they? It’s certainly not worth it to always be coding your own backend system when so many great CMS’s are available (especially if you’re building smaller lower budget sites). For this purpose I’d be a little afraid to use FrogCMS. It’s great because the backend interface is clean and simple but it also requires to client to basically “code” their own pages. Although markdown and textile are cool I don’t think they’re really any easier than pure HTML and I don’t really want a client inputting their own HTML anyway (could cause future issues). Markdown, textile or HTML would be fine for simple things like styling text but I think the general content input system needs a little more. Here’s what I’m thinking:

1. Images/Media

   There needs to be an easier way for a client to add an image to a page. Currently (without a plugin) they would have to upload the image through the file manager and link to that image using a form of mark-up. This is a big one for me. Other types of media such as audio and video are usually requested by clients as well. At very least FrogCMS needs a supported plug-in to help with adding media to a page.

2. Forms?

   If you look into the “commenting” plug-in for FrogCMS you can see there is a way to make forms. However, you’ll basically just be doing PHP. If FrogCMS had a built in system for making forms it could easily get complicated (and therefore stray from the project goal) but if there was a simple method to help with forms and user input that would be great. Maybe a core plug-in?

3. Further divided content parts

   I thought it was neat how easily I could make a content part and then add that as a tab to the page edit screen. It would be nice to take this a bit further. Maybe a content part could have smaller sub-parts. In the example of the “Gong of the Day” callout it would be nice to have three sub-parts: gong name, gong description, gong link. It would be a lot nicer for a non-techie client to fill in these three fields than to alter mark-up.

Final say

I feel like I’m giving FrogCMS a negative vibe but overall I really did like it. It’s not quite powerful enough for my purposes at this time but I do love it’s simplicity. I’m considering taking a stab at building out some of my own plug-ins to solve a few of issues I considered weak spots. A little extra push would make this CMS perfect for me. I’ll make sure to keep you posted!

Thanks for reading,

Boztown

As I wrote in my last post:

I’d like to pretend I’m setting up an “editor” account for the client and feel out how they would experience adding and manipulating content.

Adding a new user

So that’s what I’m going to do. In the top right corner of the admin screen you’ll see a “users” tab.

If we click that we’ll get a list of users and a nifty “New User” button on the right.

You can also see the FrogCMS uses Gravatars for their avatar system. This is pretty cool. If you don’t know already Gravatar.com allows you associate an avatar with your email address. So any time you enter your email address on a site (to either register, or post a comment like on this blog) it’s possible for that site to use your gravatar.

Now I can register a new user as an “editor”.

When I log in as this new user I can see only the “Pages” and “Files” tabs are available to me.

Adding content as an editor

The first thing I was going to try to do was edit the content on the homepage. Apparently I can’t edit this page as an editor (it’s not a link). I might be missing something but I’m not sure the reasoning for this.

I’ll go ahead and edit the “Lessons” page instead.

Now I’m going to imagine myself as a client. I see I can add some text to my page here but I want to add an image. How do I do that? Well unfortunately there’s no simple way to add an image that’s built right into FrogCMS. There are some image gallery plug-ins linked to from the FrogCMS contributed plugins page but half the links are down and none of them seem to be what I’m looking for. The only option seems to be to upload the image through the FrogCMS file manager and then link to that image using either HTML, Markdown or Textile. If you’re not familiar with the latter two they are basically a different form of mark-up that’s suppose to be more writer friendly than pure HTML. These tags would be converted to HTML when the page is saved.

Adding an image to a page

So let’s run through this with Markdown. I imagine I would instruct my client how to do this.

1. Click the “files” tab and then “Upload file”.

   

2. Choose the image. I chose this photo of a gong being beaten.

   

3. Add the appropriate markdown for displaying an image. The markdown site shows the syntax as this:

   ![alt text](/path/to/img.jpg "Title")

   So I’ll put in this (title is optional):

   ![Bangin the gong](public/GongStrike.jpg)

   Note: Both the markdown and textile options have a little toolbar that will help you out. That’s nice. There is even an image button but it seems to want to use absolute URLs.

   

Yep, that worked:

Well, I think I get the gist of it. As with anything, there is definitely more to it but I think I’m done my experimenting. In the next part I’ll do a quick write-up about my overall feelings and whether or not I think I would use FrogCMS.

Next: Playing with FrogCMS (Part 7: My Conclusion)

You know what? I think I’m just going to cheat on this one. In a fresh installation of Frog there is already page called Archive. It just happens to be titled archive but it’s also of page type archive.

To start, I’ll rename archive to blog.

I’ll also leave the default articles (subpages) that were already there.

If we go check it out it seems we now have a simple blog.

Gorgeous. It also looks like I can add a post by adding a child “page” to the blog page.

If we edit our blog page we can edit how these articles are displayed, change the number of posts listed, the order they’re sorted in, etc.

<?php $last_articles = $this->children(array('limit'=>5, 'order'=>'page.created_on DESC')); ?>
<?php foreach ($last_articles as $article): ?>
<div class="entry">
  <h3><?php echo $article->link($article->title); ?></h3>
  <?php echo $article->content(); ?>
  <p class="info">Posted by <?php echo $article->author(); ?> on <?php echo $article->date(); ?>  
     <br />tags: <?php echo join(', ', $article->tags()); ?>
  </p>
</div>
<?php endforeach; ?>

Well I’m fine with that but I don’t see any code in there that will truncate my post and provide a “read more” link like a normal blog. To make sure I post a new article filled with lorem ipsum and sure enough it runs on and on.

I’ll have to fix that. Luckily there’s instructions on the FrogCMS website: Display teaser with Read-more link. Basically they suggest creating another content part like we did for the Gong of the Day in Part 3. We’ll have a content part named “extended” which will be the full article and the “body” part will be the teaser.

In the “blog” page, I’ve added this code:

 <p><?php if ($article->hasContent('extended')) echo $article->link('Continue Reading&#133;'); ?></p>

Now I have to add the “extended” content holder to my layout so it looks like this:

<div id="content-right">
 
	<h3><?php echo $this->title(); ?></h3>
	<?php echo $this->content(); ?>
	<?php if ($this->hasContent('extended')) echo $this->content('extended'); ?> 
 
</div>

Finally, I need to add the new content part tab to my blog post page “Squirrels!”

I’ll keep a few lines of lorem ipsum in the “body” and put what the rest of the article into “content”. Save it up and whoop there it is.

It worked but I’m not sure I like this system very much. It would probably be a little more slick to reverse this around and have the “body” be the main article and have a tab called “teaser”. It also wouldn’t be too difficult to wrap a PHP function around the content output and truncate it to automatically make a teaser.

There is also a sidebar tab left over from the original setup.

There you can see come code for displaying a listing of posts by month.

<?php $article = $this->find('articles'); ?>
<?php $archives = $article->archive->archivesByMonth(); ?>
 
<h3>Archives By Month</h3>
<ul>
<?php foreach ($archives as $date): ?>
  <li><a href="<?php echo BASE_URL . $this->url .'/'. $date . URL_SUFFIX; ?>"><?php echo strftime('%B %Y', strtotime(strtr($date, '/', '-'))); ?></a></li>
<?php endforeach; ?>
</ul>

There’s all kinds of stuff you can do although it does take some minor PHP knowledge and an idea of the FrogCMS functions.

Next I’m going to look into the user management system. I’d like to pretend I’m setting up an “editor” account for the client and feel out how they would experience adding and manipulating content.

Next: Playing with FrogCMS (Part 6: User Management)

We got that theme up and running pretty quickly. So far so good. Now I’d like to take it just a little bit further and see how flexible we can make things.

Adding a dynamic ID and class to the body

Here you can find a list FrogCMS functions. There should be something here that will allow me to dynamically add a relevant ID and class to the body tag of everypage. I decided to go with this function:

echo $this->slug();

The slug is basically the readable URL (so the page title separated by dashes and cleansed of special characters). So I altered to body tag in my layout to look like this:

<body id="page-<?php echo $this->slug(); ?>" class="">

Now if we move to our test page…

We can take a look at Firebug and see that our body has the ID page-test.

This is perfect but if we look at the homepage we’ll see that the body ID is page-. The homepage does not have a slug. I’m going to get around this with a quick and dirty conditional.

    <?php
	if ($this->slug() == '')
	{
	   $body_id = 'home';
	}
	else
	{
	   $body_id = $this->slug();
	}
     ?>
 
<body id="page-<?php echo $body_id; ?>" class="">

Ok, that works. Will backfire on me down the road? Probably, but for now it works fine.

Adding metadata

Let’s make sure any keywords or descriptions we add the the metadata of a page actually render out on that page. This is basically straight out of the FrogCMS docs. Just paste this into the head of the page:

  <meta name="keywords" content="<?php echo $this->keywords(); ?>" />
  <meta name="description" content="<?php echo $this->description(); ?>" />

Make sure to enter the keywords and description.

Taco, fettuccine, linguine, martini, bikini… keyword and description meta data in perfect cursive…

Page headers

I’m going to quickly make a change to display the page title as a H2 on everypage. In the layout I replace this:

<h3>What’s new at the Gong Shop?</h3>

with this:

<h3><?php echo $this->title(); ?></h3>

Next: Playing with FrogCMS (Part 5: The Blog)

I quickly built out a template for The Gong Shop site using just XHTML and an external CSS file. Now I have to figure out how to get this into FrogCMS.

I took a look at the wiki on Google Code for a little info on how to start creating my theme. It seems like FrogCMS doesn’t have a typical theming system but more of a variety of parts that make of up a “theme”. I decide to download a theme from the contributed themes section @ madebyfrog.com

I chose the FreshMedia theme. The zip file contained files like this:

It looks like the install.txt has a list of instructions: put the css and images here, paste this snippet in, add this HTML to a new layout… etc. The other downloadable themes seem to work the same way. I’m not sure how I feel about this system yet – but let’s try it out.

First I go to the root of my FrogCMS install and open the folder /public/themes/. Inside is the default theme normal. I create a new folder and name it gongshop.

Then I just paste in the files for the HTML layout I already created.

I click the Layout tab and then New Layout

I enter a name for my layout (I’d like to start with the two column home page). I enter the type as text/html (I saw it this way on the other layouts).

I paste the HTML from my template in… and there we go.

I venture over to the Pages tab. At first I’m not quite sure how to create a page. There are green “Add Child” buttons next to the current pages but how do I add a root level page? I stare at this for a while and consider it deeply.

The Create a Page section in the FrogCMS docs explains:

Note that all “main pages” in Frog are actually a “child” page to the Home page.

Alright, fine. I’m just going to go mess with a page and see what happens.

Let’s switch this simple page over to my gongshop layout…

Now let’s check out the About Us page in the sites front-end.

No styles. I’m sure it’s a path issue. I refer to the original theme layout. You need to reference your stylesheet like so:

<link rel="stylesheet" type="text/css" href="<?php echo URL_PUBLIC; ?>public/themes/gongshop/screen.css" />

Ok, that worked but we need to make this page dynamic. I remove the current content from the right-column “news” section and paste in:

<?php echo $this->content(); ?>

Forgot the “About Us” page, I want to create a new page.

I’ll call the page test, type some words into the body and select Gongshop – Two Column from the layout dropdown.

This metadata tab seems interesting as well. I’ll have to figure out how to use this information in my layout. For now I’ll keep rolling.

Just click Save & Close and let’s check out the site…

BAM! Done. Let’s keep moving and see about making this navigation dynamically reflect the pages.

The Navigation

Looking back at the default theme “snippets” I found the code to loop through the pages to generate the navigation.

    <ul>
      <li><a<?php echo url_match('/') ? ' class="current"': ''; ?> href="<?php echo URL_PUBLIC; ?>">Home</a></li>
      <?php foreach($this->find('/')->children() as $menu): ?>
      <li><?php echo $menu->link($menu->title, (in_array($menu->slug, explode('/', $this->url)) ? ' class="current"': null)); ?></li>
      <?php endforeach; ?> 
    </ul>

I’m going to make my own snippet and call it “nav”. I copy the foreach loop from above into my new snippet. I can then add this snippet to my layout like so:

<?php $this->includeSnippet('nav'); ?>

Let’s save that up and take a look…

Content Parts

First I’m going to strip out the current homepage and do it up my way. I deleted the content of body and sidebar. The sidebar part is actually what I’m interested in but let’s figure out exactly what’s going on. I’m going to delete the sidebar tab for now.

These icons on the right will let you add and remove tabs.

Now, while you weren’t looking I snuck back to the layouts section and made some changes. I wrapped the “Gong of the Day” sidebar callout (refer to the screenshot at the top of this article if you forget what I’m building) in some PHP. It looks like this:

<?php if ($this->hasContent('gongday')) { ?>
 
<div id="gong-of-the-day">
	<div class="content">
		<h3><span class="hidden">Gong of the day</span></h3>
		<img src="images/the_traditional.jpg" alt="Gong of the day photo" />
		<h4><a href="#">The Traditional</a></h4>
		<?php echo $this->content('gongday'); ?> 
		<p class="read-more"><a href="">read more</a></p>
	</div>
</div>
 
<?php } ?>

Just as it reads: if the layout gets some content named “gongday” then show this bit of HTML and spit in the content in the appropriate spot. Now I can go back to edit the homepage and add a tab called “gongday”.

I’ll throw some text in there and save the page…

and we get some results.

Note: The if statement we used in the layout to determine if gongday hasContent will always return true as long as that tab is there. If you remove the tab, the Gong of the Day callout will disappear.

That’s enough for now. There’s some more I’d like to do with the theme such as have classes dynamically added to the body tag and abstracting the layout further into snippets. I’ll save that for the next part.

Next: Playing with FrogCMS (Part 4: The Theme [continued...])

What am I going to build? I don’t know. I made up this comp for a fake site called The Gong Shop. It’s meant to be an online gong store/resource center. To be clear, I’m not attempting to build an e-commerce site with FrogCMS. There doesn’t seem to be any e-commerce support or supported e-commerce plug-ins for FrogCMS and I don’t think it’s meant for this task at all. I designed these comps in the style of a store as a way test how FrogCMS will allow me to enter and manipulate data. An inventory of products is a good dataset to play with in my opinion.

Also note: I have never used FrogCMS. I just installed it, looked at the documentation for a moment and then went ahead and started drawing out this phony site. I have no idea if FrogCMS will be the right tool for the job but hopefully that’s what I find out here. FrogCMS is designed to be very simple and lightweight. I like the idea of lightweight but I’m interested to see if it will be flexible enough to flesh out this idea. I may try building the same site out using other CMS’s in the future.

The Gong Shop Comps

The Homepage

Here I’m hoping to have a two column layout. It should be easy for a client to change the Gong of the day. It should also be easy to update the homepage news and include a picture like shown.

The Store

As I wrote in the beginning of this article: I have no plan or expectations do be doing any e-commerce. I just want to see how this CMS could handle something like a product inventory.

The Blog

Every CMS seems to demonstrate how easily it could be used as a simple blog. Let’s try and include a blog within this site.

Next: Playing with FrogCMS (Part 3: The Theme)

I’ve been doing some research and toying around with various CMS’s lately. In the last couple years I’ve started to come to the realization that building a website from the ground up is almost always unnecessary (especially if building a general website for a client). I’ve since done some work with Drupal, this blog runs on WordPress and after using the PHP framework CodeIgniter I also decided to give ExpressionEngine a chance.

Anyways, there are a lot of CMS’s out there and they all have their purposes. For some reason I feel like testing out FrogCMS so I’m going to do so and write about it here.

Note: FrogCMS is based on the popular RoR CMS RadiantCMS. Just sayin’.

Installing FrogCMS

I’m going to install FrogCMS under Xampp on my Windows machine.

So I’ve downloaded FrogCMS 0.9.5 from madebyfrog.com. As I expected there were files inside.

I check out install.txt and apparently the first thing I’m suppose to do it create a database. That seems reasonable. I pop open the Xampp control panel and click admin to get to phpMyAdmin.

I’m going to call this database gongshop.

The next step is to move all the FrogCMS files into a directory or the root of my webserver. I’m developing locally using Xampp so I’ll be putting my files here: c:\xampp\htdocs\gongshop\. I work on multiple websites in Xampp so I need change the document root in my httpd.conf file (found in: \xampp\apache\conf\).

Note: FrogCMS does not need to run on the root of a site. I could leave the root set as c:\xampp\htdocs\ and reference my FrogCMS installtion like this: http://localhost/gongshop/; but I don’t want to.

Now I need to restart Apache to have these changes take place.

The next step is to hit the FrogCMS /install/ directory in my web browser.

…and boom goes the dynamite, I’ve got an installation page asking me for some db details…

I just type in the name of the database I created a couple minutes ago. My local MySQL has no username or password set (unsecure, but I don’t care right now). I just leave “Database user” as “root” and the password blank and then click Install now

We’ve got some security warnings here. I’m going to ignore those for now because this isn’t going to be a real site + I’m a badass.

So it looks like we’re all set here. You should see a page with your admin login details and a link to the login page. I’m just going to go back to phpMyAdmin for a moment to see what happened in my database.

Nice. Let’s log into the backend of the new site.

Cool (note: your “pages” might look different – I’ve changed a couple things). It looks like we have something going here. I’ll start looking at what I can do with this in the next part but for now let’s just see what we have for a site front-end out of the box.

Alright, looks good.

Next: Playing with FrogCMS (Part 2: The Plan)

• serialize an array on one page (PHP: serialize($array))
• print out the results using echo or print_r
• grab the serialized data from another script using file_get_contents
• unserialize that array so I could go about my business

but I kept getting this error:

I looked around and couldn’t find a simple a solution. I’m sure this error can occur in other ways, but I was trying with the simplest of arrays:

Array("Ryan" => "Bosinger");

My problem was that my echo statement was throwing some whitespace in there. That’s all. This fixed it:

$data["search_results"] = file_get_contents("http://localhost/sphider/search.php?query=" . $search_for . "&search=1&start=" . $start);
$result_string = trim($data["search_results"]);
$result_array = unserialize($result_string);

Basically, try trimming the whitespace before unserializing. Hope that helps!

Also, I was using Codeigniter but I really don’t think that has anything to do with it.

To use it, just call the function where you’d like it show up like so:

<?php getFeed("http://ryanbosinger.com/blog/feed", 3); ?>

The second parameter is the amount of posts to show. It will write out as an unordered list. You can choose to write out different parts of the feed by changing: $x->channel->item[$i]->[name-of-feed-tag]

<?php
function getFeed($feed_url, $posts_to_show) {
 
	try 
	{
		$content = file_get_contents($feed_url);
		$x = new SimpleXmlElement($content);
 
		echo "<ul>";
 
		$i = 0;
 
		while ($i < $posts_to_show){
			echo "<li><a href=\"" . $x->channel->item[$i]->link . "\" title=\"" . $x->channel->item[$i]->title . "\" target=\"_blank\">" . $x->channel->item[$i]->title . "</a></li>";
			$i++;
		}
 
		echo "</ul>";
 
	} 
	catch (Exception $e) 
	{
		echo "<p>The blog feed doesn't seem to be available at the moment...</p>";
	}
}
?>