Go to Index

Placeholders in the Skin

Learn how to use placeholders in the skin to dynamically make changes using variables in a 2-node tour.

If you’d like to follow along, here are the general steps used in the tutorial:

  1. Add a tag to Node 1. (tag1)

  2. Add a different tag to Node 2. (tag2)

  3. Open the Skin Editor.

  4. Add a text variable. This lets you use a placeholder that will use this variable to dynamically change the text.

    1. Give it a name. In this case, it’s url.
    2. Add the initial value; the starting URL.

  5. Add a text box.

  6. Remove the default text.

  7. Add a logic block to the text of the text box with two conditions:

    1. Trigger = Tag; Comparison = contain; Value: tag1; Text = Go to website a.
    2. Trigger = Tag; Comparison = contain; Value: tag2; Text = Go to website b.

  8. Add an action to the text box:

    1. Source = Mouse Click; Action = Go To URL; URL = $(*url)

  9. Add actions to change the variable’s value.

    1. Source = Images Ready; Action = Set Variable Value; Variable name = the name of the variable added in step 4 (url); Operation = Set(=); Value = http://www.example.com.
    2. Add an action filter to this action:
      • Trigger = Tags (Tour > Tags); Comparison = contain; Tag = tag1. This action will only execute if the image has the tag, tag1.

  10. Copy that action and paste it to duplicate it.

    1. Source = Images Ready; Action = Set Variable Value; Variable name = the name of the variable added in step 4 (url); Operation = Set(=); Value = http://www.example2.com.
    2. Add an action filter:
      • Trigger = Tags (Tour > Tags); Comparison = contain; Tag = tag2. This action will only execute if the image has the tag, tag2.

  11. Publish out to test. The text box should now change its text and it’s link when the node changes.

See also