Converting HTML Sections
Last updated
Last updated
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.
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.
<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><p>
<iframe
src="https://www.facebook.com/moseslake.firefighters/posts/3571051763021296"
data-type="social-embeds"
></iframe>
</p>{% 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 %}<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><p>
[[scm-embed type="wistia" id="hfxe0uritp" padding-top="56.25%"
src="https://fast.wistia.net/embed/iframe/hfxe0uritp?seo=true&videoFoam=true"]]
</p>{% 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 %}<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><p>
[[scm-embed type="wistia" id="zp9uc2wgoe" padding-top="56.25%"
src="https://fast.wistia.com/embed/medias/zp9uc2wgoe/swatch"]]
</p>{% 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 %}<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>
<p>
<iframe
src="https://www.instagram.com/p/CVn4qCPvuyB/?utm_source=ig_embed&utm_campaign=loading"
data-type="social-embeds"
></iframe>
</p>{% 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%}ImpulseSync can solve this using it's manipulators such as .