bundles/Alea/AreabricksBundle/Resources/views/areas/cards1/view.html.twig line 1

Open in your IDE?
  1. {% set widthFirstColumn = pimcore_select('widthFirstColumn').getData() %}
  2. {% set widthSecondColumn = pimcore_select('widthSecondColumn').getData() %}
  3. {% set widthThirdColumn = pimcore_select('widthThirdColumn').getData() %}
  4. {% set widthFourthColumn = pimcore_select('widthFourthColumn').getData() %}
  5. {% set titleImage1TextColor = pimcore_select('titleImage1TextColor').getData() %}
  6. {% set titleImage2TextColor = pimcore_select('titleImage2TextColor').getData() %}
  7. {% set titleImage3TextColor = pimcore_select('titleImage3TextColor').getData() %}
  8. {% set titleImage4TextColor = pimcore_select('titleImage4TextColor').getData() %}
  9. {% set card1BackgroundColor = pimcore_select('card1BackgroundColor').getData() %}
  10. {% set card2BackgroundColor = pimcore_select('card2BackgroundColor').getData() %}
  11. {% set card3BackgroundColor = pimcore_select('card3BackgroundColor').getData() %}
  12. {% set card4BackgroundColor = pimcore_select('card4BackgroundColor').getData() %}
  13. {% set imageType1 = pimcore_select('imageType1').getData() %}
  14. {% set imageType2 = pimcore_select('imageType2').getData() %}
  15. {% set imageType3 = pimcore_select('imageType3').getData() %}
  16. {% set imageType4 = pimcore_select('imageType4').getData() %}
  18. <div class="row gx-0 gx-lg-20 gy-20">
  20.     {% if (widthFirstColumn != 0) %}
  21.         <div class="col-12 col-md-{{ widthFirstColumn }} ">
  22.             {{ pimcore_link('linkCard1') }}
  23.             {%  set linkCard1 = pimcore_link('linkCard1') %}
  24.             <a href="{{ linkCard1.getHref() ?: '#' }}" class="product home position-relative d-block overflow-hidden bg-{{ card1BackgroundColor }} text-center d-flex flex-column justify-content-center align-content-center">
  25.                 {% if (editmode or (not editmode and imageType1 == 'image'))%}
  26.                     <div class="image p-40 p-lg-80">
  27.                         {{ pimcore_image("image1") }}
  28.                     </div>
  29.                 {% endif %}
  30.                 {% if (not editmode and imageType1 == 'background')%}
  31.                     <div class="image background" >
  32.                         {{ pimcore_image("image1").thumbnail('cards1_image').html({
  33.                             'pictureAttributes': {
  34.                                 'class': ''
  35.                             },
  36.                             'imgAttributes': {
  37.                                 'class': 'w-100 h-100 object-fit-cover'
  38.                             }
  39.                         }) | raw  }}
  40.                     </div>
  41.                 {% endif %}
  42.                 <div class="position-absolute bottom-0 start-0 w-100 text-center px-20 py-5 my-40 z-1">
  43.                     <span class="h4 fw-normal text-center ps-5 position-relative text-{{ titleImage1TextColor }}">
  44.                         {{ pimcore_input("titleImage1",{
  45.                             "width": '100%',
  46.                             "placeholder": "Titolo Immagine 1"
  47.                         }) }}
  48.                     </span>
  49.                 </div>
  50.             </a>
  51.         </div>
  52.     {% endif %}
  54.     {% if (widthSecondColumn != 0) %}
  55.         <div class="col-12 col-md-{{ widthSecondColumn }} ">
  56.             {{ pimcore_link('linkCard2') }}
  57.             {%  set linkCard2 = pimcore_link('linkCard2') %}
  58.             <a href="{{ linkCard2.getHref() ?: '#' }}" class="product home position-relative d-block overflow-hidden bg-{{ card2BackgroundColor }} text-center d-flex flex-column justify-content-center align-content-center">
  59.                 {% if (editmode or (not editmode and imageType2 == 'image'))%}
  60.                     <div class="image p-40 p-lg-80">
  61.                         {{ pimcore_image("image2") }}
  62.                     </div>
  63.                 {% endif %}
  64.                 {% if (not editmode and imageType2 == 'background')%}
  65.                     <div class="image background" style="background-image: url({{  pimcore_image("image2").getSrc() }})">
  66.                     </div>
  67.                 {% endif %}
  68.                 <div class="position-absolute bottom-0 start-0 w-100 text-center px-20 py-5 my-40 z-1">
  69.                     <span class="h4 fw-normal text-center ps-5 position-relative text-{{ titleImage2TextColor }}">
  70.                         {{ pimcore_input("titleImage2",{
  71.                             "width": '100%',
  72.                             "placeholder": "Titolo Immagine 2"
  73.                         }) }}
  74.                     </span>
  75.                 </div>
  76.             </a>
  77.         </div>
  78.     {% endif %}
  79.     {% if (widthThirdColumn != 0) %}
  80.         <div class="col-12 col-md-{{ widthThirdColumn }} ">
  81.             {{ pimcore_link('linkCard3') }}
  82.             {%  set linkCard3 = pimcore_link('linkCard3') %}
  83.             <a href="{{ linkCard3.getHref() ?: '#' }}" class="product home position-relative d-block overflow-hidden bg-{{ card3BackgroundColor }} text-center d-flex flex-column justify-content-center align-content-center">
  84.                 {% if (editmode or (not editmode and imageType3 == 'image'))%}
  85.                     <div class="image p-40 p-lg-80">
  86.                         {{ pimcore_image("image3") }}
  87.                     </div>
  88.                 {% endif %}
  89.                 {% if (not editmode and imageType3 == 'background')%}
  90.                     <div class="image background" style="background-image: url({{  pimcore_image("image3").getSrc() }})">
  91.                     </div>
  92.                 {% endif %}
  93.                 <div class="position-absolute bottom-0 start-0 w-100 text-center px-20 py-5 my-40 z-1">
  94.                     <span class="h4 fw-normal text-center ps-5 position-relative text-{{ titleImage3TextColor }}">
  95.                         {{ pimcore_input("titleImage3",{
  96.                             "width": '100%',
  97.                             "placeholder": "Titolo Immagine 3"
  98.                         }) }}
  99.                     </span>
  100.                 </div>
  101.             </a>
  102.         </div>
  103.     {% endif %}
  104.     {% if (widthFourthColumn != 0) %}
  105.         <div class="col-12 col-md-{{ widthFourthColumn }} ">
  106.             {{ pimcore_link('linkCard4') }}
  107.             {%  set linkCard4 = pimcore_link('linkCard4') %}
  108.             <a href="{{ linkCard4.getHref() ?: '#' }}" class="product home position-relative d-block overflow-hidden bg-l{{ card4BackgroundColor }} text-center d-flex flex-column justify-content-center align-content-center">
  109.                 {% if (editmode or (not editmode and imageType4 == 'image'))%}
  110.                     <div class="image p-40 p-lg-80">
  111.                         {{ pimcore_image("image4") }}
  112.                     </div>
  113.                 {% endif %}
  114.                 {% if (not editmode and imageType4 == 'background')%}
  115.                     <div class="image background" style="background-image: url({{  pimcore_image("image4").getSrc() }})">
  116.                     </div>
  117.                 {% endif %}
  118.                 <div class="position-absolute bottom-0 start-0 w-100 text-center px-20 py-5 my-40 z-1">
  119.                     <span class="h4 fw-normal text-center ps-5 position-relative text-{{ titleImage4TextColor }}">
  120.                         {{ pimcore_input("titleImage4",{
  121.                             "width": '100%',
  122.                             "placeholder": "Titolo Immagine 4"
  123.                         }) }}
  124.                     </span>
  125.                 </div>
  126.             </a>
  127.         </div>
  128.     {% endif %}
  129. </div>