Menu.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
  2. <f:if condition="{menu}">
  3. <f:switch expression="{layout}">
  4. <f:case value="1">
  5. <f:render section="MenuCategories"
  6. arguments="{menu: menu, files: files, data: data}"/>
  7. </f:case>
  8. <f:defaultCase>
  9. <f:render section="MenuDefault"
  10. arguments="{menu: menu, files: files, data: data}"/>
  11. </f:defaultCase>
  12. </f:switch>
  13. </f:if>
  14. <f:section name="MenuDefault">
  15. <div class="row">
  16. <f:for each="{menu}" as="page">
  17. <a href="{page.link}"
  18. class="col"
  19. title="{page.title}"
  20. {f:if(condition: page.target, then: ' target="{page.target}"')}
  21. >
  22. <div class="col-wrapper">
  23. <div class="contentwrapper">
  24. <div class="row">
  25. <div class="col teasertext">
  26. <p class="text">{page.title}</p>
  27. <p class="category big">{page.data.subtitle}</p>
  28. </div>
  29. </div>
  30. </div>
  31. <f:if condition="{page.files -> f:count()}">
  32. <f:then>
  33. <picture>
  34. <source media="(min-width: 1200px)"
  35. srcset="{f:uri.image(image: page.files.0, maxWidth: 800, cropVariant: 'desktop')}"/>
  36. <source media="(max-width: 1200px)"
  37. srcset="{f:uri.image(image: page.files.0, maxWidth: 370, cropVariant: 'tablet')}"/>
  38. <source media="(max-width: 750px)"
  39. srcset="{f:uri.image(image: page.files.0, maxWidth: 720, cropVariant: 'mobile')}"/>
  40. <f:image image="{page.files.0}" maxWidth="800" cropVariant="desktop" class="img-responsive hero"/>
  41. </picture>
  42. </f:then>
  43. <f:else>
  44. <f:comment><!-- @TODO: default image --></f:comment>
  45. </f:else>
  46. </f:if>
  47. </div>
  48. </a>
  49. </f:for>
  50. </div>
  51. </f:section>
  52. <f:section name="MenuCategories">
  53. <section class="bluredtitle bluebg contact">
  54. <div class="blurtitle-inner">
  55. <div class="blur"></div>
  56. <f:if condition="{files -> f:count()}">
  57. <picture>
  58. <source srcset="{f:uri.image(image: files.0, width: 992, cropVariant: 'mobile')}"
  59. media="(max-width: 992px)">
  60. <source srcset="{f:uri.image(image: files.0, width: 1200, cropVariant: 'tablet')}"
  61. media="(max-width: 1200px)">
  62. <source srcset="{f:uri.image(image: files.0, width: 1800, cropVariant: 'desktop')}"
  63. media="(min-width: 1200px)">
  64. <f:image image="{files.0}" width="1800" cropVariant="desktop"/>
  65. </picture>
  66. </f:if>
  67. </div>
  68. <div class="container intro">
  69. <div class="row">
  70. <div class="col-md-12 col-12">
  71. <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
  72. </div>
  73. </div>
  74. <div class="highlightbox contactfilter national">
  75. <div class="container contactfiltercontent">
  76. <div class="row">
  77. <div class="col-md-8 col-12">
  78. <f:if condition="{data.header}">
  79. <p class="h2">
  80. {data.header}
  81. </p>
  82. </f:if>
  83. <f:if condition="{data.subheader}">
  84. <p>{data.subheader}</p>
  85. </f:if>
  86. <ul class="nav nav-tabs nav-tabs-accordion" role="tablist">
  87. <f:for each="{menu}" as="page">
  88. <li class="nav-item" role="presentation">
  89. <a href="{page.link}"
  90. class="nav-link{f:if(condition: '{page.active} || {page.current}', then: ' active')}"
  91. title="{page.title}"
  92. {f:if(condition: page.target, then: ' target="{page.target}"')}
  93. >
  94. <span>{page.title}</span>
  95. </a>
  96. </li>
  97. </f:for>
  98. </ul>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </section>
  105. </f:section>
  106. </html>