templates/includes/blocks/projectList.html.twig line 1

Open in your IDE?
  1. {% set types = ['All projects', 'Ongoing', 'Coming', 'Completed']
  2. %}
  6. {% import "./macros_typography.html.twig" as macrosTypography %}
  7. {% import "./macros_button.html.twig" as macrosButton %}
  9. <section class="projects-section py-12"
  10.   section-shade="dark">
  11.   <div class="big-container">
  13.     <nav>
  14.       <ul class="projects-type-wrapp flex flex-wrap gap-x-4 gap-y-5">
  15.         {% for type in types %}
  16.         <li fade
  17.           fade-trigger="none">
  18.           <button class="project-type-btn {{loop.first ? 'active'}}"
  19.             type="{{loop.first ? '' : type|lower|replace({' ': '_'}) }}">
  20.             <svg>
  21.               <use xlink:href="#icon-check"></use>
  22.             </svg>
  23.             {{type}}
  24.           </button>
  25.         </li>
  26.         {% endfor %}
  27.       </ul>
  28.     </nav>
  30.     <div class="grid md:grid-cols-2 2xl:grid-cols-3 gap-x-8 gap-y-10 md:gap-y-28 mt-12">
  31.       {% for project in content.projects %}
  32.       <div class="project-item grid grid-rows-[auto_1fr]"
  33.         type="{{ project.projectType|lower|replace({' ': '_'}) }}"
  34.         fade
  35.         fade-trigger="none">
  37.         <div class="relative overflow-hidden">
  38.           {% if project.projectType %}
  39.           <div class="absolute top-4 left-4 bg-white rounded-full py-2 px-6 text-blue text-sm z-10">
  40.             {{project.projectType}}
  41.           </div>
  42.           {% endif %}
  44.           <div
  45.             class="project-item__img h-[50vh] min-h-[310px] max-h-[310px] lg:max-h-[450px] scale-110 img-clip select-none">
  46.             {# image size 720x840 #}
  47.             {% if project.image|length > 0 %}
  48.             {% set image = project.image.thumbnails['720x840'] %}
  49.             <img src="{{ image }}"
  50.               width="100"
  51.               height="450px"
  52.               alt="{{project.title}}"
  53.               loading="lazy">
  54.             {% endif %}
  56.             {% if project.image|length > 0 %}
  57.             {% set image = project.image.thumbnails['720x840'] %}
  58.             <img src="{{ image }}"
  59.               width="100"
  60.               height="450px"
  61.               alt="{{project.title}}"
  62.               loading="lazy">
  63.             {% endif %}
  64.           </div>
  65.         </div>
  67.         <div class="project-item__content relative flex flex-col pt-4 md:pt-10 bg-blue text-white group">
  68.           <a class="absolute inset-0 text-[0px] z-10"
  69.             href="{{ sulu_content_path(project.url) }}">{{project.title}}</a>
  71.           {% if project.location %}
  72.           <div class="project-item__eyebrow text-sm w-10/12"
  73.             split-directon="bottom"
  74.             split-trigger="none">
  75.             <span>{{project.location}}</span>
  76.             {% if project.area %}
  77.             <span class="inline-block px-2 opacity-50">•</span>
  78.             <span>{{project.area}}m<sup>2</sup>
  79.             </span>
  80.             {% endif %}
  81.             {% if project.rooms %}
  82.             <span class="inline-block px-2 opacity-50">•</span>
  83.             <span>{{project.rooms}}
  84.             </span>
  85.             {% endif %}
  86.           </div>
  87.           {% endif %}
  89.           <h2 class="project-item__title h3 w-10/12 mt-3 group-hover:underline duration-300"
  90.             split-diretion="bottom"
  91.             split-trigger="none">{{project.title}}</h2>
  93.           {{macrosButton.arrowDiagonal({
  94.           'class': 'project-item__arrow !absolute bottom-0 right-0',
  95.           'withoutAnimate': true
  96.           })
  97.           }}
  98.         </div>
  99.       </div>
  100.       {% endfor %}
  101.     </div>
  102.     
  105.     {% include "./partials/layout/pagination.html.twig" with {
  106.     'class' : 'white mt-14 md:mt-24'
  107.     } %}
  109.   </div>
  111. </section>