On each of my dynamic collection item pages I need to embed completely unique HTML code.
I’ve set up a plain-text field for the item on which I want the code embedded, and pasted the HTML in there.
On the collection item template page I have then created a dynamic list, and inserted an ‘Embed’ component in which I’m trying to pull in the ‘Embed’ code from the plain text field.
However, after publishing the page, I can only see the HTML code as text.
After digging around on the forums I have seen a few old posts that say you can’t embed HTML into dynamic lists, but they were quite old.
<a href="https://www.justpark.com/creative/over-the-top-gear/" target="_blank"><img src="https://www.justpark.com/creative/over-the-top-gear/social/embed.jpg" alt="Over the Top Gear" border="0" width="600" height="737" /></a><br /><span style="font-size: 12px;">Click image to open interactive version (via <a href="https://www.justpark.com/">Just Park</a>).</span>
I’m not sure I’m following why you would be using the embed element for this.
The code you posted can be recreated in the design - A div with image element nested in a link block inside of it.Along with a text element within the parent div. The image, link destination, and text can all be made dynamic by connecting the to their respective fields.
There isn’t a direct work around for this. There isn’t away to output HTML from the CMS. The embed is used to custom code elements and allows us to bring in values from the CMS.
So for instance you can put a dynamic list in a form put an embed in the dynamic list. hand code the form field and use CMS data to fill in specific values.
Without knowing the variety of code you are working with and how you have setup your collections it’s difficult to help further.
Feel free to post your read only link so we can maybe take a closer look.
Hey Jacob this can work with custom code. I came up with 2 approaches that work. The first implementation takes HTML from a field value and renders it within the custom code embed. The issue you ran into was that the HTML rendered was escaped on publish. There’s a script in the page settings that reconverts the value back into HTML on load.
The second approach as suggested by @AlexN renders the HTML inside an embed and would allow you to place a unique embed code inside each item. I recommend the second approach because you’d only need to set the unique embed ID on each item instead of the entire HTML string.
@nate you are awesome
I have been looking for a way to get CMS html embeds to work for more than half a year. And that little script just did it. lol Flaming A! Now I can copy paste from Ulysses directly into the CMS and have myself some beautiful footnotes, too.
I’m celebrating
I am building a website for a fashion blogger. With each post she needs to include this code:
<div class="shopthepost-widget" data-widget-id="2001544"><script type="text/javascript">!function(d,s,id){var e, p = /^http:/.test(d.location) ? 'http' : 'https';if(!d.getElementById(id)) {e = d.createElement(s);e.id = id;e.src = p + '://' + 'widgets.rewardstyle.com' + '/js/shopthepost.js';d.body.appendChild(e);}if(typeof window.__stp === 'object') if(d.readyState === 'complete') {window.__stp.init();}}(document, 'script', 'shopthepost-script');</script><div class="rs-adblock"><img src="//assets.rewardstyle.com/production/65ba2adad4cb63ad42bad79ce9dc6d0989465dfa/images/search/350.gif" onerror="this.parentNode.innerHTML='Disable your ad blocking software to view this content.'" style="width: 15px; height: 15px;" /><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div>
Which is basically an affilate link customized for each post and each outfit I tried to do exactly with @JacobPlumb tried when he initially started this post. (Obviusly didnt work) I went into your example and pulled the script:
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
!-- Start script -->
<script>
// Function that unespaces HTML
function htmlDecode(input){
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
// Store value of html into variable
var code = $(".code-embed").html();
// Store unescaped value into new variable
var formattedCode = htmlDecode(code);
// Place new value back into the embed
$(".code-embed").html(formattedCode);
But it was unsuccessful in rendering the HTML from the collection
I’ve tried using the method described by @nate with no success. I used a Plain Text field in my collection, populated it with HTML, and then placed an HTML embed on the collection template, using the dynamic tag as the content for the embed (see below). However, no luck on publish.