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 <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&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&videoFoam=true"]]
</p>
Liquid Template
{% assign src = content.en.fields.body.value | section: 'iframe', '</iframe>' | section: 'src="', '"' | strip | replace: '&', '&' %}
{% 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&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;
"
>
</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;
"
>
</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;
"
>
</div>
</div>
</div>
<div
class="uuid-acc1567a-0999-48fa-81aa-5ee8069dad1b"
embed-exclude=""
style="padding: 19% 0"
>
</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;
"
>
</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&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"
>
</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;
"
>
</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;
"
>
</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;
"
>
</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;
"
>
</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;
"
>
</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;
"
>
</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;
"
>
</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;
"
>
</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;
"
>
</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;
"
>
</div>
</div>
<p>
<a
class="uuid-af28fe3e-eb73-4608-8efa-fb848d4e4f40"
href="https://www.instagram.com/p/CVn4qCPvuyB/?utm_source=ig_embed&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: '&', '&' %}
{% 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%}
Last updated