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