templates/content/editable_roundup.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  3. {% block content %}
  5.     <div id="main-content" class="main-content" >
  7.         {{ include('includes/content-headline.html.twig') }}
  9.         <div class="lead">
  10.             {{ pimcore_wysiwyg('lead') }}
  11.         </div>
  13.         {% if editmode %}
  14.             <style type="text/css">
  15.                 .alert {
  16.                     margin-top: 60px;
  17.                 }
  18.             </style>
  20.             <div class="editable-roundup">
  22.                 <div class="alert alert-secondary">
  23.                     <h4>Checkbox</h4>
  24.                 </div>
  25.                 {{ pimcore_checkbox('myCheckbox') }}
  27.                 <div class="clearfix"></div>
  29.                 <div class="alert alert-secondary">
  30.                     <h4>Date</h4>
  31.                 </div>
  32.                 {{ pimcore_date('myDate') }}
  34.                 <div class="alert alert-secondary">
  35.                     <h4>Relation (Many-To-One)</h4>
  36.                 </div>
  37.                 {{ pimcore_relation("myRelation") }}
  39.                 <div class="alert alert-secondary">
  40.                     <h4>Relation (Many-To-Many)</h4>
  41.                 </div>
  42.                 {{ pimcore_relations("myRelations") }}
  44.                 <div class="alert alert-secondary">
  45.                     <h4>Image</h4>
  46.                 </div>
  47.                 {{ pimcore_image('myImage') }}
  49.                 <div class="alert alert-secondary">
  50.                     <h4>Input</h4>
  51.                 </div>
  52.                 {{ pimcore_input('myInput') }}
  54.                 <div class="alert alert-secondary">
  55.                     <h4>Link</h4>
  56.                 </div>
  57.                 {{ pimcore_link('myLink') }}
  59.                 <div class="alert alert-secondary">
  60.                     <h4>Multi-Select</h4>
  61.                 </div>
  62.                 {{ pimcore_multiselect('myMultiselect', {
  63.                     width: 200,
  64.                     height: 100,
  65.                     store: [
  66.                         ["cars", "Cars"],
  67.                         ["motorcycles", "Motorcycles"],
  68.                         ["accessories", "Accessories"]
  69.                     ]
  70.                 }) }}
  72.                 <div class="alert alert-secondary">
  73.                     <h4>Numeric</h4>
  74.                 </div>
  75.                 {{ pimcore_numeric('myNumeric') }}
  77.                 <div class="alert alert-secondary">
  78.                     <h4>Embed</h4>
  79.                 </div>
  80.                 {{ pimcore_embed("myWidgets") }}
  82.                 <div class="alert alert-secondary">
  83.                     <h4>Renderlet (drop an asset folder)</h4>
  84.                 </div>
  85.                 {{ pimcore_renderlet('myRenderlet', {
  86.                     controller: 'App\\Controller\\DefaultController::galleryRenderletAction'
  87.                 }) }}
  89.                 <div class="alert alert-secondary">
  90.                     <h4>Select</h4>
  91.                 </div>
  92.                 {{ pimcore_select('mySelect', {
  93.                     store: [
  94.                         ['one-month', 'One month'],
  95.                         ['three-months', 'Three months'],
  96.                         ['unlimited', 'Unlimited']
  97.                     ]
  98.                 }) }}
  100.                 <div class="alert alert-secondary">
  101.                     <h4>Snippet</h4>
  102.                     <p>drop a document snippet here</p>
  103.                 </div>
  104.                 {{ pimcore_snippet('mySnippet') }}
  106.                 <div class="alert alert-secondary">
  107.                     <h4>Table</h4>
  108.                     <p>of course you can create tables in the wysiwyg too</p>
  109.                 </div>
  110.                 {{ pimcore_table('tableName', {
  111.                     width: 700,
  112.                     height: 400,
  113.                     defaults: {
  114.                         cols: 6,
  115.                         rows: 10,
  116.                         data: [
  117.                             ["Value 1", "Value 2", "Value 3"],
  118.                             ["this", "is", "test"]
  119.                         ]
  120.                     }
  121.                 }) }}
  123.                 <div class="alert alert-secondary">
  124.                     <h4>Textarea</h4>
  125.                 </div>
  126.                 {{ pimcore_textarea('myTextarea') }}
  128.                 <div class="alert alert-secondary">
  129.                     <h4>Video</h4>
  130.                 </div>
  131.                 {{ pimcore_video('myVideo', {
  132.                     attributes: {
  133.                         class: 'video-js vjs-default-skin vjs-big-play-centered',
  134.                         'data-setup': '{}'
  135.                     },
  136.                     thumbnail: 'content',
  137.                     height: 380
  138.                 }) }}
  140.                 <div class="alert alert-secondary">
  141.                     <h4>WYSIWYG</h4>
  142.                 </div>
  143.                 {{ pimcore_wysiwyg('myWysiwyg') }}
  145.                 <div class="alert alert-secondary">
  146.                     <h4>PDF</h4>
  147.                 </div>
  148.                 {{ pimcore_pdf("myPdf", {"width": 640, height: 100}) }}
  150.                 <div class="alert alert-secondary">
  151.                     <h4>EDITABLE DIALOG BOX</h4>
  152.                     <p>Configured on the Image w. metadata brick class "App\Document\Areabrick\ImageMetadata". Click on the edit button(pencil) for editable box:</p>
  153.                 </div>
  154.                 {{ pimcore_area('content', { 'type' : 'image-metadata'}) }}
  155.             </div>
  157.         {% endif %}
  159.     </div>
  160. {% endblock %}