templates/default/magnesium.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  3. {#
  4.     {% use AppBundle/Helper/Apik %}
  5. #}
  8. {% block content %}
  11. {{ pimcore_areablock("myAreablock") }}
  13. <!-- #main -->
  14. <main id="main" role="main">
  15. {{ pimcore_areablock('contentTop') }}
  17. <div class="apk-magnesium"><!-- start magnesium -->
  19.     {% if editmode %}<!-- start section 1 -->
  21.     <div class="uk-container apk-container-1400">
  22.         <div uk-alert>
  23.             <h1 class="uk-h1">Banner Magnésium</h1>
  24.         </div>
  25.         <ul uk-tab>
  26.             <li><a href="#">Configurations</a></li>
  27.             <li class="uk-active"><a href="#">Content Edit</a></li>
  28.         </ul>
  30.         <ul class="uk-switcher uk-margin">
  31.             <li class="apk-size-20 uk-grid-small" uk-grid>
  33.                 <div class="uk-width-1-2@m" uk-margin>
  35.                     <div>Afficher un scroll ?</div>
  36.                     {{ pimcore_select("scroll", {
  37.                         "store" : [
  38.                             ['', 'Aucun'],
  39.                             ['apk-scroll', 'SCROLL'],
  40.                             ['apk-top', 'TOP']
  41.                         ],
  42.                         "defaultValue" : "apk-scroll"
  43.                     }) }}
  44.                     
  45.                 </div>
  47.             </li>
  48.         
  49.             <li class="uk-active">
  50.                 <div class="uk-margin-large-bottom">
  51.                     <div class="uk-margin-small-bottom"><strong>Image de background</strong></div>
  52.                     {{ pimcore_image('bg-image') }}
  54.                     <div class="uk-margin"><strong>Titre de la banner</strong></div>
  55.                     <h2 class="uk-h2">
  56.                         {{ pimcore_textarea("content-title",{
  57.                             "nl2br" : true
  58.                         }) }}
  59.                     </h2>
  61.                     <div class="uk-margin"><strong>Texte de la banner</strong></div>
  62.                     {{ pimcore_wysiwyg("content") }}
  65.                 </div>
  66.             </li>
  67.         </ul>
  68.     </div>
  70.     {% else %}
  72.     <section class="apk-banner-magnesium">
  73.         <div class="uk-margin-medium-bottom">
  74.             <div class="uk-cover-container uk-flex uk-flex-middle">
  75.                 {% if pimcore_image('bg-image').src %}
  76.                     {{ pimcore_image('bg-image').thumbnail('full-background').html({'imgAttributes' : {'uk-cover' : null}})|raw }}    
  77.                 {% endif %}
  78.                 <div class="uk-container apk-container-1400">
  79.                     <div class="uk-position-relative uk-height-1-1">
  80.                         <div class="uk-margin-left uk-margin-right">
  81.                             <h1>{{ pimcore_textarea("content-title", {"nl2br" : true})|raw }}</h1>
  83.                             <div class="apk-content">
  84.                                 {{ pimcore_wysiwyg("content") }}
  85.                             </div>
  86.                         </div>
  87.                 
  88.                     </div>
  89.                 </div>
  90.             </div>
  91.         
  93.             {# Scroll géré dans le main.js #}
  94.             {% if pimcore_select("scroll").data == "apk-scroll" or pimcore_select("scroll").data == "apk-top" %}
  95.             <div class="apk-scroll-container">
  96.                 <div class="uk-container apk-container-1400">
  97.                     <div class="uk-position-relative">
  98.                     {% if pimcore_select("scroll").data == "apk-scroll" %}
  99.                         <div class="apk-scroll">
  100.                             {{ "SCROLL"|trans }}
  101.                         </div>
  102.                     {% elseif pimcore_select("scroll").data == "apk-top" %}
  103.                         <div class="apk-scroll apk-top">
  104.                             {{ "TOP"|trans }}
  105.                         </div>
  106.                     {% endif %}
  107.                     </div>
  108.                 </div>
  109.             </div>
  110.             {% endif %}
  112.         </div>
  113.     </section>
  115.     {% endif %}<!-- end section 1 -->
  118.     <!-- start section 2 -->
  119.     <div class="apk-section-grid uk-margin-large-top uk-margin-large-bottom">
  120.         <div class="uk-container apk-container-1400 uk-text-center">
  121.             <h2 class="uk-margin-medium-top">{{ pimcore_textarea("sectiontwo-title", {"nl2br" : true})|raw }}</h2>
  122.             <h3>{{ pimcore_textarea("sectiontwo-subtitle", {"nl2br" : true})|raw }}</h3>
  124.             <div class="uk-child-width-1-4@m uk-child-width-1-2@s uk-text-center" uk-grid>
  125.                 {% for i in pimcore_block('sectiontwo').iterator %}
  126.                     <div class="apk-content-section-grid">
  127.                         {{ pimcore_image('sectiontwo-image') }}
  128.                         {{ pimcore_wysiwyg("sectiontwo-content") }}
  129.                     </div>
  130.                 {% endfor %}
  131.             </div>
  133.             <div class="apk-content-sentence uk-text-left uk-margin-large-top uk-margin-bottom">{{ pimcore_textarea("sectiontwo-sentence", {"nl2br" : true})|raw }}</div>
  134.         </div>
  135.     </div>
  136.     <!-- end section 2 -->
  138.     {% if editmode %}<!-- start section 3 -->
  140.     <div class="uk-container apk-container-1400">
  141.         <div uk-alert>
  142.             <h1 class="uk-h1">Section 3</h1>
  143.         </div>
  144.         <ul uk-tab>
  145.             <li><a href="#">Configurations</a></li>
  146.             <li class="uk-active"><a href="#">Content Edit</a></li>
  147.         </ul>
  149.         <ul class="uk-switcher uk-margin">
  150.             <li class="apk-size-20 uk-grid-small" uk-grid>
  152.                 <div class="uk-width-1-2@m" uk-margin>
  154.                     <div>Afficher un scroll ?</div>
  155.                     {{ pimcore_select("scrolltwo", {
  156.                         "store" : [
  157.                             ['', 'Aucun'],
  158.                             ['apk-scroll', 'SCROLL'],
  159.                             ['apk-top', 'TOP']
  160.                         ],
  161.                         "defaultValue" : "apk-scroll"
  162.                     }) }}
  163.                     
  164.                 </div>
  166.             </li>
  167.         
  168.             <li class="uk-active">
  169.                 <div class="uk-margin-large-bottom">
  170.                     <div class="uk-margin-small-bottom"><strong>Image de background</strong></div>
  171.                     {{ pimcore_image('sectionthree-image') }}
  172.                     <div class="uk-margin-small-bottom"><strong>Image de background (mobile)</strong></div>
  173.                     {{ pimcore_image('sectionthree-image-mobile', {'width' : 200}) }}
  175.                     <div class="uk-margin"><strong>Titre de la banner</strong></div>
  176.                     <h2 class="uk-h2">
  177.                         {{ pimcore_textarea("sectionthree-title",{
  178.                             "nl2br" : true
  179.                         }) }}
  180.                         {{ pimcore_textarea("sectionthree-subtitle",{
  181.                             "nl2br" : true
  182.                         }) }}
  183.                     </h2>
  185.                     <div class="uk-margin"><strong>Texte de la banner</strong></div>
  186.                     {{ pimcore_wysiwyg("sectionthree-content") }}
  188.                     <div class="uk-margin"><strong>Petite phrase</strong></div>
  189.                     {{ pimcore_textarea("sectionthree-sentence", {"nl2br" : true})|raw }}
  190.                 </div>
  191.             </li>
  192.         </ul>
  193.     </div>
  195.     {% else %}
  197.     <section>
  198.         <div class="apk-section-wysiwyg">
  199.             <div class="uk-cover-container uk-flex uk-flex-middle">
  200.                 {% if pimcore_image('sectionthree-image').src %}
  201.                     {{ pimcore_image('sectionthree-image').thumbnail('full-background').html({'imgAttributes' : {'uk-cover' : null}})|raw }}    
  202.                 {% endif %}
  203.                 {% if pimcore_image('sectionthree-image-mobile').src %}
  204.                     {{ pimcore_image('sectionthree-image-mobile').thumbnail('full-background').html({'imgAttributes' : {'uk-cover' : null, 'class': 'uk-hidden@m'}})|raw }}    
  205.                 {% endif %}
  206.                 <div class="uk-container apk-container-1400">
  207.                     <div class="uk-position-relative uk-height-1-1">
  208.                         <div class="uk-child-width-1-2@m" uk-grid>
  210.                             <div>
  211.                             </div>
  213.                             <div>
  214.                                 <h2 class="uk-margin-remove-bottom">{{ pimcore_textarea("sectionthree-title", {"nl2br" : true})|raw }}</h2>
  215.                                 <h2 class="uk-margin-small-top"><span>{{ pimcore_textarea("sectionthree-subtitle", {"nl2br" : true})|raw }}</span></h2>
  217.                                 <div class="uk-margin-large-top uk-margin-medium-bottom apk-content">
  218.                                     {{ pimcore_wysiwyg("sectionthree-content") }}
  219.                                 </div>
  221.                                 <div class="apk-content-sentence uk-margin-xlarge-top uk-text-left">{{ pimcore_textarea("sectionthree-sentence", {"nl2br" : true})|raw }}</div>
  222.                             </div>
  224.                         </div>
  225.                 
  226.                     </div>
  227.                 </div>
  228.             </div>
  230.             {# Scroll géré dans le main.js #}
  231.             {% if pimcore_select("scrolltwo").data == "apk-scroll" or pimcore_select("scroll").data == "apk-top" %}
  232.             <div class="apk-scroll-container">
  233.                 <div class="uk-container apk-container-1400">
  234.                     <div class="uk-position-relative">
  235.                     {% if pimcore_select("scrolltwo").data == "apk-scroll" %}
  236.                         <div class="apk-scroll">
  237.                             {{ "SCROLL"|trans }}
  238.                         </div>
  239.                     {% elseif pimcore_select("scrolltwo").data == "apk-top" %}
  240.                         <div class="apk-scroll apk-top">
  241.                             {{ "TOP"|trans }}
  242.                         </div>
  243.                     {% endif %}
  244.                     </div>
  245.                 </div>
  246.             </div>
  247.             {% endif %}
  248.         </div>
  249.     </section>
  250.     {% endif %}<!-- end section 3 -->
  253.     <!-- start section 4 -->
  254.     <div class="apk-section-hexagone">
  255.         <div class="uk-container apk-container-1200">
  256.             <div class="apk-container-hexagone">
  257.                 <div class="uk-child-width-1-2@m" uk-grid>
  258.                     <div>
  259.                         <h2 class="uk-margin-medium-top uk-margin-remove-bottom">{{ pimcore_textarea("sectionfour-title", {"nl2br" : true})|raw }}</h2>
  260.                         <h2 class="uk-margin-small-top"><span>{{ pimcore_textarea("sectionfour-subtitle", {"nl2br" : true})|raw }}</span></h2>
  262.                         <div class="uk-margin-top apk-content">
  263.                             {{ pimcore_wysiwyg("sectionfour-content", {"nl2br" : true})|raw }}
  264.                         </div>
  266.                         <div class="apk-content-sentence uk-margin-large-top uk-text-left">{{ pimcore_textarea("sectionfour-sentence", {"nl2br" : true})|raw }}</div>
  267.                     </div>
  269.                     <div class="uk-background-contain uk-height-large uk-panel uk-flex uk-flex-center uk-flex-middle uk-padding-remove" style="background-image: url('/static/img/pictos/hexagone.svg');">
  270.                         <div class="apk-section-hexagone-image">{{ pimcore_image('sectionfour-image') }}</div>
  271.                     </div>
  272.                 </div>
  273.             </div>
  274.         </div>
  275.     </div>
  276.     <!-- end section 4 -->
  279.     {% if editmode %}<!-- start section 5 -->
  281.     <div class="uk-container apk-container-1400">
  282.         <div uk-alert>
  283.             <h1 class="uk-h1">Section 5</h1>
  284.         </div>
  285.         <ul uk-tab>
  286.             <li><a href="#">Configurations</a></li>
  287.             <li class="uk-active"><a href="#">Content Edit</a></li>
  288.         </ul>
  290.         <ul class="uk-switcher uk-margin">
  291.             <li class="apk-size-20 uk-grid-small" uk-grid>
  293.                 <div class="uk-width-1-2@m" uk-margin>
  295.                     <div>Afficher un scroll ?</div>
  296.                     {{ pimcore_select("scrollthree", {
  297.                         "store" : [
  298.                             ['', 'Aucun'],
  299.                             ['apk-scroll', 'SCROLL'],
  300.                             ['apk-top', 'TOP']
  301.                         ],
  302.                         "defaultValue" : "apk-scroll"
  303.                     }) }}
  304.                     
  305.                 </div>
  307.             </li>
  308.         
  309.             <li class="uk-active">
  311.                 <div class="uk-margin"><strong>Titre</strong></div>
  312.                 <h2 class="uk-h2">
  313.                     {{ pimcore_textarea("sectionfive-title",{
  314.                         "nl2br" : true
  315.                     }) }}
  316.                 </h2>
  318.                 {% for i in pimcore_block('sectionfive').iterator %}
  319.                 <div class="uk-margin-large-bottom">
  321.                     <div class="uk-margin-small-bottom"><strong>Image hexagonale</strong></div>
  322.                     {{ pimcore_image('sectionfive-hexagone') }}
  325.                     <div class="uk-margin"><strong>Sous-titre</strong></div>
  326.                     <h3>
  327.                         {{ pimcore_textarea("sectionfive-subtitle",{
  328.                             "nl2br" : true
  329.                         }) }}
  330.                     </h3>
  332.                     <div class="uk-margin-small-bottom"><strong>Image</strong></div>
  333.                     {{ pimcore_image('sectionfive-image') }}
  335.                     <div class="uk-margin"><strong>Texte</strong></div>
  336.                     {{ pimcore_wysiwyg("sectionfive-content") }}
  338.                 </div>
  339.                 {% endfor %}
  341.                 <div class="uk-margin"><strong>Petite phrase</strong></div>
  342.                 {{ pimcore_textarea("sectionfive-sentence", {"nl2br" : true})|raw }}
  343.             </li>
  344.         </ul>
  345.     </div>
  347.     {% else %}
  349.     <section>
  350.         <div class="apk-section-grid-hexagone" uk-height-match="target: .apk-border-heading">
  351.             
  352.             <div class="uk-container apk-container-1400">
  353.                 <h2 class="uk-text-center">
  354.                     {{ pimcore_textarea("sectionfive-title",{
  355.                         "nl2br" : true
  356.                     }) }}
  357.                 </h2>
  359.                 <div class="uk-grid-large uk-child-width-1-2@m uk-child-width-1-3@m uk-text-center" uk-grid uk-height-match="target: .apk-border">
  360.                     {% for i in pimcore_block('sectionfive').iterator %}
  361.                     <div class="apk-content">
  362.                         <div class="apk-border uk-position-relative">
  363.                             <div class="apk-hexagone-absolute">{{ pimcore_image('sectionfive-hexagone') }}</div>
  365.                             <h3 class="apk-border-heading">
  366.                                 {{ pimcore_textarea("sectionfive-subtitle",{
  367.                                     "nl2br" : true
  368.                                 }) }}
  369.                             </h3>
  370.                             
  371.                             {{ pimcore_image('sectionfive-image') }}
  373.                             {{ pimcore_wysiwyg("sectionfive-content") }}
  374.                         </div>
  375.                     </div>
  376.                     {% endfor %}
  377.                 </div>
  378.                 <p class="apk-content-sentence uk-margin-medium-bottom">{{ pimcore_textarea("sectionfive-sentence", {"nl2br" : true})|raw }}</p>
  379.             </div>
  381.             {# Scroll géré dans le main.js #}
  382.             {% if pimcore_select("scrollthree").data == "apk-scroll" or pimcore_select("scrollthree").data == "apk-top" %}
  383.             <div class="apk-scroll-container">
  384.                 <div class="uk-container apk-container-1400">
  385.                     <div class="uk-position-relative">
  386.                     {% if pimcore_select("scrollthree").data == "apk-scroll" %}
  387.                         <div class="apk-scroll">
  388.                             {{ "SCROLL"|trans }}
  389.                         </div>
  390.                     {% elseif pimcore_select("scrollthree").data == "apk-top" %}
  391.                         <div class="apk-scroll apk-top">
  392.                             {{ "TOP"|trans }}
  393.                         </div>
  394.                     {% endif %}
  395.                     </div>
  396.                 </div>
  397.             </div>
  398.             {% endif %}
  399.         </div>
  400.     </section>
  401.     {% endif %}<!-- end section 5 -->
  405.     {% if editmode %}<!-- start section 6 -->
  406.     
  407.     <div class="uk-container apk-container-1400">
  408.         <div uk-alert>
  409.             <h1 class="uk-h1">Section 6</h1>
  410.         </div>
  411.         <ul uk-tab>
  412.             <li><a href="#">Configurations</a></li>
  413.             <li class="uk-active"><a href="#">Content Edit</a></li>
  414.         </ul>
  416.         <ul class="uk-switcher uk-margin">
  417.             <li class="apk-size-20 uk-grid-small" uk-grid>
  419.                 <div class="uk-width-1-2@m" uk-margin>
  421.                     <div>Afficher un scroll ?</div>
  422.                     {{ pimcore_select("scrollsix", {
  423.                         "store" : [
  424.                             ['', 'Aucun'],
  425.                             ['apk-scroll', 'SCROLL'],
  426.                             ['apk-top', 'TOP']
  427.                         ],
  428.                         "defaultValue" : "apk-scroll"
  429.                     }) }}
  430.                     
  431.                 </div>
  433.             </li>
  434.         
  435.             <li class="uk-active">
  437.                 <div class="uk-margin"><strong>Titre</strong></div>
  440.                 <div class="uk-margin-large-bottom">
  442.                     <div class="uk-margin-small-bottom"><strong>Image</strong></div>
  443.                     {{ pimcore_image('sectionsix-image') }}
  446.                     <div class="uk-margin"><strong>Titre</strong></div>
  447.                     <h2 class="uk-margin-medium-top uk-margin-remove-bottom">{{ pimcore_textarea("sectionsix-title", {"nl2br" : true})|raw }}</h2>
  448.                     <hr>
  449.                     <h2 class="uk-margin-small-top"><span>{{ pimcore_textarea("sectionsix-subtitle", {"nl2br" : true})|raw }}</span></h2>
  451.                     <div class="uk-margin"><strong>Texte</strong></div>
  452.                     {{ pimcore_wysiwyg("sectionsix-content") }}
  454.                     <div class="uk-margin"><strong>Lien</strong></div>
  455.                     {{ pimcore_link("sectionsix-link", {"class" : "uk-button"}) }}
  457.                 </div>
  459.             </li>
  460.         </ul>
  461.     </div>
  463.     {% else %}
  465.     <section>
  466.         <div class="apk-section-grid-half">
  467.             <div class="uk-child-width-1-2@m apk-margin-section" uk-grid>
  468.                 <div>
  469.                     <div class="uk-container apk-container-700 uk-margin-medium-top">
  470.                         
  471.                         <h2 class="uk-margin-large-top uk-margin-remove-bottom uk-visible@m">{{ pimcore_textarea("sectionsix-title", {"nl2br" : true})|raw }}</h2>
  472.                         <h2 class="uk-margin-small-top uk-visible@m"><span>{{ pimcore_textarea("sectionsix-subtitle", {"nl2br" : true})|raw }}</span></h2>
  474.                         <div class="uk-margin-medium-top apk-content">
  475.                             {{ pimcore_wysiwyg("sectionsix-content", {"nl2br" : true})|raw }}
  477.                             {{ pimcore_link("sectionsix-link", {"class" : "uk-button"}) }}
  478.                         </div>
  479.                     </div>
  480.                 </div>
  481.                 <div class="uk-flex-first uk-flex-last@m">
  482.                     <div class="uk-background-cover uk-height-1-1 uk-panel uk-flex uk-flex-center uk-flex-middle uk-visible@m" style="background-image: url({{ pimcore_image('sectionsix-image').getSrc() }});">
  483.                     </div>
  485.                     <div class="uk-hidden@m">
  486.                         <div class="uk-margin-left">
  487.                             <h2 class="uk-margin-large-top uk-margin-remove-bottom">{{ pimcore_textarea("sectionsix-title", {"nl2br" : true})|raw }}</h2>
  488.                             <h2 class="uk-margin-small-top uk-margin-medium-bottom"><span>{{ pimcore_textarea("sectionsix-subtitle", {"nl2br" : true})|raw }}</span></h2>
  489.                         </div>
  490.                         {{ pimcore_image('sectionsix-image') }}
  491.                     </div>
  492.                 </div>
  493.             </div>
  494.             
  495.             {# Scroll géré dans le main.js #}
  496.             {% if pimcore_select("scrollsix").data == "apk-scroll" or pimcore_select("scrollsix").data == "apk-top" %}
  497.             <div class="apk-scroll-container">
  498.                 <div class="uk-container apk-container-1400">
  499.                     <div class="uk-position-relative">
  500.                     {% if pimcore_select("scrollsix").data == "apk-scroll" %}
  501.                         <div class="apk-scroll">
  502.                             {{ "SCROLL"|trans }}
  503.                         </div>
  504.                     {% elseif pimcore_select("scrollsix").data == "apk-top" %}
  505.                         <div class="apk-scroll apk-top">
  506.                             {{ "TOP"|trans }}
  507.                         </div>
  508.                     {% endif %}
  509.                     </div>
  510.                 </div>
  511.             </div>
  512.             {% endif %}
  514.         </div><!-- end section 6 -->
  515.     </section>
  516.     
  517.     {% endif %}
  522. </div><!-- end magnesium -->
  523. {{ pimcore_areablock('contentBottom') }}
  524. </main><!-- end #main -->
  526. {% endblock %}
  528. {% block inlinescripts %}
  529.         
  530. {% endblock inlinescripts %}