Custom field icons

You can display icons with your events to help calendar visitors more quickly identify events they are interested in and give your calendar a more professional look and feel. For example, you can assign icons to event categories or event locations and display those icons with events. The image below shows custom field icons displayed in Classic Table calendar view.

Event category icons in Classic Table view

What you learn here

• Prepare the icon images you want to use
• Associate icons with field values by creating a list of choices custom field
• How icons display in published views
• How to enable icons in spuds

Prepare the icon images you want to use.

For icons to look good in your published calendar views, it's important that you prepare the images properly before you upload them to Trumba® Connect.

• Create each icon image in the actual size you want it to appear in your published views.

  No resizing takes place after you upload. Typically, icons are under 20 pixels by 20 pixels in size.

• Include 2 or 3 pixels of space to the right of the icon to provide some padding to the right of the image.
• Save the image file with a transparent background in .png or .gif format.

  A transparent background typically makes sense for icons, but it's especially important if your calendar has a background color other than white.

Associate icons with field values

To associate icons with field values, you create a list of choices custom field. Then, you add the icons field to an event template so you can assign a field value (and, therefore, an icon) to each event you create.

Read a description of list of choices fields.

To associate icons with field values

1. Create a new custom field.
2. In the Create a New Custom Field form, type the field name.
3. In the Field Type section, for Field Type, select List of choices [create a new list].
4. Click Add New Value.

   In the popup window, click Enable Image Icon Field to add an image field to the form.

   You only have to do this once. For subsequent new values, the image field will be automatically available.

5. Type a name for the icon, and then click New.

   

   Adding a new value and icon.

   If you need help uploading, go here.

6. Click OK.
7. Repeat steps 4-6 to add all of the values with icons that you want to assign.
8. For Select multiple values, if you want event creators to have the option of assigning multiple values per field, select Yes.

   For example, if the events are classes and the field values are topics, you might want event creators to be able to add more than one topic per class event. See How icons display in published views for examples of how fields with multiple values display in published views.

9. In the Include in Templates section of the Create a New Custom Field form, select the templates in which you want the new field to be included.

   I haven't created any templates yet.

10. Click OK.
11. As you add events to the calendar, assign a value (and, therefore, an icon) to each new event.

    What do I do if I don't see the field I just created in the Add Event form?

How icons display in published views

Custom field icons can be displayed in most spuds including calendar views, event detail views, promotion spuds, filter spuds, RSS feeds, and the event actions window.

You have to enable icons separately for each individual spud.

How do I enable icons for spuds?

Icons in event titles

You can display custom field icons beside event titles in calendar views and promotion spuds. The image to the right shows icons in an upcoming promotion spud. If your field supports multiple values for an event, an icon for each value will be displayed with the event. If you have multiple custom fields with associated icons, you can select which fields to display icons for.

Icons with field values

In views that support displaying multiple custom field values, icons can be shown next to each value.

The following image shows an event detail view. An icon is associated with each value for the Course custom field.

Filter spud icons

If you filter by a field with associated icons, you can display the icons next to each field value in the filter spud. The image to the right shows icons displayed in the filter spud. Including icons in a filter spud helps comminucate the meaning of the icons in the main calendar view. Tip Icons are available for multiple-value (but not single-value) filters.

How to enable icons in spuds

Icons can be enabled on spuds through spud settings in the Publishing Control Panel. Select the Edit Settings & Styles link for each spud to access the settings shown below.

To enable icons on spuds

1. In the editing environment, display the calendar you want to customize, and then click Publish Settings. In the Publishing Control Panel, click the appropriate spud type tab.

   For example, to enable icons for a calendar view, click the Calendar Spuds tab. To enable icons for a filter spud, click the Control Spuds tab.

2. Add or find the spud you want, and then click Edit Settings & Styles.
3. On the Edit Settings page, in the Custom Field Icons section, select the field(s) that contain the icons you want to display.

   Tip Only list of choices fields are listed.

   

   Spud settings for displaying custom field icons.

4. If you see the Show field value icons option, select Yes if you want to display icons next to the field values they represent.

   

   Icons displayed next to field values in event detail view.