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