Menu

In the first lesson, we learnt how to make images editable by using <editable> tags around them, like this:

<editable name="image" label="Image">
<img src="" alt="" height="auto" width="600">
</editable>

This would give you fields for the src, alt text, height and width of the image. Sometimes you may not want this, for example if you didn't want the height or width of an image to be editable.

We can use fields to define exactly what appears in the editor, instead of Taxi automatically giving us these four fields.

Let's say we want the src and the alt text to have fields but we want height and width locked down. Find the image module in your HTML and inside the editable add a field for the image with the type set to src. 

<editable name="image" label="Image"> 
<field type= "src" name="src" label="Image"></field>

Now in the <img> tag, in addition to your src attribute, add a replace-src attribute. The value of this needs to be the name of the image field above, placed inside these brackets: {{ }}.

<img src="" replace-src="{{src}}">

The image you add to the image field in the editor will get used in the replace-src attribute.

You don't need to have replace-src and src in your Email Design System, just having replace-src will work as you need in Taxi. Having both can be useful when viewing the EDS outside of Taxi as it will act as the image before you upload to your account.

Now, do the same thing with the alt text. Include a field with a name and a label, with the type set to text. Then in the <img> tag, add a replace-alt attribute, with the value matching the name of your field. 

<field type="text" name="alt" label="Alt Text"></field>
<img src="" replace-src="{{src}}" alt="" replace-alt="{{alt}}">

Let's upload this EDS with the updated image module and see what's changed. If you don't have access to Taxi, here's a video showing how these fields will work.


Image Add-Ons: Bynder DAM Integration

Taxi supports integration with Bynder Digital Asset Management (DAM) systems, allowing you to browse and select images directly from your Bynder asset library when working with image fields.

How It Works

When Bynder integration is enabled for your organization, image fields display a Bynder option alongside the standard image upload and URL input options. Clicking Bynder opens Bynder's Universal Content Viewer (UCV), providing a familiar interface to browse, search, and select assets from your Bynder library.

Benefits

  • Centralized Asset Management — Access your entire Bynder asset library directly within Taxi, ensuring brand consistency and proper asset governance.
  • Seamless Authentication — Authentication is handled through Bynder's UCV component, providing secure access without storing credentials in Taxi.
  • Direct CDN URLs — Selected assets are inserted using their Bynder CDN URLs for optimal delivery performance.

Setup

To enable Bynder integration for your organization:

  1. Contact your Taxi account manager or support team
  2. Provide your Bynder portal URL (e.g., yourcompany.bynder.com)
  3. Once configured, Bynder will appear as an option in all image fields across your organization

Note: Bynder integration requires an active Bynder account with appropriate access permissions.

Next we'll look at colour fields and how you can use them to add more control to your Email Design System

← Back to /Code