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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}{% endblock %}
  5. {% block stylesheet %}
  6. <style>
  7. .pluginCMBblog .post_meta {
  8.     display: flex;
  9.     list-style: none;
  10.     margin: 0;
  11.     padding: 0;
  12.     width: 95%;
  13.     margin: 0 auto;
  14. }
  15. .pluginCMBblog .blog_category{
  16.     margin: 0;
  17.     padding: 0;
  18. }
  19. .pluginCMBblog .blog_category{
  20.     display: initial;
  21. }
  22. .pluginCMBblog .blog_category li{
  23.     display: initial;
  24.     border-right: 1px solid #ddd;
  25. }
  27. .pluginCMBblog .blog_category li:last-child {
  28.     border-right: none;
  29. }
  31. .pluginCMBblog .post_meta .post_meta_list{
  32.     padding-right: 2rem;
  33. }
  35. .pluginCMBblog .list_category_link{
  36.     color: #337ab7;
  37.     padding: 0 0.5rem;
  38. }
  39. .pluginCMBblog .figure__main_image {
  40.     padding: 0;
  41.     margin: 3rem 0;
  42.     display: grid;
  43.     justify-content: stretch;
  44.     align-items: flex-end;
  45. }
  46. .pluginCMBblog .main_image_blog,
  47. .pluginCMBblog figcaption {
  48.     padding: 0;
  49.     grid-column: 1/2;
  50.     grid-row: 1/2;
  51. }
  52. .pluginCMBblog figcaption {
  53.     text-align: center;
  54.     padding: 0.4rem 2rem;
  55.     font-size: 1.3rem;
  56.     background-color: rgba(0,0,0,.7);
  57.     color: #fff;
  58.     overflow: hidden;
  59.     white-space: normal;
  60.     word-wrap: break-word;
  61. }
  63. .pluginCMBblog .post_meta_list.time{
  64.     width: 15rem;
  65.     display: inline-table;
  66. }
  67. .pluginCMBblog .tag_dl{
  68.     display: flex;
  69. }
  71. .pluginCMBblog .blog_detail .blog_Title{
  72.     word-break: break-word;
  73.     margin-bottom: 20px;
  74. }
  75. .pluginCMBblog .cm_blog_main_image img{
  76.     max-width: 100%;
  77.     width: 100%;
  78. }
  79. ul.tag-ul {
  80.     padding-left:8px;
  81.     list-style: none;
  82.     display: flex;
  83.     flex-wrap: wrap;
  84. }
  85. ul.tag-ul > li {
  86.     margin: 0.4em;
  87.     padding: 0 0.8em;
  88.     border: 1px solid #ccc;
  89.     border-radius: 5px;
  90. }
  91. ul.tag-ul > li > a:hover {
  92.     text-decoration: none;
  93. }
  94. h3.tag-header {
  95.   padding: 1rem 2rem;
  96.   border-left: 4px solid #000;
  97. }
  98. .w-100 {
  99.     width: 100%
  100. }
  101. .side-bar > div {
  102.     width: 90%;
  103.     margin:40px auto;
  104. }
  105. h5.tag-header {
  106.   padding: 1rem 2rem;
  107.   border-left: 4px solid #000;
  108. }
  109. .month-archive a {
  110.     text-decoration: underline;
  111.     display: block;
  112.     padding: 3px 27px;
  113. }
  114. .ec-productRole__description > p img {
  115.     width: calc(var(--width));
  116.     margin-bottom: 15px;
  117. }
  118. .archive-link-div {
  119.     max-height: 600px;
  120.     overflow-y: scroll;
  121. }
  122. .archive-link-div::-webkit-scrollbar {
  123.     display: none;
  124. }
  125. @media screen and (max-width: 768px){
  126.     .pluginCMBblog .post_meta {
  127.         display: block;
  128.     }
  129.     
  130.     .pluginCMBblog .post_meta_list.time{
  131.         width: 100%;
  132.     }
  133.     .side-bar > div {
  134.         width: 100%
  135.     }
  136. }
  137. @media only screen and (min-width: 768px) {
  138.     .ec-shelfGrid .ec-shelfGrid__item-image {
  139.         height: 150px;
  140.     }
  141.     h3.tag-header {
  142.         margin: 63px 16px 20px;
  143.     }
  144.     .side-bar {
  145.         width: 280px;
  146.         background-color: #f6f6f6;
  147.     }
  148.     .ec-role {
  149.         display: flex;
  150.         justify-content: flex-start
  151.     }
  152.     .mt-65 {
  153.         margin-top: 65px!important;
  154.     }
  155. }
  156. </style>
  157. {% endblock %}
  159. {% block main %}
  161. <div class="ec-role blog_detail pluginCMBblog">
  162.     <div class="w-100">
  163.         <div class="ec-pageHeader">
  164.             <h1 class="blog_Title">{{ blog.title }}</h1>
  165.         </div>
  166.         <ul class="post_meta ">
  167.             <li class="post_meta_list time"><i class="fas fa-calendar-alt"></i>&nbsp;{{blog.release_date|date('Y-m-d')}}</li>
  168.             <li class="post_meta_list">
  169.                 <dl class="tag_dl">
  170.                     <dt><i class="fas fa-tags"></i></dt>
  171.                     <dd>
  172.                         <ul class="blog_category">
  173.                             {% for category in blog.getBlogCategories %}
  174.                             <li class="{{category.getCategory.class}}">
  175.                                 <a href="{{ url('cm_blog_pro_page_list', {categories: [category.getCategory().getId()]}) }}" class="list_category_link">
  176.                                 {{ category.getCategory.getName|raw }}
  177.                                 </a>
  178.                             </li>
  179.                             {% endfor %}        
  180.                         </ul> 
  181.                     </dd>
  182.                 </dl>
  183.             </li>
  184.         </ul>
  185.         <div class="ec-off1Grid">
  186.             <div class="ec-off1Grid__cell">
  187.                 <div class="cm_blog_main_image">
  188.                 
  189.                     <figure class="figure__main_image"> 
  190.                         {% if blog.getMainListImage %}
  191.                         <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class="main_image_blog"></img>
  192.                         {% else %}
  193.                         <img class='item_blog_image'></img>
  194.                         {% endif %}
  195.                         {% if blog.getFigCaption %}
  196.                         <figcaption>{{ blog.getFigCaption }}</figcaption>
  197.                         {% endif %}
  198.                     </figure>
  199.                 </div>
  200.                     <div class="ec-grid2__cell">
  201.                     <div class="ec-productRole__profile">
  202.                         <div class="ec-productRole__description">{{ blog.body|raw }}
  203.                         </div>
  204.                     </div>
  205.                 </div>
  206.             </div>
  207.         </div>
  208.         {% if tags|length > 0 %}
  209.             <h3 class="tag-header">{{ 'plg.CMBlogPro.blog.tag'|trans }}</h3>
  210.             <ul class="tag-ul">
  211.                 {% for tag in tags %}
  212.                     <li>
  213.                         <a href="{{ url('cm_blog_pro_page_list', {tag: tag|trim }) }}">{{ tag |trim }}</a>
  214.                     </li>
  215.                 {% endfor %}
  216.             </ul>
  217.         {% endif %}
  218.         <h3 class="tag-header">{{ 'plg.CMBlogPro.blog.related_product'|trans }}</h3>
  219.         <div class="ec-shelfRole">
  220.             <ul class="ec-shelfGrid">
  221.                 {% for product in blog.getBlogProduct %}
  222.                     <li class="ec-shelfGrid__item">
  223.                         <a href="{{ url('product_detail', {'id': product.getProduct.id}) }}">
  224.                             <p class="ec-shelfGrid__item-image">
  225.                                 <img src="{{ asset(product.getProduct.main_list_image|no_image_product, 'save_image') }}">
  226.                             </p>
  227.                             <p>{{ product.getProduct.name }}</p>
  228.                             <p class="price02-default">
  229.                                 {% if product.getProduct.hasProductClass %}
  230.                                     {% if product.getProduct.getPrice02Min == product.getProduct.getPrice02Max %}
  231.                                         {{ product.getProduct.getPrice02IncTaxMin|price }}
  232.                                     {% else %}
  233.                                         {{ product.getProduct.getPrice02IncTaxMin|price }} ～ {{ product.getProduct.getPrice02IncTaxMax|price }}
  234.                                     {% endif %}
  235.                                 {% else %}
  236.                                     {{ product.getProduct.getPrice02IncTaxMin|price }}
  237.                                 {% endif %}
  238.                             </p>
  239.                         </a>
  240.                     </li>
  241.                 {% endfor %}
  242.             </ul>
  243.         </div>
  244.     </div>
  245.     <div class="side-bar">
  246.         <div class="mt-65 month-archive">
  247.             <h5 class="tag-header">{{ 'plg.CMBlogPro.blog.month_archive'|trans }}</h5>
  248.             <div class="archive-link-div">
  249.                 {% for key, month in monthArr %}
  250.                     <a href="{{ url('cm_blog_pro_page_list', {date: key}) }}">{{ month }}</a>
  251.                 {% endfor %}
  252.             </div>
  253.         </div>
  254.     </div>
  255. </div>
  256. {% endblock %}