Convert HTML into a YAML sting

I am wondering if anybody has a strategy for dealing with YAML stings that contain HTML. I have found I can minify HTML easily using http://codebeautify.org but I still need to manually fix double quotes. This is easy enough for me to do and I don’t mind it one bit, but I think my clients may get frustrated if they have to do edits in YAML frontmatter. I have no problem explaining markdown, but YAML may be frustrating for the average non-techie content administrator.

Maybe I am going about this wrong. What I am doing is making an accordion using bootstrap markup. I am pulling all the text out of the YAML of the section page.md file. Would it be possible have a folder that contained a .md file for each item of the accordion? This would be more manageable allowing a content admin to write in markdown. I will see if I can figure it out.

Grrr I just spent a half hour typing a how-to and sharing my code and I lost it.

I was able to solve my issue by making a series of folders and corresponding twig files. So if anybody is interested in a bootstrap accordion http://getbootstrap.com/javascript/#collapse-example-accordion, this will get you going:


<div class="{{ page.header.bgclass }}">
<div class="container">
<div class="{{ page.header.class }}">
<h2>{{ page.header.title }}</h2>
<span></span>
{{ content }}
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  
  {% for p in page.children %}
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading{{ loop.index }}">
      <h4 class="panel-title">
        <a {% if loop.index > 1 %}class="collapsed"{% endif %} data-toggle="collapse" data-parent="#accordion" href="#collapse{{ loop.index }}" aria-expanded="{% if loop.first %}true{% else %}false{% endif %}" aria-controls="collapse{{ loop.index }}">
          {{ p.title }} 
        </a>
      </h4> 
    </div>
    <div id="collapse{{ loop.index }}" class="panel-collapse collapse {% if loop.first %}in{% endif %}" role="tabpanel" aria-labelledby="heading{{ loop.index }}">
      <div class="panel-body">
      {%  if p.header.photo %}
      {{page.media[p.header.photo].cropResize(350, 350).html('',p.title)}},{% endif %}
        {{ p.content }}
      </div>
    </div>
  </div>
  {% endfor %}

</div>
</div>
</div>

---

Above is the bootstrap code in my “accordion-home.html.twig” file. Each folder I created has an “accordion.item.md” file that has the content for the accordion. This could also be good for making an FAQ.

Thanks for the writeup Mike!

I lost a much more thorough writeup sadly, I modified the above script putting in a unique-id for <div id="accordion"> I added <div id="accordion{{page.header.uniqueid }}, now I can run multiple accordions on the same page.

This is my code that allows more than one accordion on a page.

<div class="{{ page.header.bgclass }}">
<div class="container">
<div class="{{ page.header.class }}">
<h2>{{ page.header.title }}</h2>
<span></span>
{{ content }}
</div>
<div class="panel-group" id="accordion{{page.header.uniqueid }}" role="tablist" aria-multiselectable="true">
  
  {% for p in page.children %}
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading{{page.header.uniqueid }},{{ loop.index }}">
      <h4 class="panel-title">
        <a {% if loop.index > 1 %}class="collapsed"{% endif %} data-toggle="collapse" data-parent="#accordion{{page.header.uniqueid }}" href="#collapse{{page.header.uniqueid }},{{ loop.index }}" aria-expanded="{% if loop.first %}true{% else %}false{% endif %}" aria-controls="collapse{{page.header.uniqueid }},{{ loop.index }}">
          {{ p.title }} 
        </a>
      </h4>
    </div> 
    <div id="collapse{{page.header.uniqueid }},{{ loop.index }}" class="panel-collapse collapse {% if loop.first %}in{% endif %}" role="tabpanel" aria-labelledby="heading{{page.header.uniqueid }},{{ loop.index }}">
      <div class="panel-body">
      {%  if p.header.photo %}
      {{page.media[p.header.photo].cropResize(350, 350).html('',p.title)}},{% endif %}
        {{ p.content }}
      </div>
    </div>
  </div>
  {% endfor %}

</div>
</div>
</div>

This is my folder structure:

- 01.page
-   _my-modulare-section-folder
-    01.accordion-folder
-      accordian-item.md
-    02.accordion-folder
-      accordion-item.md
-    accordion-home.md

---