templates/areas/copyimg/view.html.twig line 1

Open in your IDE?
  1. {% if prefix is not defined %}
  2.     {% set prefix = null %}
  3. {% endif %}
  5. {% if editmode %}
  6.     <div class="editmode">
  7.         <div class="title">
  8.             Text/Bild
  9.         </div>
  10.         <div class="options">
  11.             <label>
  12.                 {{ pimcore_checkbox(prefix ~'_brick_copyimg_swapimg') }}
  13.                 Text und Bild tauschen
  14.             </label>
  15.             <br/>
  16.             <label>
  17.                 Bild anzeigen<br/>
  18.                 {{ pimcore_select(prefix ~ '_brick_copyimg_showimg', {
  19.                     'store': [
  20.                         ['show', 'zeigen'],
  21.                         ['d-none', 'verbergen'],
  22.                     ],
  23.                     'defaultValue' : 'show'
  24.                 }) }}
  25.             </label>
  26.             <label>
  27.                 Text anzeigen<br/>
  28.                 {{ pimcore_select(prefix ~ '_brick_copyimg_showcopy', {
  29.                     'store': [
  30.                         ['show', 'zeigen'],
  31.                         ['d-none', 'verbergen'],
  32.                     ],
  33.                     'defaultValue' : 'show'
  34.                 }) }}
  35.             </label>
  36.             <label>
  37.                 Spaltenbreite/Aufteilung<br/>
  38.                 {{ pimcore_select(prefix ~ '_brick_copyimg_gridsize', {
  39.                     'store': [
  40.                         ['50-50', '50%/50%'],
  41.                         ['33-66', '33%/66%'],
  42.                         ['66-33', '66%/33%'],
  43.                         ['25-75', '25%/75%'],
  44.                         ['75-25', '75%/25%'],
  45.                         ['100', '100%'],
  46.                     ],
  47.                     'defaultValue' : '50-50'
  48.                 }) }}
  49.             </label>
  50.             <label>
  51.                 Inhalt position (kleiner als 100%)<br/>
  52.                 {{ pimcore_select(prefix ~ '_brick_copyimg_align', {
  53.                     'store': [
  54.                         ['justify-content-center', 'mittig'],
  55.                         ['justify-content-end', 'rechts'],
  56.                         ['default', 'links'],
  57.                     ],
  58.                     'defaultValue' : 'default'
  59.                 }) }}
  60.             </label>
  61.             <label>
  62.                 Hintergrundfarbe<br/>
  63.                 {{ pimcore_select(prefix ~ '_brick_copyimg_section_bg', {
  64.                     'store': bgColors,
  65.                     'defaultValue' : 'default'
  66.                 }) }}
  67.             </label>
  68.             <label>
  69.                 Abtrennung oben<br/>
  70.                 {{ pimcore_select(prefix ~ '_brick_copyimg_section_bg_divider_top', {
  71.                     'store': dividerStyles,
  72.                     'defaultValue' : 'default'
  73.                 }) }}
  74.             </label>
  75.             <label>
  76.                 Abtrennung unten<br/>
  77.                 {{ pimcore_select(prefix ~ '_brick_copyimg_section_bg_divider_bottom', {
  78.                     'store': dividerStyles,
  79.                     'defaultValue' : 'default'
  80.                 }) }}
  81.             </label>
  82.             <label>
  83.                 Abstand unten<br/>
  84.                 {{ pimcore_select(prefix ~ '_brick_copyimg_section_padding_bottom', {
  85.                     'store': paddingBottom,
  86.                     'defaultValue' : 'default'
  87.                 }) }}
  88.             </label>
  89.             <label>
  90.                 Abstand oben<br/>
  91.                 {{ pimcore_select(prefix ~ '_brick_copyimg_section_padding_top', {
  92.                     'store': paddingTop,
  93.                     'defaultValue' : 'default'
  94.                 }) }}
  95.             </label>
  96.         </div>
  99.         <div class="options">
  100.             <label>
  101.                 Bild beschneiden<br/>
  102.                 {{ pimcore_select(prefix ~ '_brick_copyimg_image_size', {
  103.                     'store': [
  104.                         ['original', 'original'],
  105.                         ['default', 'standard'],
  106.                     ],
  107.                     'defaultValue' : 'original'
  108.                 }) }}
  109.             </label>
  110.         </div>
  111.          <div class="content">
  112.             {{ pimcore_image(prefix ~ '_brick_copyimg_image', {'width': 500}) }}
  114.             {{ pimcore_wysiwyg(prefix ~ '_brick_copyimg_image_copy', {'placeholder': 'Fließtext Bildspalte'}) }}
  115.         </div>
  116.         <div class="options">
  117.             <label>
  118.                 Überschriftauszeichnung (SEO)<br/>
  119.                 {{ pimcore_select(prefix ~ '_brick_copyimg_headline_type', {
  120.                     'store': [
  121.                         ['div', 'div'],
  122.                         ['h1', 'h1'],
  123.                         ['h2', 'h2'],
  124.                         ['h3', 'h3'],
  125.                         ['h4', 'h4'],
  126.                         ['h5', 'h5'],
  127.                         ['h6', 'h6'],
  128.                     ],
  129.                     'defaultValue' : 'div'
  130.                 }) }}
  131.             </label>
  132.             <label>
  133.                 Überschrifgröße<br/>
  134.                 {{ pimcore_select(prefix ~ '_brick_copyimg_headline_type_size', {
  135.                     'store': [
  136.                         ['1', 'gleiche größe mit Linie'],
  137.                         ['2', 'größe nach Auszeichnung'],
  138.                     ],
  139.                     'defaultValue' : '2'
  140.                 }) }}
  141.             </label>
  142.             <label>
  143.                 Unterzeilenauszeichnung (SEO)<br/>
  144.                 {{ pimcore_select(prefix ~ '_brick_copyimg_subline_type', {
  145.                     'store': [
  146.                         ['div', 'div'],
  147.                         ['h1', 'h1'],
  148.                         ['h2', 'h2'],
  149.                         ['h3', 'h3'],
  150.                         ['h4', 'h4'],
  151.                         ['h5', 'h5'],
  152.                         ['h6', 'h6'],
  153.                     ],
  154.                     'defaultValue' : 'div'
  155.                 }) }}
  156.             </label>
  157.         </div>
  158.         <div class="content">
  159.             <h2>{{ pimcore_input(prefix ~ '_brick_copyimg_headline', {'placeholder': 'Überschrift'}) }}</h2>
  160.             <h3>{{ pimcore_input(prefix ~ '_brick_copyimg_subline', {'placeholder': 'Unterzeile'}) }}</h3>
  161.         </div>
  162.         <div class="content">
  163.             {{ pimcore_wysiwyg(prefix ~ '_brick_copyimg_copy', {'placeholder': 'Fließtext'}) }}
  164.         </div>
  165.         <div class="options">
  166.             <label>
  167.                 Button Stil<br/>
  168.                 {{ pimcore_select(prefix ~ '_brick_copyimg_btntype', {
  169.                     'store': [
  170.                         ['link', 'link'],
  171.                         ['btn', 'normal'],
  172.                         ['btn btn-light', 'hell'],
  173.                         ['btn btn-dark', 'dunkel'],
  174.                     ],
  175.                     'defaultValue': 'btn'
  176.                 }) }}
  177.             </label>
  178.             <br/>
  179.             {% for key, value in btnStyles %}
  180.                 <label>
  181.                     {{ pimcore_checkbox(prefix ~ '_brick_copyimg_' ~ value) }}
  182.                     {{ key }}
  183.                 </label>
  184.             {% endfor %}
  185.         </div>
  186.         <div class="content">
  187.             {{ pimcore_link(prefix ~ '_brick_copyimg_link') }}
  188.             <br/>
  189.             {{ pimcore_input(prefix ~ '_brick_copyimg_link_icon', {'placeholder':'Button Iconname', 'height':200}) }}
  190.         </div>
  191.     </div>
  192. {% else %}
  193.     {% set dividerTop = pimcore_select(prefix ~ '_brick_copyimg_section_bg_divider_top').getData() %}
  194.     {% set dividerBottom = pimcore_select(prefix ~ '_brick_copyimg_section_bg_divider_bottom').getData() %}
  195.     {% set sectionBg = pimcore_select(prefix ~ '_brick_copyimg_section_bg').getData() %}
  197.     {% set paddingBottom = pimcore_select(prefix ~ '_brick_copyimg_section_padding_bottom').getData() %}
  198.     {% set paddingTop = pimcore_select(prefix ~ '_brick_copyimg_section_padding_top').getData() %}
  200.     {% if sectionBg != 'default' %}
  201.         {% set fontColor = 'text-light' %}
  202.         {% set btnColor  = 'btn-light' %}
  203.     {% else %}
  204.         {% set fontColor = '' %}
  205.         {% set btnColor  = '' %}
  206.     {% endif %}
  208.     {% set showCopy = pimcore_select(prefix ~ '_brick_copyimg_showcopy').getData() %}
  209.     {% set showImg = pimcore_select(prefix ~ '_brick_copyimg_showimg').getData() %}
  210.     {% set gridSize = pimcore_select(prefix ~ '_brick_copyimg_gridsize').getData() %}
  211.     {% set blockPosition = pimcore_select(prefix ~ '_brick_copyimg_align').getData() %}
  213.     {% if gridSize == '33-66' %}
  214.         {% set gridLeft = '4' %}
  215.         {% set gridRight = '8' %}
  216.     {% elseif gridSize == '66-33' %}
  217.         {% set gridLeft = '8' %}
  218.         {% set gridRight = '4' %}
  219.     {% elseif gridSize == '25-75' %}
  220.         {% set gridLeft = '3' %}
  221.         {% set gridRight = '9' %}
  222.     {% elseif gridSize == '75-25' %}
  223.         {% set gridLeft = '9' %}
  224.         {% set gridRight = '3' %}
  225.     {% elseif gridSize == '100' %}
  226.         {% set gridLeft = '12' %}
  227.         {% set gridRight = '12' %}
  228.     {% else %}
  229.         {% set gridLeft = '6' %}
  230.         {% set gridRight = '6' %}
  231.     {% endif %}
  234.     {% set divHeadline = pimcore_select(prefix ~ '_brick_copyimg_headline_type').getData() %}
  235.     {% set size = pimcore_select(prefix ~ '_brick_copyimg_headline_type_size').getData() %}
  236.     {% set divSubline  = pimcore_select(prefix ~ '_brick_copyimg_subline_type').getData() %}
  237.     {% set imgSize   = pimcore_select(prefix ~ '_brick_copyimg_image_size').getData() %}
  239.     {% set swapCopyImg = pimcore_checkbox(prefix ~'_brick_copyimg_swapimg').isChecked() %}
  241.     {% set btnClasses = pimcore_select(prefix ~ '_brick_copyimg_btntype').getData() %}
  243.     {% for key, value in btnStyles %}
  244.         {% if pimcore_checkbox(prefix ~'_brick_copyimg_' ~ value).isChecked() %}
  245.             {% set btnClasses = btnClasses ~ ' ' ~ value %}
  246.         {% endif %}
  247.     {% endfor %}
  249.     {% set fullscreen = '' %}
  251.     {% if (dividerTop != 'default') or (dividerBottom != 'default') %}
  252.         {% set fullscreen = 'fullscreen' %}
  253.     {% endif %}
  256.     <section class="brick_copyimg {{ paddingBottom }} {{ paddingTop }}  {{ fullscreen }}">
  257.         {% if sectionBg != 'default' %}
  258.             <div class="bg-overlay" data-style="{{ sectionBg }}"></div>
  259.         {% endif %}
  260.         {% if dividerBottom != 'default' %}
  261.             <div class="shape-divider" data-style="{{ dividerBottom }}"></div>
  262.         {% endif %}
  263.         {% if dividerTop != 'default' %}
  264.             <div class="shape-divider" data-style="{{ dividerTop }}" data-position="top" data-flip-horizontal="true"
  265.                  data-flip-vertical="true"></div>
  266.         {% endif %}
  267.         <div class="container">
  268.             <div class="row {{ blockPosition }}">
  269.                 <div class="col-lg-{{ gridLeft }} {{ swapCopyImg ? 'order-lg-1' : 'order-lg-2' }} {{ showImg }} text-center">
  270.                     {{ pimcore_image(prefix ~ '_brick_copyimg_image', {'class':'img-fluid', 'thumbnail':'copyimg_'~imgSize}) }}
  272.                     {{ pimcore_wysiwyg(prefix ~ '_brick_copyimg_image_copy') }}
  273.                 </div>
  275.                 <div class="col-lg-{{ gridRight }} {{ swapCopyImg ? 'order-lg-2' : 'order-lg-1' }} {{ showCopy }}">
  276.                     
  278.                     {% if not pimcore_input(prefix ~ '_brick_copyimg_headline').isEmpty() %}
  279.                         <div class="heading-text {{ size == 1 ? 'heading-section' }} {{ fontColor }}">
  280.                             <{{ divHeadline }}>
  281.                                 {{ pimcore_input(prefix ~ '_brick_copyimg_headline') }}
  282.                             </{{ divHeadline }}>
  283.                             {% if not pimcore_input(prefix ~ '_brick_copyimg_subline').isEmpty() %}
  284.                                 <{{ divSubline }}>
  285.                                     {{ pimcore_input(prefix ~ '_brick_copyimg_subline') }}
  286.                                 </{{ divSubline }}>
  287.                             {% endif %}
  288.                         </div>
  289.                     {% endif %}
  290.                     {% if not pimcore_wysiwyg(prefix ~ '_brick_copyimg_copy').isEmpty() %}
  291.                         <div class="{{ fontColor }}">
  292.                             {{ pimcore_wysiwyg(prefix ~ '_brick_copyimg_copy') }}
  293.                         </div>
  294.                     {% endif %}
  295.                     {% if not pimcore_link(prefix ~ '_brick_copyimg_link').isEmpty() %}
  296.                         <div class="mt-4">
  297.                             <a href="{{ pimcore_link(prefix ~ '_brick_copyimg_link').getHref() }}"
  298.                                target="{{ pimcore_link(prefix ~ '_brick_copyimg_link').getTarget() }}"
  299.                                class="{{ btnColor }} {{ btnClasses }} {{ pimcore_link(prefix ~ '_brick_copyimg_link').getClass() }}"
  300.                             >
  301.                                 {{ pimcore_link(prefix ~ '_brick_copyimg_link').getText() }}
  302.                                 {% if not pimcore_input(prefix ~ '_brick_copyimg_link_icon').isEmpty() %}
  303.                                     <i class="{{ pimcore_input(prefix ~ '_brick_copyimg_link_icon') }}"></i>
  304.                                 {% endif %}
  305.                             </a>
  306.                         </div>
  307.                     {% endif %}
  308.                 </div>
  309.             </div>
  310.         </div>
  311.     </section>
  312. {% endif %}