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

Open in your IDE?
  1. {% extends 'fullwidth_frame.twig' %}
  2. {% block javascript %}{% endblock %}
  3. {% block main %}
  4. <div class="news_detail_head">
  5.     <div class="home_title__inner home_title__detail_inner">
  6.         <h2 class="home_ja_title">
  7.             <span class="news_text__top">
  8.                 <span class="date">{{ blog.release_date|date('Y.m.d')}}</span>
  9.                 {% if blog.getBlogCategories is empty %}
  10.                     <span class="list_category_link">[お知らせ]</span>
  11.                 {% else %}
  12.                     {% for category in blog.getBlogCategories %}
  13.                      <span class="list_category_link">
  14.                      [{{ category.getCategory.getName|length > 15 ? category.getCategory.getName|striptags|replace({('&nbsp;'):' '})|slice(0, 15)|raw ~ '...' : category.getCategory.getName|raw }}]
  15.                      </span>
  16.                     {% endfor %}
  17.                 {% endif %}
  18.             </span><!--/.news_text__top-->
  19.             {{ blog.title }}
  20.         </h2>
  21.     </div><!--/.home_title__inner-->
  22. </div><!--/.news_detail_head-->
  23. <div class="news_container">
  24.     <div class="news_body_content">
  25.         {% if blog.getMainListImage %}
  26.             <div class="news_body_thumb">
  27.                 <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class="main_image_blog">
  28.             </div><!--/.news_body_thumb-->
  29.         {% endif %}
  30.         <div class="news_body_content__inner">
  31.         {{ blog.body|raw }}
  32.         </div><!--/.news_body_content__inner-->
  33.     </div><!--/.news_body_content-->
  34. </div><!--/.news_container-->
  35. <div class="news_detail_foot">
  36.     <div class="news_detail_foot__inner">
  37.         <div class="news_detail_foot__inner__link">
  38.             <a class="base_link_brn" href="{{ url('homepage') }}news/">
  39.                 <span>お知らせ一覧</span>
  40.                 <span>お知らせ一覧</span>
  41.             </a>
  42.         </div><!--/.sp_center_link_btn-->
  43.         {# SNSシェア #}
  44.         {% set page_url = url('homepage') ~ '/news/' ~ blog.id %}
  45.         {% set image_url = 'https://online.ikus.furniture' ~ asset(blog.getMainListImage|no_image_product, 'save_image') %}
  46.         <ul class="cart_btn_bottom_sns">
  47.             <li>
  48.                 <a class="pinterest" href="https://www.pinterest.com/pin/create/button/?url={{ page_url|url_encode }}&media={{ image_url }}" target="_blank">
  49.                     <img src="{{ asset('assets/img/common/icon_pinterest.svg') }}">
  50.                 </a>
  51.             </li>
  52.             <li>
  53.                 <a class="line" href="https://social-plugins.line.me/lineit/share?url={{ page_url|url_encode }}" target="_blank">
  54.                     <img src="{{ asset('assets/img/common/icon_line.svg') }}">
  55.                 </a>
  56.             </li>
  57.             <li>
  58.                 <a class="twitter" href="https://twitter.com/intent/tweet?url={{ page_url|url_encode }}" target="_blank">
  59.                     <img src="{{ asset('assets/img/common/icon_twitter.svg') }}">
  60.                 </a>
  61.             </li>
  62.             <li>
  63.                 <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ page_url|url_encode }}" target="_blank">
  64.                     <img src="{{ asset('assets/img/common/icon_facebook.svg') }}">
  65.                 </a>
  66.             </li>
  67.         </ul>
  68.     </div><!--/.news_detail_foot__inner-->
  69. </div><!--/.news_detail_foot-->
  70. {% endblock %}
  71. {#
  72. {% block stylesheet %}
  73. <style>
  74. .pluginCMBblog .post_meta {
  75.     display: flex;
  76.     list-style: none;
  77.     margin: 0;
  78.     padding: 0;
  79.     width: 95%;
  80.     margin: 0 auto;
  81. }
  82. .pluginCMBblog .blog_category{
  83.     margin: 0;
  84.     padding: 0;
  85. }
  86. .pluginCMBblog .blog_category{
  87.     display: initial;
  88. }
  89. .pluginCMBblog .blog_category li{
  90.     display: initial;
  91.     border-right: 1px solid #ddd;
  92. }
  93. .pluginCMBblog .blog_category li:last-child {
  94.     border-right: none;
  95. }
  96. .pluginCMBblog .post_meta .post_meta_list{
  97.     padding-right: 2rem;
  98. }
  99. .pluginCMBblog .list_category_link{
  100.     color: #337ab7;
  101.     padding: 0 0.5rem;
  102. }
  103. .pluginCMBblog .figure__main_image {
  104.     padding: 0;
  105.     margin: 3rem 0;
  106.     display: grid;
  107.     justify-content: stretch;
  108.     align-items: flex-end;
  109. }
  110. .pluginCMBblog .main_image_blog,
  111. .pluginCMBblog figcaption {
  112.     padding: 0;
  113.     grid-column: 1/2;
  114.     grid-row: 1/2;
  115. }
  116. .pluginCMBblog figcaption {
  117.     text-align: center;
  118.     padding: 0.4rem 2rem;
  119.     font-size: 1.3rem;
  120.     background-color: rgba(0,0,0,.7);
  121.     color: #fff;
  122.     overflow: hidden;
  123.     white-space: normal;
  124.     word-wrap: break-word;
  125. }
  126. .pluginCMBblog .post_meta_list.time{
  127.     width: 15rem;
  128.     display: inline-table;
  129. }
  130. .pluginCMBblog .tag_dl{
  131.     display: flex;
  132. }
  133. .pluginCMBblog .blog_detail .blog_Title{
  134.     word-break: break-word;
  135.     margin-bottom: 20px;
  136. }
  137. .pluginCMBblog .cm_blog_main_image img{
  138.     max-width: 100%;
  139.     width: 100%;
  140. }
  141. ul.tag-ul {
  142.     padding-left:8px;
  143.     list-style: none;
  144.     display: flex;
  145.     flex-wrap: wrap;
  146. }
  147. ul.tag-ul > li {
  148.     margin: 0.4em;
  149.     padding: 0 0.8em;
  150.     border: 1px solid #ccc;
  151.     border-radius: 5px;
  152. }
  153. ul.tag-ul > li > a:hover {
  154.     text-decoration: none;
  155. }
  156. h3.tag-header {
  157.   padding: 1rem 2rem;
  158.   border-left: 4px solid #000;
  159. }
  160. .w-100 {
  161.     width: 100%
  162. }
  163. .side-bar > div {
  164.     width: 90%;
  165.     margin:40px auto;
  166. }
  167. h5.tag-header {
  168.   padding: 1rem 2rem;
  169.   border-left: 4px solid #000;
  170. }
  171. .month-archive a {
  172.     text-decoration: underline;
  173.     display: block;
  174.     padding: 3px 27px;
  175. }
  176. .ec-productRole__description > p img {
  177.     width: calc(var(--width));
  178.     margin-bottom: 15px;
  179. }
  180. .archive-link-div {
  181.     max-height: 600px;
  182.     overflow-y: scroll;
  183. }
  184. .archive-link-div::-webkit-scrollbar {
  185.     display: none;
  186. }
  187. @media screen and (max-width: 768px){
  188.     .pluginCMBblog .post_meta {
  189.         display: block;
  190.     }
  191.     .pluginCMBblog .post_meta_list.time{
  192.         width: 100%;
  193.     }
  194.     .side-bar > div {
  195.         width: 100%
  196.     }
  197. }
  198. @media only screen and (min-width: 768px) {
  199.     .ec-shelfGrid .ec-shelfGrid__item-image {
  200.         height: 150px;
  201.     }
  202.     h3.tag-header {
  203.         margin: 63px 16px 20px;
  204.     }
  205.     .side-bar {
  206.         width: 280px;
  207.         background-color: #f6f6f6;
  208.     }
  209.     .ec-role {
  210.         display: flex;
  211.         justify-content: flex-start
  212.     }
  213.     .mt-65 {
  214.         margin-top: 65px!important;
  215.     }
  216. }
  217. </style>
  218. {% endblock %}
  219. {% block main %}
  220. <div class="ec-role blog_detail pluginCMBblog">
  221.     <div class="w-100">
  222.         <div class="ec-pageHeader">
  223.             <h1 class="blog_Title">{{ blog.title }}</h1>
  224.         </div>
  225.         <ul class="post_meta ">
  226.             <li class="post_meta_list time"><i class="fas fa-calendar-alt"></i>&nbsp;{{blog.release_date|date('Y-m-d')}}</li>
  227.             <li class="post_meta_list">
  228.                 <dl class="tag_dl">
  229.                     <dt><i class="fas fa-tags"></i></dt>
  230.                     <dd>
  231.                         <ul class="blog_category">
  232.                             {% for category in blog.getBlogCategories %}
  233.                             <li class="{{category.getCategory.class}}">
  234.                                 <a href="{{ url('cm_blog_pro_page_list', {categories: [category.getCategory().getId()]}) }}" class="list_category_link">
  235.                                 {{ category.getCategory.getName|raw }}
  236.                                 </a>
  237.                             </li>
  238.                             {% endfor %}
  239.                         </ul>
  240.                     </dd>
  241.                 </dl>
  242.             </li>
  243.         </ul>
  244.         <div class="ec-off1Grid">
  245.             <div class="ec-off1Grid__cell">
  246.                 <div class="cm_blog_main_image">
  247.                     <figure class="figure__main_image">
  248.                         {% if blog.getMainListImage %}
  249.                         <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class="main_image_blog"></img>
  250.                         {% else %}
  251.                         <img class='item_blog_image'></img>
  252.                         {% endif %}
  253.                         {% if blog.getFigCaption %}
  254.                         <figcaption>{{ blog.getFigCaption }}</figcaption>
  255.                         {% endif %}
  256.                     </figure>
  257.                 </div>
  258.                     <div class="ec-grid2__cell">
  259.                     <div class="ec-productRole__profile">
  260.                         <div class="ec-productRole__description">{{ blog.body|raw }}
  261.                         </div>
  262.                     </div>
  263.                 </div>
  264.             </div>
  265.         </div>
  266.         {% if tags|length > 0 %}
  267.             <h3 class="tag-header">{{ 'plg.CMBlogPro.blog.tag'|trans }}</h3>
  268.             <ul class="tag-ul">
  269.                 {% for tag in tags %}
  270.                     <li>
  271.                         <a href="{{ url('cm_blog_pro_page_list', {tag: tag|trim }) }}">{{ tag |trim }}</a>
  272.                     </li>
  273.                 {% endfor %}
  274.             </ul>
  275.         {% endif %}
  276.         <h3 class="tag-header">{{ 'plg.CMBlogPro.blog.related_product'|trans }}</h3>
  277.         <div class="ec-shelfRole">
  278.             <ul class="ec-shelfGrid">
  279.                 {% for product in blog.getBlogProduct %}
  280.                     <li class="ec-shelfGrid__item">
  281.                         <a href="{{ url('product_detail', {'id': product.getProduct.id}) }}">
  282.                             <p class="ec-shelfGrid__item-image">
  283.                                 <img src="{{ asset(product.getProduct.main_list_image|no_image_product, 'save_image') }}">
  284.                             </p>
  285.                             <p>{{ product.getProduct.name }}</p>
  286.                             <p class="price02-default">
  287.                                 {% if product.getProduct.hasProductClass %}
  288.                                     {% if product.getProduct.getPrice02Min == product.getProduct.getPrice02Max %}
  289.                                         {{ product.getProduct.getPrice02IncTaxMin|price }}
  290.                                     {% else %}
  291.                                         {{ product.getProduct.getPrice02IncTaxMin|price }} ~ {{ product.getProduct.getPrice02IncTaxMax|price }}
  292.                                     {% endif %}
  293.                                 {% else %}
  294.                                     {{ product.getProduct.getPrice02IncTaxMin|price }}
  295.                                 {% endif %}
  296.                             </p>
  297.                         </a>
  298.                     </li>
  299.                 {% endfor %}
  300.             </ul>
  301.         </div>
  302.     </div>
  303.     <div class="side-bar">
  304.         <div class="mt-65 month-archive">
  305.             <h5 class="tag-header">{{ 'plg.CMBlogPro.blog.month_archive'|trans }}</h5>
  306.             <div class="archive-link-div">
  307.                 {% for key, month in monthArr %}
  308.                     <a href="{{ url('cm_blog_pro_page_list', {date: key}) }}">{{ month }}</a>
  309.                 {% endfor %}
  310.             </div>
  311.         </div>
  312.     </div>
  313. </div>
  314. {% endblock %}
  315. #}