app/template/default/Special/detail.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set breadcrumbs = [{'name': 'SPECIAL', 'route': 'special'}, {'name': post.title }] %}
  4. {% set share_url =  app.request.getUri|url_encode()  %}
  5. {% set share_title = post.title|raw|nl2br %}
  6. {% if post.special_kv_pc.url is not empty %}
  7.     {% set share_media = asset(post.special_kv_pc.url,'save_image') %}
  8. {% else %}
  9.     {% set share_media = asset('assets/img/top-page/FV.webp') %}
  10. {% endif %}
  12. {% block stylesheet %}
  13.     <link rel="stylesheet" href="/html/template/default/assets/css/content.css">
  14.     <link rel="stylesheet" href="/html/template/default/assets/css/frame03.css">
  15. {% endblock %}
  17. {% block javascript %}
  18.     <script>
  19.         $(function () {
  20.             $('#js-button-copy').click(function () {
  21.                 const url = $(this).data('url');
  22.                 navigator.clipboard.writeText(url);
  23.             });
  24.         });
  25.     </script>
  26.     <script>
  27.         $(function(){
  28.             $('.slide-img:not(".slide-img-slow")').slick({
  29.                 autoplay: true,
  30.                 autoplaySpeed: 3000,
  31.                 arrows: false,
  32.                 dots: false,
  33.                 infinite: true,
  34.                 speed: 800,
  35.                 slidesToShow: 1,
  36.                 variableWidth: true,
  37.                 centerMode: true,
  38.                 responsive: [
  39.                     {
  40.                         breakpoint: 750,
  41.                         settings: {
  42.                         variableWidth: true,
  43.                         centerMode: true,
  44.                         }
  45.                     }
  46.                 ]
  47.             });
  48.             $('.slide-img-slow').not('.slick-initialized').slick({
  49.                 autoplay: true,
  50.                 autoplaySpeed: 0,
  51.                 arrows: false,
  52.                 dots: false,
  53.                 speed: 18000,
  54.                 infinite: true,
  55.                 cssEase: 'linear',
  56.                 slidesToShow: 1,
  57.                 variableWidth: true,
  58.                 centerMode: true,
  59.                 draggable: false,
  60.                 touchMove: false,
  61.                 pauseOnFocus: false,
  62.                 pauseOnHover: false,
  63.             });
  64.             $('.slide-img-slow').css('opacity',1);
  65.             $('.slide-img-slow').find('img').each(function(){
  66.                 var ctrl = $(this);
  67.                 console.log(ctrl);
  68.                 ctrl.attr('src',ctrl.data('src'));
  69.             });
  70.             });
  71.     </script>
  72. {% endblock javascript %}
  74. {% block main %}
  75.     <section>
  76.         <div class="w-full">
  77.             <div class="flex flex-col items-center w-full mb-6">
  78.                 <img src="{{ post.special_kv_pc.url }}" class="object-cover h-[640px] w-full overflow-hidden md:h-[450px]" alt="サムネイル">
  79.                 <div class="max-w-[880px] w-full lg:w-[86.6vw]  md:mx-6 bg-black bg-opacity-80 text-white px-12 py-14 md:py-8 md:px-6 flex-col flex mt-[-24px] relative">
  80.                     <time datetime="{{ post.post_date|date('Y-m-d') }}" class="text-end text-[#B0B0B0] text-sm md:text-xs absolute top-[4px] right-[8px] "><span>{{ post.post_date|date('Y.m.d') }}</span></time>
  81.                     <div class="flex items-center border border-white w-fit mb-3 text-sm sm:text-xs px-3 py-[2px] text-white">
  82.                         {% for category in post.categories %}
  83.                             <a href="{{ url('special_posts', { category: category.term_id }) }}"><span class="text-white">{{ category.name }}</span></a>
  84.                         {% endfor %}
  85.                     </div>
  86.                     <h1 class="text-3xl md:text-xl leading-loose tracking-[5px]">{{ post.title }}</h1>
  87.                 </div>
  88.             </div>
  89.             <div class="col-span-2 md:col-span-1 md:row-start-2 md:row-end-3">
  90.                 {{ include('Block/breadcrumb.twig') }}
  91.             </div>
  92.         </div>
  93.     </section>
  94.     <section id="page_special_detail" class="bg-essay px-6 pb-[7.5rem] md:pb-20 text-black">
  95.         <div class="section-cont text-[10px] tracking-wide leading-4">
  96.             {{ post.content|raw|nl2br }}
  97.         </div>
  98.     </section>
  99.     {# <section class="py-20 bg-sub-beige-pale text-center text-black text-sm leading-normal">
  100.         <div class="w-[20rem] mx-auto">
  101.             <h2 class="text-lg font-medium">関連商品</h2>
  102.             <div class="grid mt-6 gap-6">
  103.                 <hgroup class="font-light font-notoserif">
  104.                     <h3 class=" text-[2rem] tracking-[0.2em]">warm</h3>
  105.                     <p class="tracking-wider">ウォーム</p>
  106.                 </hgroup>
  107.                 <a href="#" class="grid place-items-center w-64 border border-black rounded-[0.18rem] tracking-wider mx-auto h-11 mt-4 hover">詳しくはこちら</a>
  109.                 <div class="aspect-square row-start-1 row-end-2">
  110.                     <img src="{{ asset('assets/img/top/img_item01_01.jpg') }}" class="size-full object-cover">
  111.                 </div>
  112.             </div>
  113.         </div>
  114.     </section> #}
  115.     <section class="px-6 py-[7.5rem] md:py-20">
  116.         <div class="">
  117.             <h2 class="font-medium leading-normal text-center text-base">記事をシェアする</h2>
  118.             <div class="flex justify-center items-center mt-6 gap-6">
  119.                 <a href="https://social-plugins.line.me/lineit/share?url={{share_url}}%0a{{share_title}}" target="_blank" class="hover">
  121.                     <img src="{{asset('assets/icon/LINE_LOGO.svg')}}" alt="LINEのロゴ" class="w-[2.1rem]">
  122.                 </a>
  123.                 <a href="https://twitter.com/intent/tweet?url={{share_url}}&text={{share_title}}" rel="nofollow noopener" target="_blank" class="hover">
  124.                     <img src="{{asset('assets/icon/X_LOGO.svg')}}" alt="Xのロゴ" class="w-7">
  125.                 </a>
  126.                 <a href="https://www.facebook.com/sharer/sharer.php?u={{share_url}}" rel="nofollow noopener" target="_blank" class="hover">
  127.                     <img src="{{asset('assets/icon/FB_LOGO.svg')}}" alt="FaceBookのロゴ" class="w-[2.1rem]">
  128.                 </a>
  129.                 <a href="http://pinterest.com/pin/create/button/?url={{share_url}}&media={{share_media}}&description={{share_title}}" rel="nofollow" target="_blank" class="hover">
  130.                     <img src="{{asset('assets/icon/Pinterest_LOGO.svg')}}" alt="Pinterestのロゴ" class="w-[2.1rem]">
  131.                 </a>
  132.                 <button id="js-button-copy" data-url="{{app.request.getUri}}" class="relative hover">
  133.                     <img src="{{asset('assets/icon/share.svg')}}" alt="コピー" class="w-[2.1rem]">
  134.                 </button>
  135.             </div>
  136.             <a href="{{ url('special_posts') }}" class="md:w-full w-80 border grid place-items-center h-11 mx-auto mt-20 text-sm rounded-[0.18rem] hover">SPECIAL一覧に戻る</a>
  137.         </div>
  138.     </section>
  139. {% endblock %}