Get Started Lesson 3: Control and promotion spuds

1. Go to the Trumba Connect home page. Click Sign in to sign in to your Trumba account.
2. Confirm that the Community Events calendar is listed under Current Publication and that the name of the calendar is bold and has a black check mark to the left of it.
3. Click the blue Publish button.

Because the calendar is already published, you'll open the Publishing Control Panel.

4. Click the Calendar Spuds tab, and then, in the top right corner, click Add a Calendar View.
5. On the Add Calendar View page, select Compact List, and then click OK. On the Edit Settings page, click OK to accept the default settings.

   Back on the Publishing Control Panel page, under Available Calendar Views, you should now see three calendar view boxes, Classic Table, 3 Columns, and Compact List.

6. Click the Control Spuds tab, and then, in the upper right corner, click Add a Control Spud.
7. On the Add Spud page, select View Chooser, and then click OK.
8. On the Edit Settings page, for Label, replace the default text with Choose a view:, and then click OK.

   On the Control Spuds tab, you should now see two control spud boxes, Filter (that you added in Lesson 2) and View Chooser.

9. In the View Chooser window, at the bottom left, click Preview.

   

   Previewing the view chooser spud

   In the preview window, notice that the custom label you typed appears above the drop-down list. Expand the list to see that the three calendar views are listed. Close the preview window.

10. To try out the view chooser spud, on the Publishing Control Panel page, click the Hosted View tab. At the bottom left of the Hosted View window, click Preview.

    Use the view chooser spud to switch views and display the events in different ways. When you're finished experimenting, close the window.

    Tip At the end of this lesson, we step through the process of embedding the view chooser spud code into a web page.

Tip Before you create and customize a promotion spud, confirm that the three events you added to your calendar in Lesson 1 are in the future. To change an event date, in the Trumba editing environment, on the calendar, click the event description. On the Edit page, under Start, set a future date within the next 60 days, and then click OK.

1. On the Publishing Control Panel page, click the Publish Settings tab, and then click Edit Publish Settings.

Tip If you're not on the Publishing Control Panel page, go back to the procedure for adding a control spud, and follow the first three steps.

2. On the Edit Publish Settings page, under Publish Settings, find the Calendar address field. This is where you type the URL for the calendar page on your website.

   Note Since you're working through an example, you may not have a URL to type right now but you know where to find the field in the future. Later on, we'll customize an individual teaserBase property so you can see how it works.

3. Click OK to return to the Publishing Control Panel page.
4. Click the Promotion Spuds tab, and then click Add a Promotion Spud.
5. On the Add Spud page, select Photo Upcoming, and then click OK.

   Tip Whether or not you include photos with your events, the photo upcoming spud is one of the most versatile promotion spuds you can use. This spud gives you the option of selecting the fields that you want to include with each event.

6. On the Edit Settings page, on the Settings tab, under Display Settings, you see the fields that will be listed for each event. To include one of the custom fields we created in Lesson 2, click [add new field], and then click Age Range.
7. Under Paging, for Events Per Page, type 3.
8. Under Display Options, for Footer calendar link label, replace See all with Visit our full calendar.
9. Click the Styles tab. Under General, for Border size, type 2px. Under Description, change the font size to 9pt. Click OK.
10. On the Promotion Spuds tab, in the Photo Upcoming box, at the bottom left, click Preview.

    

    Previewing the photo upcoming spud

    In the preview window, notice that the custom age range field we added and the custom footer link label we typed appear in the spud preview.

    Tip Your promotion spud preview may not include photos like the preview here. To show off the full potential of this spud, we added images to our events. To learn more about images in publications, see Store images with publications and add them to events.

1. Open calendarpage.html in a text or HTML editor.
2. From the calendar page in your Trumba account, click Publish to open the Publishing Control Panel. Click the Control Spuds tab.
3. In the View Chooser box, copy the spud code. Paste the code into the calendarpage.html page.

   Tip At this point, you might want to contain the spud code in a table so that the main calendar, view chooser, and filter spuds look better on the page. For example, our code for calendarpage.html looks like the following:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Main calendar and control spuds test page</title>
   </head>
   
   <body>
   
   <h1>Main calendar and control spuds</h1>
   
   <table width=800 border=0 cellpadding=10 cellspacing=0>
   

   <tr valign=top>
   

   <td width=200>

   <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
   <script type="text/javascript">
   $Trumba.addSpud({
   webName: "community-events-demo",
   spudType : "chooser" });
   </script>
   <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
   <script type="text/javascript">
   $Trumba.addSpud({
   webName: "community-events-demo",
   spudType : "filter" });
   </script>

   </td>
   <td width=600>

   <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
   <script type="text/javascript">
   $Trumba.addSpud({
   webName: "community-events-demo",
   spudType : "main" });
   </script>
   <noscript>Your browser must support JavaScript to view this content.
   Please enable JavaScript in your browser settings then try again.
   <a href='http://www.trumba.com'>Events calendar powered by Trumba</a></noscript>

   </td>

   </tr>

   </table>
   
   </body>
   </html>
4. In the Trumba Publishing Control Panel, click the Promotion Spuds tab.
5. In the Upcoming Events box, copy the spud code. Paste the code into a new HTML page called promopage.html.

   Tip The promotion spud with look better if you enclose it in a table with an assigned width of 300 pixels or so.

6. To customize the code you just pasted so clicks on the promotion spud open calendarpage.html, replace the default URL in the teaserBase property with calendarpage.html.
   <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
   <script type="text/javascript">
   $Trumba.addSpud({
   webName: "community-events-demo",
   spudType : "upcomingphoto" ,
   teaserBase : "calendarpage.html" });
   </script>
   <noscript>Your browser must support JavaScript to view this content. Please enable JavaScript in your browser settings then try again. <a href='http://www.trumba.com'>Events calendar powered by Trumba</a></noscript>
7. Open promopage.html in a browser. Click an event description or the link in the footer of the photo upcoming spud to go to the full calendar page.