templates/themes/theme/casestudies/casestudy.html.twig line 1

Open in your IDE?
  1. <script type="application/ld+json">
  2.     {
  3.         "@context": "https://schema.org",
  4.         "@type": "Article",
  5.         "headline": "{{ study.title }}",
  6.         "author": {
  7.             "@type": "Organization",
  8.             "name": "{{ sitename }}"
  9.         },
  10.         "datePublished": "{{ study.createdAt|date('c') }}",
  11.         "dateModified": "{{ study.updatedAt|date('c') }}",
  12.         "image": {
  13.             "@type": "ImageObject",
  14.             "url": "{{ siteurl }}{{ imageCache('/' ~ study.getFullImage2Path, 'zoomCrop', 800, 600) }}",
  15.             "width": 800,
  16.             "height": 600
  17.         },
  18.         "about": {
  19.             "@type": "Project",
  20.             "name": "{{ study.projectName }}",
  21.             "startDate": "{{ study.projectStartDate|date('c') }}",
  22.             "location": {
  23.             "@type": "Place",
  24.             "name": "{{ study.projectLocation }}"
  25.             },
  26.             "description": "{{ study.kicker|raw|nl2br|striptags }}",
  27.         },
  28.         "articleBody": "{{ study.detailContent|html_entity_decode|replace({'\n': ' ', '\r': ' '})|striptags }}"
  29.     }
  30. </script>
  32. <div class="case-study-banner flex items-end pb-12 mb-12 text-white lazyBackgroundImage" data-mobile="{{ imageCache('/' ~ study.getFullImage5Path, 'zoomCrop', 1566, 822) }}" data-desktop="{{ imageCache('/' ~ study.getFullImage5Path, 'zoomCrop', 3200, 1680) }}">
  33.     <div class="container relative z-20">
  34.         <div class="row">
  35.             <div class="xl:col-4 lg:col-6">
  36.                 <h1>{{ allowInlineEditor(study, 'title')|raw }}</h1>
  37.             </div>
  38.         </div>
  39.         <div class="row">
  40.             <div class="xl:col-6 lg:col-8 text-lg">
  41.                 {{ allowInlineEditor(study, 'kicker')|raw }}
  42.             </div>
  43.         </div>
  44.     </div>
  45. </div>
  47. <section class="mb-12">
  48.     <div class="container">
  49.         <div class="row">
  50.             {% if study.image %}
  51.                 <div class="md:col-4 mb-6 md:mb-0">
  52.                     <img class="h-auto max-h-[60px] w-auto max-w-full mb-3" src="{{ imageCache('/'~ study.getFullImagePath, "cropResize", 200, 200) }}" height="100" width="100" alt="{{ study.clientName }}" loading="lazy" />
  53.                 </div>
  54.             {% endif %}
  55.             {% if study.projectName %}
  56.                 <div class="md:col-4 md:border-l md:border-dark md:pl-4 md:flex md:flex-col md:justify-center mb-6 md:mb-0">
  57.                     <p class="text-sm mb-0 text-secondary"><strong>Project</strong></p>
  58.                     <h3 class="capitalize text-dark mt-0 mb-0">{{ allowInlineEditor(study, 'projectName')|raw }}</h3>
  59.                 </div>
  60.             {% endif %}
  61.             {% if study.projectType %}
  62.                 <div class="md:col-4 md:border-l md:border-dark md:pl-4 md:flex md:flex-col md:justify-center">
  63.                     <p class="text-sm mb-0 text-secondary"><strong>Project Type</strong></p>
  64.                     <h3 class="capitalize text-dark mt-0 mb-0">{{ study.projectType }}</h3>
  65.                 </div>
  66.             {% endif %}
  67.         </div>
  68.     </div>
  69. </section>
  71. {% if study.detailContent %}
  72.     <section class="mb-12">
  73.         <div class="container">
  74.             <div class="row">
  75.                 <div class="md:col-6 mb-6 md:mb-0">
  76.                     <img class="max-w-full h-auto" src="{{ imageCache('/' ~ study.getFullImage2Path, 'zoomCrop', 1140, 840) }}" alt="{{ study.detailSubtitle }}" loading="lazy" />
  77.                 </div>
  78.                 <div class="md:col-6 text-lg cms-area">
  79.                     {# THE DETAIL #}
  80.                     {% if study.detailSubtitle %}
  81.                         {# <p class="text-sm mb-0 uppercase text-secondary"><strong>{{ allowInlineEditor(study, 'detailSubtitle')|raw }}</strong></p> #}
  82.                         <h2 class="text-3xl mt-0 mb-8">{{ allowInlineEditor(study, 'detailSubtitle')|raw }}</h2>
  83.                     {% endif %}
  84.                     {{ allowInlineEditor(study, 'detailContent')|raw }}
  85.                 </div>
  86.             </div>
  87.         </div>
  88.     </section>
  89. {% endif %}
  91. {% if study.challengesContent %}
  92.     <section class="bg-primary text-white py-16 mb-12">
  93.         <div class="container">
  94.             <div class="row">
  95.                 <div class="md:col-6 text-lg order-2 md:order-1 cms-area">
  96.                     {% if study.challengesSubtitle %}
  97.                         {# <p class="text-sm mb-0 text-white uppercase"><strong>The Challenges</strong></p> #}
  98.                         <h2 class="text-3xl mt-0 mb-8 text-white">{{ allowInlineEditor(study, 'challengesSubtitle')|raw }}</h2>
  99.                     {% endif %}
  100.                     {{ allowInlineEditor(study, 'challengesContent')|raw }}
  101.                 </div>
  102.                 <div class="md:col-6 order-1 md:order-2 mb-12 md:mb-0">
  103.                     <img class="max-w-full h-auto" src="{{ imageCache('/' ~ study.getFullImage3Path, 'zoomCrop', 1140, 840) }}" alt="{{ study.challengesSubtitle }}" loading="lazy" />
  104.                 </div>
  105.             </div>
  106.         </div>
  107.     </section>
  108. {% endif %}
  110. {% if study.solutionContent %}
  111.     <section class="mb-12">
  112.         <div class="container">
  113.             <div class="row">
  114.                 <div class="md:col-6 mb-6 md:mb-0">
  115.                     <img class="max-w-full h-auto" src="{{ imageCache('/' ~ study.getFullImage4Path, 'zoomCrop', 1140, 840) }}" alt="{{ study.solutionSubtitle }}" loading="lazy" />
  116.                 </div>
  117.                 <div class="md:col-6 text-lg cms-area">
  118.                     {% if study.solutionSubtitle %}
  119.                         {# <p class="text-sm mb-0 uppercase text-secondary"><strong>The Solution</strong></p> #}
  120.                         <h2 class="text-3xl mt-0 mb-8">{{ allowInlineEditor(study, 'solutionSubtitle')|raw }}</h2>
  121.                     {% endif %}
  122.                     {{ allowInlineEditor(study, 'solutionContent')|raw }}
  123.                 </div>
  124.             </div>
  125.         </div>
  126.     </section>
  127. {% endif %}
  129. {% if study.projectStartDate or study.projectDuration or study.projectBudget or study.projectLocation %}
  130.     <section class="bg-dark py-16 mb-12 text-white text-center">
  131.         <div class="container">
  132.             <div class="row">
  133.                 {% if study.projectStartDate %}
  134.                     <div class="md:col-3 sm:col-6 mb-12 md:mb-0">
  135.                         <i class="fa-solid fa-calendar-days text-green text-5xl mb-6"></i>
  136.                         <h5 class="uppercase text-white mb-0">{{ study.projectStartDate|date('M Y') }}</h5>
  137.                     </div>
  138.                 {% endif %}
  139.                 {% if study.projectDuration %}
  140.                     <div class="md:col-3 sm:col-6 mb-12 md:mb-0">
  141.                         <i class="fa-solid fa-clock text-green text-5xl mb-6"></i>
  142.                         <h5 class="uppercase text-white mb-0">{{ allowInlineEditor(study, 'projectDuration')|raw }}</h5>
  143.                     </div>
  144.                 {% endif %}
  145.                 {% if study.projectBudget %}
  146.                     <div class="md:col-3 sm:col-6 mb-12 sm:mb-0">
  147.                         <i class="fa-solid fa-coin text-green text-5xl mb-6"></i>
  148.                         <h5 class="uppercase text-white mb-0">{{ allowInlineEditor(study, 'projectBudget')|raw }}</h5>
  149.                     </div>
  150.                 {% endif %}
  151.                 {% if study.projectLocation %}
  152.                     <div class="md:col-3 sm:col-6">
  153.                         <i class="fa-solid fa-location-crosshairs text-green text-5xl mb-6"></i>
  154.                         <h5 class="uppercase text-white mb-0">{{ allowInlineEditor(study, 'projectLocation')|raw }}</h5>
  155.                     </div>
  156.                 {% endif %}
  157.             </div>
  158.         </div>
  159.     </section>
  160. {% endif %}
  162. {% if study.gallery and study.gallery.galleryImages|length > 0 %}
  163.     <div class="container mb-4">
  164.         <div class="row">
  165.             <div class="col-12 text-center">
  166.                 <h3 class="text-green mb-8 mt-0">Project Gallery</h3>
  167.                 {% if study.gallery.content %}
  168.                     <div class="mb-12">
  169.                         {{ allowInlineEditor(study.gallery, 'content')|raw }}
  170.                     </div>
  171.                 {% endif %}
  172.             </div>
  173.         </div>
  174.         <div class="row">
  175.             {% for image in study.gallery.galleryImages %}
  176.                 {% if image.file %}
  177.                     <div class="lg:col-6 mb-8">
  178.                         <video class="w-full h-auto" src="{{ image.getFileUrl() }}" controls></video>
  179.                     </div>
  180.                 {% else %}
  181.                 <div class="lg:col-6 mb-8">
  182.                     <img class="max-w-full h-auto" src="{{ imageCache('/'~ image.getFullImagePath, 'zoomCrop', 1140, 640) }}" alt="{{ image.title }}" loading="lazy" />
  183.                 </div>
  184.                 {% endif %}
  185.             {% endfor %}
  186.         </div>
  187.     </div>
  188. {% endif %}
  190. {% if study.testimonial and study.testimonial.active and not study.testimonial.deleted %}
  191.     <section class="mb-12">
  192.         <div class="container">
  193.             <div class="row">
  194.                 <div class="col-12">
  195.                     <div class="w-full flex flex-col justify-center items-center text-center">
  196.                         <h3 class="mb-8 mt-0 text-green">What the Client Said</h3>
  197.                         {% if study.testimonial.image %}
  198.                             <img class="h-auto max-h-[60px] w-auto max-w-full mb-3" src="{{ imageCache('/'~ study.testimonial.getFullImagePath, 'cropResize', 150, 150) }}" height="60" alt="{{ study.testimonial.clientName }}" loading="lazy" />
  199.                         {% endif %}
  200.                             <a href="{{ generatePath(app.request, study.testimonial.linkedPageId, { 'testimonial_slug': study.testimonial.slug }) }}" class="text-dark">
  201.                             <p class="text-xl font-light mb-2">{{ allowInlineEditor(study.testimonial, 'content')|nl2br }}</p>
  202.                             <p class="text-sm font-bold mb-0 text-secondary">{{ allowInlineEditor(study.testimonial, 'attestant')|raw }}</p>
  203.                             <p class="text-sm text-secondary">{{ allowInlineEditor(study.testimonial, 'jobTitle')|raw }}</p>
  204.                         </a>
  205.                     </div>
  206.                 </div>
  207.             </div>
  208.         </div>
  209.     </section>
  210. {% endif %}
  212. <div class="bg-secondary mb-12 relative text-white py-7">
  213.     <div class="container">
  214.         {% if prev or next %}
  215.             <div class="row team-pagination">
  216.                 {% if prev %}
  217.                     <div class="{% if next %}col-6{% else %}col-12{% endif %}">
  218.                         <a class="prev" href="{{ generatePath( app.request, prev.linkedPageId, {'caseStudy_slug' : prev.slug } ) }}">
  219.                             Previous <span class="hidden md:inline-block">Case Study</span>
  220.                         </a>
  221.                     </div>
  222.                 {% endif %}
  224.                 {% if next %}
  225.                     <div class="{% if prev %}col-6{% else %}col-12{% endif %} text-right">
  226.                         <a class="next" href="{{ generatePath( app.request, next.linkedPageId, {'caseStudy_slug' : next.slug } ) }}">
  227.                             Next <span class="hidden md:inline-block">Case Study</span>
  228.                         </a>
  229.                     </div>
  230.                 {% endif %}
  231.             </div>
  232.         {% endif %}
  233.     </div>
  234. </div>