Creating U-tags to pull in dynamic content

Andrea Ritterbeck · August 2017

Hello!

I recently created a new version of our donation form that switches images upon hover. However, this feature is living in a pagebuilder for the moment until I can figure out how to call this into a U-tag so that others can switch the photos/text out when this wrapper is set or a form is copied.

I tried doing this once before, but was unsuccessful. There isn't much documentation on how to create this, or if there is could someone point me in the right direction?

A general break down or document would be helpful! Thanks so much!

Romany Nassief · August 2017

Hi Andrea,

I'll assume the number of image is unkown so you have (n) pairs of image/text to show in you wrapper based on passed session variable from page or donation form. Also, you already have js/jQuery that handle images rollover/pause when hover in/out.

1. From your page or donation form, initialize session variable with your pairs of image/text. For donation form, you can add HTML Caption element to your form elements and place the following U tag in.

[[U0:rollovers={image:'images/img1.jpg',text:'sample 1'},{image:'images/img2.jpg',text:'sample 2'},{image:'images/img3.jpg',text:'sample 3'}]]

2. In your wrapper, add an empty placeholder to your rollover component and some script to fill it in with session value.

<div class="js--rollover"></div><br /><br/><script><br /><span style="color:#A9A9A9;">// The following array declaration line must be within a WYSIWYG for S80 tag</span><br /><br/>var rollover = [].concat([[S80:rollovers]]);<br /><span style="color:#A9A9A9;">// You can keep the following loop here or add it to any external JS file that comming after above array declaration line.</span><br /><br/>rollovers.forEach(function(item, index){<br /><br/>  var rolloverItem = jQuery('<div class="item"></div>').appendTo('.js--rollover'),<br /><br/>      img = jQuery('<img src='+ item.image +'/>').appendTo(rolloverItem),<br /><br/>      caption = jQuery('<div></div>').text(item.text).appendTo(rolloverItem);<br /><br/>});<br /><br/></script>

Creating U-tags to pull in dynamic content

Comments

Categories