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">
  79.                     <p class="text-sm mb-0 uppercase text-secondary"><strong>The Detail</strong></p>
  80.                     {% if study.detailSubtitle %}
  81.                         <h2 class="text-3xl mt-0 mb-8">{{ allowInlineEditor(study, 'detailSubtitle')|raw }}</h2>
  82.                     {% endif %}
  83.                     {{ allowInlineEditor(study, 'detailContent')|raw }}
  84.                 </div>
  85.             </div>
  86.         </div>
  87.     </section>
  88. {% endif %}
  90. {% if study.challengesContent %}
  91.     <section class="bg-primary text-white py-16 mb-12">
  92.         <div class="container">
  93.             <div class="row">
  94.                 <div class="md:col-6 text-lg order-2 md:order-1">
  95.                     <p class="text-sm mb-0 text-white uppercase"><strong>The Challenges</strong></p>
  96.                     {% if study.challengesSubtitle %}
  97.                         <h2 class="text-3xl mt-0 mb-8 text-white">{{ allowInlineEditor(study, 'challengesSubtitle')|raw }}</h2>
  98.                     {% endif %}
  99.                     {{ allowInlineEditor(study, 'challengesContent')|raw }}
  100.                 </div>
  101.                 <div class="md:col-6 order-1 md:order-2 mb-12 md:mb-0">
  102.                     <img class="max-w-full h-auto" src="{{ imageCache('/' ~ study.getFullImage3Path, 'zoomCrop', 1140, 840) }}" alt="{{ study.challengesSubtitle }}" loading="lazy" />
  103.                 </div>
  104.             </div>
  105.         </div>
  106.     </section>
  107. {% endif %}
  109. {% if study.solutionContent %}
  110.     <section class="mb-12">
  111.         <div class="container">
  112.             <div class="row">
  113.                 <div class="md:col-6 mb-6 md:mb-0">
  114.                     <img class="max-w-full h-auto" src="{{ imageCache('/' ~ study.getFullImage4Path, 'zoomCrop', 1140, 840) }}" alt="{{ study.solutionSubtitle }}" loading="lazy" />
  115.                 </div>
  116.                 <div class="md:col-6 text-lg">
  117.                     <p class="text-sm mb-0 uppercase text-secondary"><strong>The Solution</strong></p>
  118.                     {% if study.solutionSubtitle %}
  119.                         <h2 class="text-3xl mt-0 mb-8">{{ allowInlineEditor(study, 'solutionSubtitle')|raw }}</h2>
  120.                     {% endif %}
  121.                     {{ allowInlineEditor(study, 'solutionContent')|raw }}
  122.                 </div>
  123.             </div>
  124.         </div>
  125.     </section>
  126. {% endif %}
  128. {% if study.projectStartDate or study.projectDuration or study.projectBudget or study.projectLocation %}
  129.     <section class="bg-dark py-16 mb-12 text-white text-center">
  130.         <div class="container">
  131.             <div class="row">
  132.                 {% if study.projectStartDate %}
  133.                     <div class="md:col-3 sm:col-6 mb-12 md:mb-0">
  134.                         <i class="fa-solid fa-calendar-days text-green text-5xl mb-6"></i>
  135.                         <h5 class="uppercase text-white mb-0">{{ study.projectStartDate|date('M Y') }}</h5>
  136.                     </div>
  137.                 {% endif %}
  138.                 {% if study.projectDuration %}
  139.                     <div class="md:col-3 sm:col-6 mb-12 md:mb-0">
  140.                         <i class="fa-solid fa-clock text-green text-5xl mb-6"></i>
  141.                         <h5 class="uppercase text-white mb-0">{{ allowInlineEditor(study, 'projectDuration')|raw }}</h5>
  142.                     </div>
  143.                 {% endif %}
  144.                 {% if study.projectBudget %}
  145.                     <div class="md:col-3 sm:col-6 mb-12 sm:mb-0">
  146.                         <i class="fa-solid fa-coin text-green text-5xl mb-6"></i>
  147.                         <h5 class="uppercase text-white mb-0">{{ allowInlineEditor(study, 'projectBudget')|raw }}</h5>
  148.                     </div>
  149.                 {% endif %}
  150.                 {% if study.projectLocation %}
  151.                     <div class="md:col-3 sm:col-6">
  152.                         <i class="fa-solid fa-location-crosshairs text-green text-5xl mb-6"></i>
  153.                         <h5 class="uppercase text-white mb-0">{{ allowInlineEditor(study, 'projectLocation')|raw }}</h5>
  154.                     </div>
  155.                 {% endif %}
  156.             </div>
  157.         </div>
  158.     </section>
  159. {% endif %}
  161. {% if study.gallery and study.gallery.galleryImages|length > 0 %}
  162.     <div class="container mb-4">
  163.         <div class="row">
  164.             <div class="col-12 text-center">
  165.                 <h3 class="text-green mb-8 mt-0">Project Gallery</h3>
  166.                 {% if study.gallery.content %}
  167.                     <div class="mb-12">
  168.                         {{ allowInlineEditor(study.gallery, 'content')|raw }}
  169.                     </div>
  170.                 {% endif %}
  171.             </div>
  172.         </div>
  173.         <div class="row">
  174.             {% for image in study.gallery.galleryImages %}
  175.                 {% if image.file %}
  176.                     <div class="lg:col-6 mb-8">
  177.                         <video class="w-full h-auto" src="{{ image.getFileUrl() }}" controls></video>
  178.                     </div>
  179.                 {% else %}
  180.                 <div class="lg:col-6 mb-8">
  181.                     <img class="max-w-full h-auto" src="{{ imageCache('/'~ image.getFullImagePath, 'zoomCrop', 1140, 640) }}" alt="{{ image.title }}" loading="lazy" />
  182.                 </div>
  183.                 {% endif %}
  184.             {% endfor %}
  185.         </div>
  186.     </div>
  187. {% endif %}
  189. {% if study.testimonial and study.testimonial.active and not study.testimonial.deleted %}
  190.     <section class="mb-12">
  191.         <div class="container">
  192.             <div class="row">
  193.                 <div class="col-12">
  194.                     <div class="w-full flex flex-col justify-center items-center text-center">
  195.                         <h3 class="mb-8 mt-0 text-green">What the Client Said</h3>
  196.                         <img class="h-auto max-h-[60px] w-auto max-w-full mb-3" src="{{ asset('/'~ study.getFullImagePath) }}" height="60" alt="{{ study.clientName }}" loading="lazy" />
  197.                         <p class="text-xl font-light mb-2">{{ allowInlineEditor(study.testimonial, 'content')|raw }}</p>
  198.                         <p class="text-sm font-bold mb-0 text-secondary">{{ allowInlineEditor(study.testimonial, 'attestant')|raw }}</p>
  199.                         <p class="text-sm text-secondary">{{ allowInlineEditor(study.testimonial, 'jobTitle')|raw }}</p>
  200.                     </div>
  201.                 </div>
  202.             </div>
  203.         </div>
  204.     </section>
  205. {% endif %}
  207. <div class="bg-secondary mb-12 relative text-white py-7">
  208.     <div class="container">
  209.         {% if prev or next %}
  210.             <div class="row team-pagination">
  211.                 {% if prev %}
  212.                     <div class="{% if next %}col-6{% else %}col-12{% endif %}">
  213.                         <a class="prev" href="{{ generatePath( app.request, prev.linkedPageId, {'caseStudy_slug' : prev.slug } ) }}">
  214.                             Previous <span class="hidden md:inline-block">Case Study</span>
  215.                         </a>
  216.                     </div>
  217.                 {% endif %}
  219.                 {% if next %}
  220.                     <div class="{% if prev %}col-6{% else %}col-12{% endif %} text-right">
  221.                         <a class="next" href="{{ generatePath( app.request, next.linkedPageId, {'caseStudy_slug' : next.slug } ) }}">
  222.                             Next <span class="hidden md:inline-block">Case Study</span>
  223.                         </a>
  224.                     </div>
  225.                 {% endif %}
  226.             </div>
  227.         {% endif %}
  228.     </div>
  229. </div>