Documentation

Configuration

Once added as a global custom card, users can create special links, or HTML to trigger the overlay. Content for the overlays come from any other ThoughtFarmer page.

Configuration

  1. Create a new ThoughtFarmer page as the source.
  2. Add summary content. If no summary is present, the body content will be used.
  3. Add a featured image and crop accordingly using the provided tools. If no featured image is added then it will be a text only overlay.
  4. Save the changes
  5. Go to the page you want to add the overlay and add some content
  6. Switch to HTML mode by clicking the Source button in the Rich text editor tool bar.
  7. Add a link <a></a> around the content you wish to show the overlay (or any HTML element will work). You can even use the Rich text editor Link tool to get you started. Then apply the following attributes in the Source view:
    • class (required): It must have a class tfc-content-overlay  to tell the customization to trigger.
    • data-contentid (required): The content ID for the page it is coming from. Taken from your source pages URL. 
    • data-height (optional): The desired height. Will use 200px as default.
    • data-width (optional): The desired width. Will use 200px as default.
    • data-imageposition (optional): The desired position of the image. Will ignore if there is no featured image on the configured contentid. Will use left as default.
    • href: If not already specified, be sure to add this in to the location the user should go when they click in the overlay. If you use the Link Browser tool before switching to HTML view.

Here is an example link:
<a class="tfc-content-overlay" data-contentid="103877" data-height="400px" 
data-imageposition="right" data-width="550px" href="/content/103877">An interactive Organizational Chart</a>