Calendar Events in TextPattern

Posted in . There are 0 responses.

I’ve done two or three websites driven by TextPattern where the client wanted to show calendar events. I’ve never been happy that TXP doesn’t have a built-in solution for this, and it seems like every time I try to implement this feature it feels ultra-hacked and not very user-friendly for entering calender events. I recently came across the zem-event plugin and gave it a whirl, but I never really got it working properly and there was very little documentation for it. Not to mention, it seemed more complicated to use and even more hacked than any of the other solutions I came up with.

I recently came up with a somewhat decent solution for implementing calendar events. All it requires is a little PHP and the use of TXP Global variables.

A List of Demands

First, here is my list of requirements for implementing calendar events:

  • The events must be able to be displayed in any date-format of our choosing
  • They need to be displayed in order of their occurrence, whether it be descending or ascending
  • They can be entered into TXP in any order, without effecting the order they will be displayed
  • I don’t want to create multiple custom fields, or using existing fields not intended for their purpose
  • Most importantly, it must be easy for the client to create a calendar event

Putting It All Together

I’d like to mention that the focus of this article is not about HTML or common TXP tags, and I will not go into detail about them. There are plenty of free resources and examples available on the web (I also highly recommend the book TextPattern Solutions).

Let’s get started by creating the custom field in TXP. Go to Admin > Preferences > Advanced, and scroll down the page until you come to the Custom Field section. Enter the name you wish to call the custom field in the first available spot. I named mine event_date.

Next, go to Content > Write and create a few events so that we have something to work with. Since the title field is mandatory, we’ll use that for the event name. In the body section, you may want to enter in some details for the event, such as time or location. Over in the left column you’ll see the new custom field we created. Enter the event date, but it’s imperative you use the following format: YYYYMMDD. I use this because its a single number that’s easy to break apart and allows for easy sorting in order of its occurrence. This way calendar events (or technically, articles) can be created out of order, and will still sort properly.

I want to display my calendar events using a table where each event has its own row. On the page where the calendar events are going to be displayed, I’ll use the following code:

<table cellspacing="0" cellpadding="0" border="0">
  <thead>
    <tr>
      <td>Date</td>
      <td>Event</td>
      <td>Details</td>
    </tr>
  </thead>
  <tbody>
    <txp:article_custom sort="custom_1 asc" section="calendar" form="display_events" limit="5" />
  </tbody> </table>

I’m telling TXP to sort the calendar events in ascending order using the custom field we created. Note that you actually use custom_ and field number—not the name of the custom field. Also, you could just as easily have the calender events sort descending by changing asc to desc. I’ve talked more about sorting articles by custom fields in a previous article. Next we’ll create the form that the above code references, display_events which will format the calendar events:

<tr>
  <td><txp:php>echo convert_date($GLOBALS['thisarticle']['event_date']);</txp:php></td>
  <td><txp:title /></td>
  <td><txp:body /></td> </tr>

This code is calling the convert_date function (which hasn’t been created yet), and is passing the data from the custom field event_date into the function so that it can be manipulated. Normally when you want to display data from a TXP custom field, you use <txp:custom_field name="event_date" />. However, because we’re writing this code between PHP tags, TXP will not recognize any of it’s own tags. This is why we’re using $GLOBALS['thisarticle']['event_date'] — this is how TXP accesses global variables via PHP. When it’s all said and done, this code is going to pass the YYYYMMDD formatted event_date to the function convert_date. To learn more about accessing global variables in TXP, I highly recommend reading this article written by Matt Harris.

Now we need to create the PHP function, which we’ll store in a separate file:

<?php

 function convert_date($num) {

  $month = substr($num, 4, 2);
  $day = substr($num, 6, 2);
  $year = substr($num, 0, 4);

  switch ($month) {
    case "01": $month_name = "January"; break;
    case "02": $month_name = "February"; break;
    case "03": $month_name = "March"; break;
    case "04": $month_name = "April"; break;
    case "05": $month_name = "May"; break;
    case "06": $month_name = "June"; break;
    case "07": $month_name = "July"; break;	
    case "08": $month_name = "August"; break;
    case "09": $month_name = "September"; break;
    case "10": $month_name = "October"; break;
    case "11": $month_name = "November"; break;
    case "12": $month_name = "December"; break;
    }

  $converted_date = $month_name . " " . $day . ", " . $year;

  return $converted_date;

} ?>

This function takes the event date from the custom field and returns the event date in any format of our choosing. In this case I’m returning the date in the following format: Month DD, YYYY. I’ll break the function down piece by piece:

$month = substr($num, 4, 2);
$day = substr($num, 6, 2);
$year = substr($num, 0, 4);

These lines of code takes in the number passed into the function and breaks it apart into three variables: $month, $day, and $year. The substr() function is a very useful tool. I’ll use the $month variable as an example: It’s looking at the number stored in the variable $num, and starting directly after the fourth number, it is extracting the fifth and sixth number. I’m using the same method to extract the variables for $day and $year.

switch ($month) {
    case "01": $month_name = "January"; break;
    case "02": $month_name = "February"; break;
    ... }

Using the switch method is an efficient alternative to having to use multiple if... elseif statements. This block of code is using the switch statement to look at the two-digit value stored in $month variable and assigning the written-out month.

  $converted_date = $month_name . " " . $day . ", " . $year;

  return $converted_date;

And this last little bit is stringing together all the variables and returning the date to be displayed. Now we’ll save this PHP file and name it “functions.php”.

One last step and this will be good to go. We need to include the PHP file that has the above function, convert_date, in it. I saved “functions.php” in a folder, “_php”. Note that your file location may be different.

<txp:php>
require_once($_SERVER['DOCUMENT_ROOT'] . "/_php/functions.php"); </txp:php>

We Made It

That’s it! I’ve found this method of incorporating calendar events with TextPattern to be quite useful. It’s effective and simple-to-implement. In the meantime, I’ll keep dreaming about that future release of TXP with calendar functionality built-in.

Dynamic Image Borders v2.0

Posted in . There are 1 responses.

I found the time to go back to Dynamic Image Borders and work with it a little more.

Version 2.0 no longer relies on jQuery, saving the user around 30K in file size. It also no longer requires any extra CSS to be included as that is handled by the new Javascript file. Version 2.0 is easier to implement, only weighs about 3K, and has been tested on Firefox 3, Safari 3, Internet Explorer 6 and 7.

I welcome any feedback and/or suggestions.

View the demo or download the source.

Custom Article Sorting with TextPattern

Posted in . There are 0 responses.

I first want to mention that this is incredibly easy to implement and doesn’t require any TextPattern hacking. I learned of this tip from textpattern.org.

The Situation

I recently had a client that wanted control over the order articles were displayed. I prefer to sort articles by Title, Posted Date, or Last Modified Date because it’s a logical hierarchy. However, depending on how you’re using TextPattern, it may not always make sense to sort articles in methods previously listed.

In my client’s case, the website was going to have articles that would act as static pages within sections. Here’s an example of the section/page structure:

  • About Us
    • Mission Statement
    • Company Information
    • Values

We have the section (which is also the root page) “About Us” and under this we have three pages, “Mission Statement”, “Company Information”, and “Values”. To set this up in TextPattern we’re going to create four articles, each corresponding with the four pages I just mentioned.

If you look at the example above, the pages aren’t in alphabetical order, so we can’t sort by title. We could’ve create the pages in order and sort by posted date, but it’s not always likely that pages are created in the order they’ll be displayed.

So How Do I Sort Them?

I created a custom field called “sort_order” and enter the number of the order the article should appear. The root page, “About Us” has a sort_order value of “1”, “Mission Statement” has a sort_order value of “2”, and so on. Then I use the following TextPattern snippet to display the articles:

<txp:article_custom sort="custom_3 asc" section="About Us" form="output_navigation" limit="999" />

There’s no TextPattern magic here, it’s taking the value from the sort attribute and plugging it into the SQL query. This means you could sort entries by just about any field. Keep in mind that if you’re going to sort using this method, you have to use the name of the field from the database table, and not the custom field name.

Length of a Diagonal Line in Flash

Posted in . There are 0 responses.

I’m working on a project in Flash right now where I have an object that needs to follow a motion path of a diagonal line. It’s sounds really easy, but the object is only suppose to move in increments, controlled by user-supplied data, which requires some ActionScripting. This also means that we need to dynamically get the length of the diagonal line because it’s length may vary. If you think that simply using the _width property works, you’re wrong! The _width property only looks at the x-axis of an object, obviously not taking the y-axis of the diagonal line into account.

Remember The Pythagorean Theorem?

Does this ring any bells? Yeah, I haven’t used it since I graduated from college either. In fact, I specifically went into graphic and web design so I wouldn’t have to remember it. Wikipedia does a much better job explaining it than I ever could:

The sum of the areas of the two squares on the legs (a and b) equals the area of the square on the hypotenuse (c).

Here’s a horrible diagram that I did up quickly that might make it easier to understand what we’re talking about.

Pythagorean Theorem

Now What?

In Flash, start by drawing the right triangle with the desired length of the hypotenuse. It makes it a lot easier if you do this with no fill. Next, select each side of the triangle and convert them into separate movie clips and give each one an instance name. I named mine: Triangle_x (corresponding with the line on the x-axis), Triangle_y (corresponding with the line on the y-axis) and hypotenuse (the diagonal line), respectively. Then we take the formula of the Pathagorean Theorem and apply it to our ActionScript:

var xaxis = Math.ceil(Triangle_x._width * Triangle_x._width);
var yaxis = Math.ceil(Triangle_y._height * Triangle_y._height);
var hypotenuse = Math.ceil(Math.sqrt(xaxis + yaxis));

For the variable xaxis we want to get the width of the horizontal line and multiply it by itself, which is the same thing as squaring it. For the variable yaxis we do the same that we did for xaxis, except that we want the height since it is a vertical line. For the variable hypotenuse we want the square root of xaxis and yaxis added together. It’s also important to note that we’re using the Math.ceil function to round all of our numbers up — this will make life a lot easier not having to deal with repeating decimal numbers.

We could just use the hypotenuse as our motion guide, but for whatever reason, it appears that flash can not retrieve properties of a motion guide. The easy solution is to just copy the hypotenuse and paste it into a new layer to use it as your motion guide. Finally, set the alpha level for the three movie clips (that make up the triangle) to zero so that they won’t be visible. Anytime you wish to access the length of the diagonal line (hypotenuse), it can be referenced by the variable hypotenuse. Simple, right?

Back to top