DIA Frontend

Text and Media 

<!-- ### Begin: Element textmedia ### -->
<div id="c408" class="frame frame-default frame-type-textmedia 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">
            <div class="textmedia textmedia-left">
                <div class="textmedia-item textmedia-gallery">

                    <div class="gallery-row">
                        <div class="gallery-item gallery-item-size-1">
                            <figure class="video">

                                <div class="embed-responsive embed-responsive-16by9">
                                    <iframe src="https://www.youtube-nocookie.com/embed/yiJjpKzCVE4?autohide=1&amp;controls=1&amp;rel=0&amp;enablejsapi=1" class="embed-responsive-item" allowfullscreen allow="fullscreen"></iframe>
                                </div>

                                <figcaption class="caption">
                                    Insert description
                                </figcaption>
                            </figure>
                        </div>
                        <div class="gallery-item gallery-item-size-1">
                            <figure class="image">

                                <picture>
                                    <img loading="lazy" src="holder.js/400x300?auto=yes" width="400" height="300" intrinsicsize="400x300" title="Image Title" alt="" />
                                </picture>

                                <figcaption class="caption">
                                    Insert description
                                </figcaption>
                            </figure>
                        </div>
                        <div class="gallery-item gallery-item-size-1">
                            <figure class="audio">
                                <div class="embed">

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

                                <figcaption class="caption">
                                    Insert description
                                </figcaption>
                            </figure>
                        </div>
                        <div class="gallery-item gallery-item-size-1">
                            <figure class="video">

                                <div class="embed-responsive embed-responsive-16by9">
                                    <video controls>
                                        <source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4">
                                        Sorry, your browser doesn't support embedded videos.
                                    </video>
                                </div>

                                <figcaption class="caption">
                                    Insert description
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="textmedia-item textmedia-text">

                    <header class="frame-header">
                        <h2 class="element-header">
                            Text and Media
                        </h2>
                    </header>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                    sed diam nonumy eirmod tempor invidunt ut labore et dolore
                    magna aliquyam erat, sed diam voluptua. At vero eos et
                    accusam et justo duo dolores et ea rebum. Stet clita kasd
                    gubergren, no sea takimata sanctus est Lorem ipsum dolor
                    sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                    elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos
                    et accusam et justo duo dolores et ea rebum. Stet clita
                    kasd gubergren, no sea takimata sanctus est Lorem ipsum
                    dolor sit amet.
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ### End: Element textmedia ### -->
 
{% extends '@wrapper-frame' %}

{% set CType = 'textmedia' %}

{% block main %}
    <div class="textmedia textmedia-{{ imageorient }}">
        <div class="textmedia-item textmedia-gallery">
            {% include '@partial-gallery' with {
                files: assets
            } %}
        </div>
        <div class="textmedia-item textmedia-text">
            {% include '@atom-header' %}
            {% include template_from_string(bodytext) %}
        </div>
    </div>
{% endblock %}
 
{
  "bodytext": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\nsed diam nonumy eirmod tempor invidunt ut labore et dolore\nmagna aliquyam erat, sed diam voluptua. At vero eos et\naccusam et justo duo dolores et ea rebum. Stet clita kasd\ngubergren, no sea takimata sanctus est Lorem ipsum dolor\nsit amet. Lorem ipsum dolor sit amet, consetetur sadipscing\nelitr, sed diam nonumy eirmod tempor invidunt ut labore et\ndolore magna aliquyam erat, sed diam voluptua. At vero eos\net accusam et justo duo dolores et ea rebum. Stet clita\nkasd gubergren, no sea takimata sanctus est Lorem ipsum\ndolor sit amet.\n",
  "categories": null,
  "CType": null,
  "customId": null,
  "date": null,
  "frame_class": null,
  "header": "Text and Media",
  "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,
  "assets": [
    {
      "type": "media",
      "url": "https://www.youtube-nocookie.com/embed/yiJjpKzCVE4?autohide=1&amp;controls=1&amp;rel=0&amp;enablejsapi=1",
      "properties": {
        "title": "Image Title",
        "description": "Insert description"
      }
    },
    {
      "type": "image",
      "holder": {
        "width": 400,
        "height": 300
      },
      "properties": {
        "title": "Image Title",
        "description": "Insert description"
      }
    },
    {
      "type": "audio",
      "url": "https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3",
      "properties": {
        "title": "Image Title",
        "description": "Insert description"
      }
    },
    {
      "type": "media",
      "url": "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
      "properties": {
        "title": "Image Title",
        "description": "Insert description"
      }
    }
  ],
  "imageorient": "left",
  "data": {
    "imagecols": 1
  }
}

No notes defined.