Skip to main content

Companywide tags

Allows Project Manager users to edit slides on a companywide scale, eg. product slides that require regular copy/imagery updates.

Related links:

data-companywide-editable​

<span data-companywide-editable="{key}">
	<!-- default text -->
</span>
  • Basic editable text field
  • Apply the tag directly to the element containing editable text

data-readonly​

<div data-companywide-editable="{key}" data-readonly></div>
  • Editable field becomes "read-only"
  • Designed for use with linked fields

data-warn-on-overflow​

Displays warning message "there's not enough room for what you've typed" when text overflows an editable area.

info

Editable element must have height/max-height specified.

data-toolbar​

<span data-companywide-editable="{key}" data-toolbar="{options}">
	<!-- default text -->
</span>
  • Adds a toolbar to editable text fields, enabling rich-text (html) options
  • Available options: format, list, style, color, superscript, link and removeformat
  • see formatting & rich text for details
info

While you can add this tag to any element that can contain text, it is recommended to try to use <div>, <span> or basic text DOM elements (eg. <h1>, <h3>, <p> etc.) wherever possible.

data-scrollup-on-blur​

Automatically scrolls overflowing text back to the top when a user clicks out of the editable field.

info

Editable element must have height/max-height specified.

data-companywide-dynamic-image​

<div data-companywide-dynamic-image="{key}"></div>
  • Editable image field
  • Defaults to background-image

data-img​

<div data-companywide-dynamic-image="{key}" data-img></div>
  • Converts an editable background-image to an img tag
  • img tag is inserted into the tagged div/element

data-readonly​

<div data-companywide-dynamic-image="{key}" data-readonly>
  <!-- read-only text here -->
</div>
  • Image field becomes "read-only"
  • Designed for use with linked fields

data-save-max-(width|height)​

<div data-companywide-dynamic-image="{key}"
  data-save-max-width="1024"
  data-save-max-height="768">
</div>

By default, images are saved after cropping to the size of the image container. For example, if the above had css setting the div to 100x100, the saved image would be 100x100.

If save-max-width and save-max-height are set, the image will be uploaded after downscaling to the set size. Ie, the container might be 100x100, but the image inside would upload at 500x500.

note

If the image uploaded dimensions is under the max-width and height set, then no scaling occurs. It's up to the content developer to scale the image appropriately to fit.

caution

The data-companywide-dynamic-image container must be in the same aspect ratio as your max width and height. This is to prevent scaling the image incorrectly.

For example: You might want to set your container to be 256x192 to match the aspect ratio of 1024x768. Will fallback to container size on failure.

caution

Both data-save-max-width and data-save-max-height must be set to use the feature. Will fallback to container size on failure.

data-companywide-youtube-player​

<div data-companywide-youtube-player="{key}"></div>
  • Editable video field
  • Field accepts YouTube video IDs and URLs
  • YouTube iFrame will be loaded within the tagged element

data-companywide-interactive​

<div data-companywide-interactive></div>
  • Allows tagged element to keep pointer events in the editing environment
  • Anything without this tag will have pointer events removed

Dynamically inserting companywide fields​

Each companywide field used by a slide must be included in the slide's index.html in order for the field to become editable in PresoManager. If a field needs to be dynamically inserted into the DOM after the slide has rendered, you can add an invisible read-only field with a companywide key to the slide's index.html and then dynamically insert another field with the same data key later. See the injecting companywide edited copy guide on how to do this.

Things to look out for​

Be wary of how dynamic content affects other elements of a slide, particularly changing heights/widths of editable text fields. The most common ways to avoid breaking a slide's layout is a combination of the following:

  • Setting a strict height and/or width
  • Setting a max-height and/or max-width
  • Setting the absolute/relative position of elements