DIA Frontend

Text and Images 

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

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

                                <picture>
                                    <img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
                                </picture>

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

                    <header class="frame-header">
                        <h2 class="element-header">
                            Text and Images
                        </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 textpic ### -->
 
{% extends '@wrapper-frame' %}

{% set CType = 'textpic' %}

{% block main %}
    <div class="textpic textpic-{{ imageorient }}">
        <div class="textpic-item textpic-gallery">
            {% include '@partial-gallery' with {
                files: image
            } %}
        </div>
        <div class="textpic-item textpic-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 Images",
  "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,
  "image": [
    {
      "type": "image",
      "holder": {
        "width": 640,
        "height": 360
      },
      "properties": {
        "title": "Image Title",
        "alternative": "Alternative Title",
        "description": "Insert description",
        "link": null,
        "link_target": null
      }
    }
  ],
  "imageorient": "left",
  "data": {
    "imagecols": 1
  }
}

No notes defined.