# Converting HTML Sections

## Video Walkthrough

{% embed url="<https://youtu.be/NmpicvVxt9Q>" %}

## Case

There are times when HTML needs to be converted to embeds or a different HTML structure. For instance, when script tags are not supported in the destination system, or are converted automatically to something non-functional.&#x20;

## Solution

ImpulseSync can solve this using it's manipulators such as [Liquid](https://motivlabs.gitbook.io/impulse-user-manual/content-manipulators-motators/liquid-field).&#x20;

This example will show four different, albeit similar, configurations of a liquid manipulator in how a section of HTML can be parsed, converted, and replaced.&#x20;

Each manipulator's configuration will parse out the required variable values. Then use those variable vaules in combination with static text to create a new HTML section. Then the new section will replace the old section based on the class name.&#x20;

### example 1

<details>

<summary>From</summary>

```html
<div class="embed-container-facebook" embed-exclude="">
  <div
    class="fb-post"
    data-href="https://www.facebook.com/moseslake.firefighters/posts/3571051763021296"
    data-show-text="true"
    data-width="500"
    embed-exclude=""
  >
    <blockquote
      cite="https://www.facebook.com/moseslake.firefighters/posts/3571051763021296"
      class="fb-xfbml-parse-ignore"
      embed-exclude=""
    >
      <p embed-exclude="">
        Here is a still from the drone footage being utilized to measure fire
        activity and the anhydrous ammonia leak ongoing at the
        #WashingtonPotatoFire
      </p>
      Posted by
      <a
        embed-exclude=""
        href="https://www.facebook.com/moseslake.firefighters/"
        >Moses Lake Firefighters</a
      >
      on&nbsp;<a
        embed-exclude=""
        href="https://www.facebook.com/moseslake.firefighters/posts/3571051763021296"
        >Thursday, January 21, 2021</a
      >
    </blockquote>
  </div>
  <style embed-exclude="" type="text/css"></style>
</div>
```

</details>

<details>

<summary>To</summary>

```html
<p>
  <iframe
    src="https://www.facebook.com/moseslake.firefighters/posts/3571051763021296"
    data-type="social-embeds"
  ></iframe>
</p>
```

</details>

#### Liquid Template

```liquid
{% assign fbsrc = content.en.fields.body.value | section: 'class="embed-container-facebook"', '</div>' | section: 'data-href="', '"' %}

{% if fbsrc == '' %} 
  {{ content.en.fields.body.value }}
{% else %}
  {% assign shortcode = '<p><iframe src="' | append: fbsrc | append: '" data-type="social-embeds"></iframe></p>' %}
  {{ content.en.fields.body.value | htmlReplace: '.embed-container-facebook', shortcode }}
{% endif %}
```

### example 2

<details>

<summary>From</summary>

```html
<div
  class="wistia_responsive_padding"
  style="padding: 56.25% 0 0 0; position: relative"
>
  <div
    class="wistia_responsive_wrapper"
    style="height: 100%; left: 0; position: absolute; top: 0; width: 100%"
  >
    <iframe
      width="100%"
      height="100%"
      src="
    https://fast.wistia.net/embed/iframe/hfxe0uritp?seo=true&amp;videoFoam=true
    "
      title="BioProcess Theater_Chris Berger_v1 Video"
      allow="autoplay; fullscreen"
      allowtransparency="true"
      frameborder="0"
      scrolling="no"
      class="wistia_embed"
      name="wistia_embed"
      msallowfullscreen=""
    ></iframe>
  </div>
</div>
<p>
  <script
    src="
    https://fast.wistia.net/assets/external/E-v1.js
    "
    async
  ></script>
</p>
<script
  charset="ISO-8859-1"
  src="
    http://fast.wistia.com/static/concat/iframe-api-v1.js
    "
></script>
```

</details>

<details>

<summary>To</summary>

```html
<p>
  [[scm-embed type="wistia" id="hfxe0uritp" padding-top="56.25%"
  src="https://fast.wistia.net/embed/iframe/hfxe0uritp?seo=true&amp;videoFoam=true"]]
</p>
```

</details>

#### Liquid Template

```liquid
{% assign src = content.en.fields.body.value | section: 'iframe', '</iframe>' | section: 'src="', '"' | strip | replace: '&', '&amp;' %}
{% assign id = content.en.fields.body.value | section: 'iframe', '</iframe>' | section: 'src="', '"' | section: 'iframe/', '?' %}
{% assign padding = content.en.fields.body.value | section: 'wistia_responsive_padding', '>' | section: 'padding:', ';' | strip | split: ' '%}

{% if id == '' or src == '' %} 
  {{ content.en.fields.body.value }}
{% else %}
  {% assign shortcode = '<p>[[scm-embed type="wistia" id="' | append: id | append: '" padding-top="' | append: padding[0] | append: '" src="' | append: src | append: '"]]</p>' %}
  {{ content.en.fields.body.value | htmlReplace: '.script', '' | htmlReplace: '.wistia_responsive_padding', shortcode }}
{% endif %}
```

### example 3

<details>

<summary>From</summary>

```html
<script
  src="https://fast.wistia.com/embed/medias/zp9uc2wgoe.jsonp"
  async
></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div
  class="wistia_responsive_padding"
  style="padding: 56.25% 0 0 0; position: relative"
>
  <div
    class="wistia_responsive_wrapper"
    style="height: 100%; left: 0; position: absolute; top: 0; width: 100%"
  >
    <div
      class="wistia_embed wistia_async_zp9uc2wgoe videoFoam=true"
      style="height: 100%; position: relative; width: 100%"
    >
      <div
        class="wistia_swatch"
        style="
          height: 100%;
          left: 0;
          opacity: 0;
          overflow: hidden;
          position: absolute;
          top: 0;
          transition: opacity 200ms;
          width: 100%;
        "
      >
        <img
          style="
            filter: blur(5px);
            height: 100%;
            object-fit: contain;
            width: 100%;
          "
          src="https://fast.wistia.com/embed/medias/zp9uc2wgoe/swatch"
          alt=""
          aria-hidden="true"
        />
      </div>
    </div>
  </div>
</div>
```

</details>

<details>

<summary>To</summary>

```html
<p>
  [[scm-embed type="wistia" id="zp9uc2wgoe" padding-top="56.25%"
  src="https://fast.wistia.com/embed/medias/zp9uc2wgoe/swatch"]]
</p>
```

</details>

#### Liquid Template

```liquid
{% assign src = content.en.fields.body.value | section: 'img', '</img>' | section: 'src="', '"' | strip %}
{% assign id = content.en.fields.body.value | section: 'script', '</script>' | section: 'src="', '"' | split: '/' %}
{% assign idIndex = id | size | plus: '-1' %}
{% assign padding = content.en.fields.body.value | section: 'wistia_responsive_padding', '>' | section: 'padding:', ';' | strip | split: ' '%}

{% if id == '' or src == '' %} 
  {{ content.en.fields.body.value }}
{% else %}
  {% assign cleanId = id[idIndex] | section: 'BOF', '.'%}
  {% assign shortcode = '<p>[[scm-embed type="wistia" id="' | append: cleanId | append: '" padding-top="' | append: padding[0] | append: '" src="' | append: src | append: '"]]</p>' %}
  {{ content.en.fields.body.value | htmlReplace: '.script', '' | htmlReplace: '.wistia_responsive_padding', shortcode }}
{% endif %}
```

### Example 4

<details>

<summary>From</summary>

```html
<div class="embed-container-instagram" embed-exclude="">
  <blockquote
    class="instagram-media uuid-16aa4a37-b00d-488a-835b-b9220468aff6"
    data-instgrm-captioned=""
    data-instgrm-permalink="https://www.instagram.com/p/CVn4qCPvuyB/?utm_source=ig_embed&amp;utm_campaign=loading"
    data-instgrm-version="14"
    embed-exclude=""
    style="
      background: #fff;
      border: 0;
      border-radius: 3px;
      box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15);
      margin: 1px;
      max-width: 540px;
      min-width: 326px;
      padding: 0;
      width: 99.375%;
      width: -webkit-calc(100% - 2px);
      width: calc(100% - 2px);
    "
  >
    <div
      class="uuid-cf2f2667-9be8-4fb2-a2b3-940bec6f4c9c"
      embed-exclude=""
      style="padding: 16px"
    >
      <div
        class="uuid-1e896b16-d4c8-4aad-8925-5ba6c31ab43e"
        embed-exclude=""
        style="align-items: center; display: flex; flex-direction: row"
      >
        <div
          class="uuid-904face9-2679-49f7-8e94-46eaf03e64af"
          embed-exclude=""
          style="
            background-color: #f4f4f4;
            border-radius: 50%;
            flex-grow: 0;
            height: 40px;
            margin-right: 14px;
            width: 40px;
          "
        >
          &nbsp;
        </div>
        <div
          class="uuid-79f16603-27ea-4a0f-a25a-81a827db6ee8"
          embed-exclude=""
          style="
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            justify-content: center;
          "
        >
          <div
            class="uuid-b6c05e11-fd92-4cfb-9810-87a64d0427ed"
            embed-exclude=""
            style="
              background-color: #f4f4f4;
              border-radius: 4px;
              flex-grow: 0;
              height: 14px;
              margin-bottom: 6px;
              width: 100px;
            "
          >
            &nbsp;
          </div>
          <div
            class="uuid-2cc963bc-c988-4812-a168-945ab3ccb48e"
            embed-exclude=""
            style="
              background-color: #f4f4f4;
              border-radius: 4px;
              flex-grow: 0;
              height: 14px;
              width: 60px;
            "
          >
            &nbsp;
          </div>
        </div>
      </div>
      <div
        class="uuid-acc1567a-0999-48fa-81aa-5ee8069dad1b"
        embed-exclude=""
        style="padding: 19% 0"
      >
        &nbsp;
      </div>
      <div
        class="uuid-bea31750-cfd2-4dff-92e7-9887849ed02a"
        embed-exclude=""
        style="
          display: block;
          height: 50px;
          margin-bottom: 12px;
          margin-left: 12px;
          margin-right: 12px;
          margin-top: 12px;
          width: 50px;
        "
      >
        &nbsp;
      </div>
      <div
        class="uuid-c6b058a3-02c0-4cc0-8e6e-15d98614fafd"
        embed-exclude=""
        style="padding-top: 8px"
      >
        <div
          class="uuid-0c4dbee5-8c94-4d64-b2e4-e0330cba4106"
          embed-exclude=""
          style="
            color: #3897f0;
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 550;
            line-height: 18px;
          "
        >
          <a
            class="uuid-9f69b345-ec9b-43e6-b6b7-03621812b648"
            href="https://www.instagram.com/p/CVn4qCPvuyB/?utm_source=ig_embed&amp;utm_campaign=loading"
            style="
              background: #ffffff;
              line-height: 0;
              padding: 0 0;
              text-align: center;
              text-decoration: none;
              width: 100%;
            "
            target="_blank"
            target="_blank"
            target="_blank"
            target="_blank"
            target="_blank"
            >View this post on Instagram</a
          >
        </div>
      </div>
      <div
        class="uuid-6d288f1e-c669-42e5-9c82-888a78310f6d"
        embed-exclude=""
        style="padding: 12.5% 0"
      >
        &nbsp;
      </div>
      <div
        class="uuid-3b7e469b-517d-4e20-9773-cb11e3320ba3"
        embed-exclude=""
        style="
          align-items: center;
          display: flex;
          flex-direction: row;
          margin-bottom: 14px;
        "
      >
        <div embed-exclude="">
          <div
            class="uuid-1caa5c07-9053-4d4c-8b03-ecc12952bcfc"
            embed-exclude=""
            style="
              background-color: #f4f4f4;
              border-radius: 50%;
              height: 12.5px;
              transform: translateX(0px) translateY(7px);
              width: 12.5px;
            "
          >
            &nbsp;
          </div>
          <div
            class="uuid-7044e7cf-517d-459a-beec-27e7a4cfce15"
            embed-exclude=""
            style="
              background-color: #f4f4f4;
              flex-grow: 0;
              height: 12.5px;
              margin-left: 2px;
              margin-right: 14px;
              transform: rotate(-45deg) translateX(3px) translateY(1px);
              width: 12.5px;
            "
          >
            &nbsp;
          </div>
          <div
            class="uuid-99fa2507-37d3-40df-afa2-0e9a50a33c1a"
            embed-exclude=""
            style="
              background-color: #f4f4f4;
              border-radius: 50%;
              height: 12.5px;
              transform: translateX(9px) translateY(-18px);
              width: 12.5px;
            "
          >
            &nbsp;
          </div>
        </div>
        <div
          class="uuid-ab4b5824-8e4f-4763-9e0b-3966d4fb6339"
          embed-exclude=""
          style="margin-left: 8px"
        >
          <div
            class="uuid-d6461363-9835-409a-9aa2-c518b27af28c"
            embed-exclude=""
            style="
              background-color: #f4f4f4;
              border-radius: 50%;
              flex-grow: 0;
              height: 20px;
              width: 20px;
            "
          >
            &nbsp;
          </div>
          <div
            class="uuid-c5c21d7c-33dc-41df-b08b-9ea10f4ff521"
            embed-exclude=""
            style="
              border-bottom: 2px solid transparent;
              border-left: 6px solid #f4f4f4;
              border-top: 2px solid transparent;
              height: 0;
              transform: translateX(16px) translateY(-4px) rotate(30deg);
              width: 0;
            "
          >
            &nbsp;
          </div>
        </div>
        <div
          class="uuid-40f9b112-cea9-4b88-ad23-2a88ab14560c"
          embed-exclude=""
          style="margin-left: auto"
        >
          <div
            class="uuid-8ede3292-7261-4a74-a5a1-69478d1e58b3"
            embed-exclude=""
            style="
              border-right: 8px solid transparent;
              border-top: 8px solid #f4f4f4;
              transform: translateY(16px);
              width: 0px;
            "
          >
            &nbsp;
          </div>
          <div
            class="uuid-cbced345-c617-4004-8dbd-76ddce9a2dbc"
            embed-exclude=""
            style="
              background-color: #f4f4f4;
              flex-grow: 0;
              height: 12px;
              transform: translateY(-4px);
              width: 16px;
            "
          >
            &nbsp;
          </div>
          <div
            class="uuid-c0a9135f-4c47-452b-8d05-d6b87cacb31d"
            embed-exclude=""
            style="
              border-left: 8px solid transparent;
              border-top: 8px solid #f4f4f4;
              height: 0;
              transform: translateY(-4px) translateX(8px);
              width: 0;
            "
          >
            &nbsp;
          </div>
        </div>
      </div>
      <div
        class="uuid-3e565a44-85d3-41a5-98e9-46a1bbe5fbd6"
        embed-exclude=""
        style="
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          justify-content: center;
          margin-bottom: 24px;
        "
      >
        <div
          class="uuid-caf7c861-e18e-4da6-b4a1-d75b5012d446"
          embed-exclude=""
          style="
            background-color: #f4f4f4;
            border-radius: 4px;
            flex-grow: 0;
            height: 14px;
            margin-bottom: 6px;
            width: 224px;
          "
        >
          &nbsp;
        </div>
        <div
          class="uuid-df74ac43-0637-48c1-a70d-5b984bee6794"
          embed-exclude=""
          style="
            background-color: #f4f4f4;
            border-radius: 4px;
            flex-grow: 0;
            height: 14px;
            width: 144px;
          "
        >
          &nbsp;
        </div>
      </div>
      <p>
        <a
          class="uuid-af28fe3e-eb73-4608-8efa-fb848d4e4f40"
          href="https://www.instagram.com/p/CVn4qCPvuyB/?utm_source=ig_embed&amp;utm_campaign=loading"
          style="
            color: #c9c8cd;
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: normal;
            line-height: 17px;
            text-decoration: none;
          "
          target="_blank"
          target="_blank"
          target="_blank"
          target="_blank"
          target="_blank"
          >A post shared by @boxofchowder (@boxofchowder)</a
        >
      </p>
    </div>
  </blockquote>
  <script async="" embed-exclude="" src="//www.instagram.com/embed.js"></script>
  <style embed-exclude="" type="text/css">
    .uuid-16aa4a37-b00d-488a-835b-b9220468aff6 {
      background: #fff;
      border: 0;
      border-radius: 3px;
      box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15);
      margin: 1px;
      max-width: 540px;
      min-width: 326px;
      padding: 0;
      width: 99.375%;
      width: -webkit-calc(100% - 2px);
      width: calc(100% - 2px);
    }
    .uuid-cf2f2667-9be8-4fb2-a2b3-940bec6f4c9c {
      padding: 16px;
    }
    .uuid-9f69b345-ec9b-43e6-b6b7-03621812b648 {
      background: #ffffff;
      line-height: 0;
      padding: 0 0;
      text-align: center;
      text-decoration: none;
      width: 100%;
    }
    .uuid-1e896b16-d4c8-4aad-8925-5ba6c31ab43e {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .uuid-904face9-2679-49f7-8e94-46eaf03e64af {
      background-color: #f4f4f4;
      border-radius: 50%;
      flex-grow: 0;
      height: 40px;
      margin-right: 14px;
      width: 40px;
    }
    .uuid-79f16603-27ea-4a0f-a25a-81a827db6ee8 {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: center;
    }
    .uuid-b6c05e11-fd92-4cfb-9810-87a64d0427ed {
      background-color: #f4f4f4;
      border-radius: 4px;
      flex-grow: 0;
      height: 14px;
      margin-bottom: 6px;
      width: 100px;
    }
    .uuid-2cc963bc-c988-4812-a168-945ab3ccb48e {
      background-color: #f4f4f4;
      border-radius: 4px;
      flex-grow: 0;
      height: 14px;
      width: 60px;
    }
    .uuid-acc1567a-0999-48fa-81aa-5ee8069dad1b {
      padding: 19% 0;
    }
    .uuid-bea31750-cfd2-4dff-92e7-9887849ed02a {
      display: block;
      height: 50px;
      margin: 0 auto 12px;
      width: 50px;
    }
    .uuid-c6b058a3-02c0-4cc0-8e6e-15d98614fafd {
      padding-top: 8px;
    }
    .uuid-0c4dbee5-8c94-4d64-b2e4-e0330cba4106 {
      color: #3897f0;
      font-family: Arial, sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 550;
      line-height: 18px;
    }
    .uuid-6d288f1e-c669-42e5-9c82-888a78310f6d {
      padding: 12.5% 0;
    }
    .uuid-3b7e469b-517d-4e20-9773-cb11e3320ba3 {
      display: flex;
      flex-direction: row;
      margin-bottom: 14px;
      align-items: center;
    }
    .uuid-1caa5c07-9053-4d4c-8b03-ecc12952bcfc {
      background-color: #f4f4f4;
      border-radius: 50%;
      height: 12.5px;
      width: 12.5px;
      transform: translateX(0px) translateY(7px);
    }
    .uuid-7044e7cf-517d-459a-beec-27e7a4cfce15 {
      background-color: #f4f4f4;
      height: 12.5px;
      transform: rotate(-45deg) translateX(3px) translateY(1px);
      width: 12.5px;
      flex-grow: 0;
      margin-right: 14px;
      margin-left: 2px;
    }
    .uuid-99fa2507-37d3-40df-afa2-0e9a50a33c1a {
      background-color: #f4f4f4;
      border-radius: 50%;
      height: 12.5px;
      width: 12.5px;
      transform: translateX(9px) translateY(-18px);
    }
    .uuid-ab4b5824-8e4f-4763-9e0b-3966d4fb6339 {
      margin-left: 8px;
    }
    .uuid-d6461363-9835-409a-9aa2-c518b27af28c {
      background-color: #f4f4f4;
      border-radius: 50%;
      flex-grow: 0;
      height: 20px;
      width: 20px;
    }
    .uuid-c5c21d7c-33dc-41df-b08b-9ea10f4ff521 {
      width: 0;
      height: 0;
      border-top: 2px solid transparent;
      border-left: 6px solid #f4f4f4;
      border-bottom: 2px solid transparent;
      transform: translateX(16px) translateY(-4px) rotate(30deg);
    }
    .uuid-40f9b112-cea9-4b88-ad23-2a88ab14560c {
      margin-left: auto;
    }
    .uuid-8ede3292-7261-4a74-a5a1-69478d1e58b3 {
      width: 0px;
      border-top: 8px solid #f4f4f4;
      border-right: 8px solid transparent;
      transform: translateY(16px);
    }
    .uuid-cbced345-c617-4004-8dbd-76ddce9a2dbc {
      background-color: #f4f4f4;
      flex-grow: 0;
      height: 12px;
      width: 16px;
      transform: translateY(-4px);
    }
    .uuid-c0a9135f-4c47-452b-8d05-d6b87cacb31d {
      width: 0;
      height: 0;
      border-top: 8px solid #f4f4f4;
      border-left: 8px solid transparent;
      transform: translateY(-4px) translateX(8px);
    }
    .uuid-3e565a44-85d3-41a5-98e9-46a1bbe5fbd6 {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: center;
      margin-bottom: 24px;
    }
    .uuid-caf7c861-e18e-4da6-b4a1-d75b5012d446 {
      background-color: #f4f4f4;
      border-radius: 4px;
      flex-grow: 0;
      height: 14px;
      margin-bottom: 6px;
      width: 224px;
    }
    .uuid-df74ac43-0637-48c1-a70d-5b984bee6794 {
      background-color: #f4f4f4;
      border-radius: 4px;
      flex-grow: 0;
      height: 14px;
      width: 144px;
    }
    .uuid-b7e476a8-e1cb-4c25-93f9-0ef0e89e2272 {
      color: #c9c8cd;
      font-family: Arial, sans-serif;
      font-size: 14px;
      line-height: 17px;
      margin-bottom: 0;
      margin-top: 8px;
      overflow: hidden;
      padding: 8px 0 7px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .uuid-af28fe3e-eb73-4608-8efa-fb848d4e4f40 {
      color: #c9c8cd;
      font-family: Arial, sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: normal;
      line-height: 17px;
      text-decoration: none;
    }
  </style>
</div>

```

</details>

<details>

<summary>To</summary>

```html
<p>
  <iframe
    src="https://www.instagram.com/p/CVn4qCPvuyB/?utm_source=ig_embed&utm_campaign=loading"
    data-type="social-embeds"
  ></iframe>
</p>
```

</details>

#### Liquid Template

```liquid
{% assign igsrc = content.en.fields.body.value | section: 'class="embed-container-instagram"', '</div>' | section: 'data-instgrm-permalink="', '"' | replace: '&amp;', '&' %}

{% if igsrc == '' %}
  {{ content.en.fields.body.value }}
{% else%}
  {% assign shortcode = '<p><iframe src="' | append: igsrc | append: '" data-type="social-embeds"></iframe></p>' %}
  {{ content.en.fields.body.value | htmlReplace: '.embed-container-instagram', shortcode }}
{% endif%}
```
