DIA Frontend

Audio 

<!-- ### Begin: Element  ### -->
<div id="c798" class="frame frame-default frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Audio files
                </h2>
            </header>

            <ul class="media-list">
                <li class="media">
                    <div class="media-body">
                        <h4 class="media-heading">
                            Still here
                        </h4>
                        <p>The internet is the meanest place ever. Everybody knows that. So being "still here" in online business after 18 years is by no means a matter of course. That is all the more true, if the project in question is open source, rather than a profit-oriented business. So let's celebrate, because TYPO3 is "still here" and more successful than ever before.
                        </p>

                        <audio src="https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3" controls>
                            Your browser does not support the <code>audio</code> element.
                        </audio>
                    </div>
                </li>
                <li class="media">
                    <div class="media-body">
                        <h4 class="media-heading">
                            What is TYPO3?
                        </h4>
                        <p>A short video explaining what TYPO3 is and why it is the right choice for you.
                        </p>

                        <audio src="https://www.bootstrap-package.com/fileadmin/introduction/audio/what-is-typo3.mp3" controls>
                            Your browser does not support the <code>audio</code> element.
                        </audio>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- ### End: Element  ### -->
 
{% extends files ? '@wrapper-frame' : '@wrapper-empty' %}

{% block main %}
    {% include '@atom-header' %}

    {% if files %}
        <ul class="media-list">
            {% for file in files %}
                {% if file.url %}
                    <li class="media">
                        <div class="media-body">
                            <h4 class="media-heading">
                                {% if file.properties.title %}
                                    {{ file.properties.title }}
                                {% else %}
                                    {{ file.properties.name }}
                                {% endif %}
                            </h4>
                            {% if file.properties.description %}
                                <p>{{ file.properties.description }}</p>
                            {% endif %}
                            {% include '@atom-audio' with {
                                file: file
                            } %}
                        </div>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}
 
{
  "bodytext": null,
  "categories": null,
  "CType": null,
  "customId": null,
  "date": null,
  "frame_class": null,
  "header": "Audio files",
  "header_color": null,
  "header_layout": 2,
  "header_link": null,
  "header_position": null,
  "header_style": null,
  "layout": null,
  "space_after_class": null,
  "space_before_class": null,
  "space_inner_after_class": null,
  "space_inner_before_class": null,
  "subheader": null,
  "target": null,
  "files": [
    {
      "url": "https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3",
      "properties": {
        "name": "Still here",
        "title": null,
        "autoplay": false,
        "description": "The internet is the meanest place ever. Everybody knows that. So being \"still here\" in online business after 18 years is by no means a matter of course. That is all the more true, if the project in question is open source, rather than a profit-oriented business. So let's celebrate, because TYPO3 is \"still here\" and more successful than ever before.\n"
      }
    },
    {
      "url": "https://www.bootstrap-package.com/fileadmin/introduction/audio/what-is-typo3.mp3",
      "properties": {
        "name": "What is TYPO3? (Name)",
        "title": "What is TYPO3?",
        "autoplay": false,
        "description": "A short video explaining what TYPO3 is and why it is the right choice for you.\n"
      }
    }
  ]
}

No notes defined.