Converting HTML Sections

Video Walkthrough

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.

Solution

ImpulseSync can solve this using it's manipulators such as Liquid.

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.

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.

example 1

From

<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>

To

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

Liquid Template

{% 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

From

<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>

To

<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>

Liquid Template

{% 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

From

<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>

To

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

Liquid Template

{% 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

From

<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>

To

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

Liquid Template

{% 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%}