templates/modul/hizmetler.html.twig line 1

Open in your IDE?
  1. {% extends 'siteBase.html.twig' %}
  2. {% block dil %}{{ app.session.get('dil')['kisa'] }}{% endblock %} {# tr or en #}
  3. {% block title %}{{ sayfa.title }}{% endblock %}
  4. {% block keywords %}{{ sayfa.keywords }}{% endblock %}
  5. {% block description %}{{ sayfa.description }}{% endblock %}
  7. {% block title2 %}{{ sayfa.title }}{% endblock %}
  8. {% block description2 %}{{ sayfa.description }}{% endblock %}
  9. {% block image_alt %}{{ sayfa.title }}{% endblock %}
  10. {% block title3 %}{{ sayfa.title }}{% endblock %}
  11. {% block description3 %}{{ sayfa.description }}{% endblock %}
  12. {% block image %}{{ sayfa.dilgrup|site_bannerGetir|raw }}{% endblock %}
  13. {% block image2 %}{{ sayfa.dilgrup|site_bannerGetir|raw }}{% endblock %}
  14.  
  15.  
  16. {% block body %}
  17. {% include 'siteBase/breadcrumbs.html.twig' %}
  18.  
  19.   {#
  20. -- Sayfa Verileri : "icerikler" adında bir dizi döndürülüyor. Dizi elemanları : seourl, sayfabaşlığı, anahtarkelimeler, sayfaaçıklaması, adı, metin, resim, link
  21. -- Kategori Verileri : "kategoriler" adında bir dizi döndürülüyor. Dizi elemanları : adi, resim, link
  22. ** Eğer kategoriler dizisi boş değilse icerikler boş gelecektir. Eğer boş ise içerikler dönecektir.
  23. ** Resimleri çekerken sadece "ornek.jpg|imgOlustur(100,10,'cover')" filtresini kullanmalısın. Bu filtre şu özelliğe sahitir; "ornek.jpg|imgOlustur(yükseklik,radius,'cover/contain')"
  25. ----------------------------------------------------
  26. #}
  31. <!-- blog-post-area -->
  32. <section class="blog__post-area section-py-140">
  33.     <div class="container">
  34.         {% if sayfa.dilgrup==4 %}
  35.         <style>
  36.             /* Hex grid item */
  37.             .hex-item{
  38.                 position: relative;
  39.                 display: block;
  40.                 text-decoration: none;
  41.                 width: 100%;
  42.                 margin: 0 auto;
  43.             }
  45.             /* Outer hex shape */
  46.             .hex-thumb{
  47.                 position: relative;
  48.                 width: 100%;
  49.                 aspect-ratio: 1 / 0.92; /* altıgen oranı gibi */
  50.                 overflow: hidden;
  51.                 border-radius: 18px; /* köşeleri yumuşatır (clip-path varken çok etkisi yok ama hover'da güzel) */
  52.                 -webkit-clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  53.                 clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  54.                 box-shadow: 0 18px 40px rgba(0,0,0,.12);
  55.                 transform: translateZ(0);
  56.             }
  58.             /* Image inside hex */
  59.             .hex-thumb img{
  60.                 width: 100%;
  61.                 height: 100%;
  62.                 object-fit: cover;
  63.                 display: block;
  64.                 transform: scale(1.03);
  65.                 transition: transform .35s ease;
  66.             }
  68.             /* soft overlay for readability */
  69.             .hex-thumb::after{
  70.                 content:"";
  71.                 position:absolute;
  72.                 inset:0;
  74.                 pointer-events:none;
  75.             }
  77.             /* Center white hex label */
  78.             .hex-label{
  79.                 position: absolute;
  80.                 inset: 0;
  81.                 display: grid;
  82.                 place-items: center;
  83.                 pointer-events: none;
  84.             }
  86.             .hex-label-inner{
  87.                 width: 40%;
  88.                 aspect-ratio: 1 / 0.92;
  89.                 background: rgba(255,255,255,.96);
  90.                 -webkit-clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  91.                 clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  92.                 display: grid;
  93.                 place-items: center;
  94.                 box-shadow: 0 12px 26px rgba(0,0,0,.10);
  95.                 padding: 14px;
  96.             }
  98.             .hex-title{
  99.                 margin: 0;
  100.                 text-align: center;
  101.                 font-weight: 700;
  102.                 font-size: 16px;
  103.                 line-height: 1.15;
  104.                 color: #a57437;
  105.                 padding: 0 6px;
  106.             }
  108.             /* Hover */
  109.             .hex-item:hover .hex-thumb img{
  110.                 transform: scale(1.12);
  111.             }
  112.             .hex-item:hover .hex-thumb{
  113.                 box-shadow: 0 24px 60px rgba(0,0,0,.18);
  114.             }
  116.             /* Tight responsive spacing */
  117.             .hex-col{
  118.                 display:flex;
  119.                 justify-content:center;
  120.             }
  121.         </style>
  123.         <div class="row gutter-y-30 justify-content-center">
  124.             {% for k in icerikler %}
  125.                 <div class="col-lg-4 col-md-4 col-sm-6 hex-col">
  126.                     <a class="hex-item" href="{{ k.link|default('#') }}">
  127.                         <div class="hex-thumb">
  128.                             {# Resmi yine senin kuralına uygun çekiyorum: sadece imgOlustur #}
  129.                             {% if k.resim is defined and k.resim is not empty %}
  130.                                 {{ k.resim|imgOlustur(420,18,'cover')|raw }}
  131.                             {% endif %}
  133.                             <div class="hex-label">
  134.                                 <div class="hex-label-inner">
  135.                                     <h3 class="hex-title">
  136.                                         {{ k.adi|html_entity_decode|raw }}
  137.                                     </h3>
  138.                                 </div>
  139.                             </div>
  140.                         </div>
  141.                     </a>
  142.                 </div>
  143.             {% endfor %}
  144.         </div>
  145.         {% else %}
  146.         <div class="row gutter-y-30 justify-content-center">
  147.             {% for k in icerikler %}
  148.             <div class="col-lg-4 col-md-6">
  149.                 <div class="blog__post-item shine__animate-item">
  150.                     {% if k.resim is defined and k.resim is not empty %}
  151.                     <div class="blog__post-thumb blog__post-thumb-two">
  152.                         <a href="{{ k.link|default('#') }}" class="shine__animate-link">
  153.                             {{ k.resim|imgOlustur(300,10,'cover')|raw }}
  154.                         </a>
  155.                     </div>
  156.                     {% endif %}
  158.                     <div class="blog__post-content blog__post-content-two blog__post-content-four">
  159.                         <h2 class="post-title">
  160.                             <a href="{{ k.link|default('#') }}">{{ k.adi|html_entity_decode|raw }}</a>
  161.                         </h2>
  162.                         <p>{{ k.metin|html_entity_decode|striptags|slice(0,100)|raw }}...</p>
  163.                     </div>
  164.                 </div>
  165.             </div>
  166.             {% endfor %}
  168.         </div>
  169.         {% endif %}
  170.     </div>
  171. </section>
  173.                     
  174.                     {% endblock %}
  175. {% block javascripts %}{% endblock %}