templates/bundles/SyliusShopBundle/Homepage/lastEvent.html.twig line 1

Open in your IDE?
  1. <div class="container-evenement">
  2. {% set evenementArticles = resources%}
  3.     <div class="ui grid" id="event-div">
  4.         <div class="height wide column" id="main-div-event-homepage">
  5.             <div class="background-black">
  6.                 <div class="text-main-image">
  7.                     <div class="place-times-event">
  8.                         {% set month0 =  evenementArticles[0].createdAt|date('F') %}
  9.                         {% set translation0 = 'sylius.ui.' ~ month0 %}
  10.                         <div>
  11.                             <i class="calendar alternate outline icon"></i>
  12.                             {{ evenementArticles[0].DateEvenement|date('j') }} {{ translation0|trans }}, {{ evenementArticles[0].DateEvenement|date('Y') }}
  13.                         </div>
  14.                         <div>
  15.                             <i class="map marker alternate icon"></i>
  16.                             {% if evenementArticles[0].articleLocation.location|length > 40 %}
  17.                                 {{ evenementArticles[0].articleLocation.location|slice(0, 40) }}...
  18.                             {% else %}
  19.                                 {{ evenementArticles[0].articleLocation.location }}
  20.                             {% endif %}
  21.                         </div>
  22.                     </div>
  24.                     <h3>{{ evenementArticles[0].translation.title}}</h3>
  25.                     <div class="content-event">
  26.                         {% if evenementArticles[0].translation.content|striptags|length > 150 %}
  27.                             {{ evenementArticles[0].translation.content|striptags|slice(0, 150)|raw }}...
  28.                         {% else %}
  29.                             {{ evenementArticles[0].translation.content|striptags|raw }}
  30.                         {% endif %}
  31.                     </div>
  32.                     <div>
  33.                         <a href="{{ path('odiseo_sylius_blog_plugin_shop_evenement_show', {'slug': evenementArticles[0].slug}) }}">En savoir plus <i class="arrow right icon"></i></a>
  34.                     </div>
  35.                 </div>
  36.             </div>
  37.             <img src="{{ evenementArticles[0].images.toArray()[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ evenementArticles[0].translation.title }}" class="ui bordered image" />
  39.         </div>
  40.         {% if app.user is not null%}
  41.             <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_index') }}" class="btn btn-primary" id="button-add-evenement">Proposer un évènement</a>
  42.         {% else %}
  43.             <a href="{{ path('sylius_no_connected_evenement') }}" class="btn btn-primary" id="button-add-evenement">Proposer un évènement</a>
  44.         {% endif %}
  45.         <div class="height wide column" id="second-column">
  46.             <div class="ui grid">
  47.                 <div class="row">
  48.                     <div class="sixteen wide column" id="second-div-1-event">
  49.                         <div class="div-img-second-div-1">
  50.                             <img src="{{ evenementArticles[1].images.toArray()[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ evenementArticles[1].translation.title }}" class="ui bordered image num2" />
  51.                         </div>
  52.                         <div class="text-second-image">
  53.                             <div class="place-times-event">
  54.                                 {% set month1 =  evenementArticles[1].createdAt|date('F') %}
  55.                                 {% set translation1 = 'sylius.ui.' ~ month1 %}
  56.                                 <div>
  57.                                     <i class="calendar alternate outline icon"></i>
  58.                                     {{ evenementArticles[1].DateEvenement|date('j') }} {{ translation0|trans }}, {{ evenementArticles[1].DateEvenement|date('Y') }}
  59.                                 </div>
  60.                                 <div>
  61.                                     <i class="map marker alternate icon"></i>
  62.                                     {% if evenementArticles[1].articleLocation.location|length > 14 %}
  63.                                         {{ evenementArticles[1].articleLocation.location|slice(0, 14) }}...
  64.                                     {% else %}
  65.                                         {{ evenementArticles[1].articleLocation.location }}
  66.                                     {% endif %}
  67.                                 </div>
  68.                             </div>
  69.                             <h3>{{ evenementArticles[1].translation.title}}</h3>
  70.                             <div class="content-event">
  71.                                 {% if evenementArticles[1].translation.content|striptags|length > 60 %}
  72.                                     {{ evenementArticles[1].translation.content|striptags|slice(0, 60)|raw }}...
  73.                                 {% else %}
  74.                                     {{ evenementArticles[1].translation.content|striptags|raw }}
  75.                                 {% endif %}
  76.                             </div>
  77.                             <div>
  78.                                 <a href="{{ path('odiseo_sylius_blog_plugin_shop_evenement_show', {'slug': evenementArticles[1].slug}) }}">En savoir plus <i class="arrow right icon"></i></a>
  79.                             </div>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.                 <div class="row">
  84.                     <div class="sixteen wide column" id="second-div-2-event">
  85.                         <div class="div-img-second-div-2">
  86.                             <img src="{{ evenementArticles[2].images.toArray()[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ evenementArticles[2].translation.title }}" class="ui bordered image num2" />
  87.                         </div>
  88.                         <div class="text-second-image">
  89.                             <div class="place-times-event">
  90.                                 {% set month2 =  evenementArticles[2].createdAt|date('F') %}
  91.                                 {% set translation2 = 'sylius.ui.' ~ month2 %}
  92.                                 <div>
  93.                                     <i class="calendar alternate outline icon"></i>
  94.                                     {{ evenementArticles[2].DateEvenement|date('j') }} {{ translation0|trans }}, {{ evenementArticles[2].DateEvenement|date('Y') }}
  95.                                 </div>
  96.                                 <div>
  97.                                     <i class="map marker alternate icon"></i>
  98.                                     {% if evenementArticles[2].articleLocation.location|length > 14 %}
  99.                                     {{ evenementArticles[2].articleLocation.location|slice(0, 14) }}...
  100.                                     {% else %}
  101.                                     {{ evenementArticles[2].articleLocation.location }}
  102.                                     {% endif %}
  103.                                 </div>
  104.                             </div>
  105.                             <h3>{{ evenementArticles[2].translation.title}}</h3>
  106.                             <div class="content-event">
  107.                                 {% if evenementArticles[2].translation.content|striptags|length > 60 %}
  108.                                     {{ evenementArticles[2].translation.content|striptags|slice(0, 60)|raw }}...
  109.                                 {% else %}
  110.                                     {{ evenementArticles[2].translation.content|striptags|raw }}
  111.                                 {% endif %}
  113. {#                                {{ evenementArticles[2].translation.content|raw }}#}
  114.                             </div>
  115.                             <div>
  116.                                 <a href="{{ path('odiseo_sylius_blog_plugin_shop_evenement_show', {'slug': evenementArticles[2].slug}) }}">En savoir plus <i class="arrow right icon"></i></a>
  117.                             </div>
  118.                         </div>
  120.                     </div>
  121.                 </div>
  122.             </div>
  123.         </div>
  124.     </div>
  126. </div>
  128. <style>
  129.     /*.ui.bordered.image.num1, .ui.bordered.image.num2{*/
  130.     /*height: 200px;*/
  131.     /*}*/
  132.     /*#main-div-event-homepage {*/
  133.     /*    position: relative;*/
  134.     /*    overflow: hidden;*/
  135.     /*    height: 500px;*/
  136.     /*}*/
  137.     /*#main-div-event-homepage img{*/
  138.     /*    position: absolute;*/
  139.     /*    z-index: 0;*/
  140.     /*    width: 100%;*/
  141.     /*    height: 100%;*/
  142.     /*    top: 0;*/
  143.     /*    left: 0;*/
  144.     /*}*/
  145.     /*#main-div-event-homepage .background-black{*/
  146.     /*    position: absolute;*/
  147.     /*    z-index: 1;*/
  148.     /*    width: 100%;*/
  149.     /*    height: 100%;*/
  150.     /*    top: 0;*/
  151.     /*    left: 0;*/
  152.     /*    background-color: rgba(0,0,0,0.5);*/
  153.     /*}*/
  154.     /*#main-div-event-homepage .text-main-image{*/
  155.     /*    position: absolute;*/
  156.     /*    z-index: 2;*/
  157.     /*    width: 100%;*/
  158.     /*    bottom: 0;*/
  159.     /*    left: 0;*/
  160.     /*    padding: 2rem;*/
  161.     /*    color: white;*/
  162.     /*}*/
  163.     /*#main-div-event-homepage .text-main-image h3, .text-second-image h3{*/
  164.     /*    font-size: var(--md-fz);*/
  165.     /*    margin: 0.5rem 0;*/
  166.     /*}*/
  167.     /*#main-div-event-homepage .text-main-image p, .text-second-image p{*/
  168.     /*    font-size: var(--sm-fz);*/
  169.     /*}*/
  170.     /*#main-div-event-homepage .text-main-image a, .text-second-image a{*/
  171.     /*    color: white;*/
  172.     /*    font-size: var(--sm-fz);*/
  174.     /*}*/
  176.     /*#second-div-1, #second-div-2 {*/
  177.     /*    height:50%;*/
  178.     /*    display: inline-flex;*/
  179.     /*}*/
  180.     /*.place-times-event{*/
  181.     /*    display: inline-flex;*/
  182.     /*    gap: 1rem;*/
  183.     /*    font-size: var(--xs-fz);*/
  184.     /*}*/
  185.     /*.content-event{*/
  186.     /*    margin-bottom: 1rem;*/
  187.     /*    font-size: var(--sm-fz);*/
  188.     /*    line-height: 1.5;*/
  189.     /*}*/
  190.     /*#second-column{*/
  191.     /*    padding: 0 1rem !important;*/
  192.     /*}*/
  193.     /*#second-column .ui.grid{*/
  194.     /*    gap: 2rem;*/
  195.     /*    margin: 0 !important;*/
  196.     /*    justify-content: space-between;*/
  197.     /*    height: 100%;*/
  198.     /*}*/
  199.     /*#second-column .row{*/
  200.     /*    padding: 1rem;*/
  201.     /*    background-color: #F6F6F6;*/
  202.     /*}*/
  203.     /*.text-second-image a {*/
  204.     /*    color: black;*/
  205.     /*}*/
  206.     /*.text-second-image{*/
  207.     /*    height: 100%;*/
  208.     /*    padding: 1rem;*/
  209.     /*}*/
  210.     /*.text-second-image .place-times-event i, .text-second-image .place-times-event{*/
  211.     /*    color: #858585;*/
  212.     /*}*/
  216.     /*@media screen and (max-width: 768px){*/
  217.     /*    #event-div{*/
  218.     /*        flex-direction: column;*/
  219.     /*    }*/
  220.     /*    #main-div-event-homepage{*/
  221.     /*        width: 100% !important;*/
  222.     /*        height: 400px;*/
  223.     /*    }*/
  224.     /*    #second-column{*/
  225.     /*        width: 100% !important;*/
  226.     /*    }*/
  227.     /*    #second-div-1, #second-div-2{*/
  228.     /*        display: flex;*/
  229.     /*        flex-direction: column;*/
  230.     /*    }*/
  231.     /*}*/
  232. </style>