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. /*▼RZ 2023.09.11 EDIT ec-roleのスタイルをこのページに限定 ▼*/
  149. /*
  150.     .ec-role {
  151.         display: flex;
  152.         justify-content: flex-start
  153.     }
  154. */
  155.     .blog_box {
  156.         display: flex;
  157.         justify-content: flex-start
  158.     }
  159. /*▲RZ 2023.09.11 EDIT ec-roleのスタイルをこのページに限定 ▲*/
  160.     .mt-65 {
  161.         margin-top: 65px!important;
  162.     }
  163. }
  164. </style>
  165. {% endblock %}
  167. {% block main %}
  169. <div class="ec-role blog_detail pluginCMBblog">
  170.     <div class="blog_box">
  171.         <div class="w-100">
  172.             <div class="ec-pageHeader">
  173.                 <h1 class="blog_Title">{{ blog.title }}</h1>
  174.             </div>
  175.             <ul class="post_meta ">
  176.                 <li class="post_meta_list time"><i class="fas fa-calendar-alt"></i>&nbsp;{{blog.release_date|date('Y-m-d')}}</li>
  177.                 <li class="post_meta_list">
  178.                     <dl class="tag_dl">
  179.                         <dt><i class="fas fa-tags"></i></dt>
  180.                         <dd>
  181.                             <ul class="blog_category">
  182.                                 {% for category in blog.getBlogCategories %}
  183.                                 <li class="{{category.getCategory.class}}">
  184.                                     <a href="{{ url('cm_blog_pro_page_list', {categories: [category.getCategory().getId()]}) }}" class="list_category_link">
  185.                                     {{ category.getCategory.getName|raw }}
  186.                                     </a>
  187.                                 </li>
  188.                                 {% endfor %}        
  189.                             </ul> 
  190.                         </dd>
  191.                     </dl>
  192.                 </li>
  193.             </ul>
  194.             <div class="ec-off1Grid">
  195.                 <div class="ec-off1Grid__cell">
  196.                     <div class="cm_blog_main_image">
  197.                     
  198.                         <figure class="figure__main_image"> 
  199.                             {% if blog.getMainListImage %}
  200.                             <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class="main_image_blog"></img>
  201.                             {% else %}
  202.                             <img class='item_blog_image'></img>
  203.                             {% endif %}
  204.                             {% if blog.getFigCaption %}
  205.                             <figcaption>{{ blog.getFigCaption }}</figcaption>
  206.                             {% endif %}
  207.                         </figure>
  208.                     </div>
  209.                         <div class="ec-grid2__cell">
  210.                         <div class="ec-productRole__profile">
  211.                             <div class="ec-productRole__description">{{ blog.body|raw }}
  212.                             </div>
  213.                         </div>
  214.                     </div>
  215.                 </div>
  216.             </div>
  217.             {% if tags|length > 0 %}
  218.                 <h3 class="tag-header">{{ 'plg.CMBlogPro.blog.tag'|trans }}</h3>
  219.                 <ul class="tag-ul">
  220.                     {% for tag in tags %}
  221.                         <li>
  222.                             <a href="{{ url('cm_blog_pro_page_list', {tag: tag|trim }) }}">{{ tag |trim }}</a>
  223.                         </li>
  224.                     {% endfor %}
  225.                 </ul>
  226.             {% endif %}
  227.             <h3 class="tag-header">{{ 'plg.CMBlogPro.blog.related_product'|trans }}</h3>
  228.             <div class="ec-shelfRole">
  229.                 <ul class="ec-shelfGrid">
  230.                     {% for product in blog.getBlogProduct %}
  231.                         <li class="ec-shelfGrid__item">
  232.                             <a href="{{ url('product_detail', {'id': product.getProduct.id}) }}">
  233.                                 <p class="ec-shelfGrid__item-image">
  234.                                     <img src="{{ asset(product.getProduct.main_list_image|no_image_product, 'save_image') }}">
  235.                                 </p>
  236.                                 <p>{{ product.getProduct.name }}</p>
  237.                                 <p class="price02-default">
  238.                                     {% if product.getProduct.hasProductClass %}
  239.                                         {% if product.getProduct.getPrice02Min == product.getProduct.getPrice02Max %}
  240.                                             {{ product.getProduct.getPrice02IncTaxMin|price }}
  241.                                         {% else %}
  242.                                             {{ product.getProduct.getPrice02IncTaxMin|price }} ～ {{ product.getProduct.getPrice02IncTaxMax|price }}
  243.                                         {% endif %}
  244.                                     {% else %}
  245.                                         {{ product.getProduct.getPrice02IncTaxMin|price }}
  246.                                     {% endif %}
  247.                                 </p>
  248.                             </a>
  249.                         </li>
  250.                     {% endfor %}
  251.                 </ul>
  252.             </div>
  253.         </div>
  254.         <div class="side-bar">
  255.             <div class="mt-65 month-archive">
  256.                 <h5 class="tag-header">{{ 'plg.CMBlogPro.blog.month_archive'|trans }}</h5>
  257.                 <div class="archive-link-div">
  258.                     {% for key, month in monthArr %}
  259.                         <a href="{{ url('cm_blog_pro_page_list', {date: key}) }}">{{ month }}</a>
  260.                     {% endfor %}
  261.                 </div>
  262.             </div>
  263.         </div>
  264.     </div>
  265. </div>
  266. {% endblock %}