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('F n, Y') }}",
  22. "location": {
  23. "@type": "Place"{% if study.projectLocation %},
  24. "name": "{{ study.projectLocation }}"{% endif %}
  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>