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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}{% endblock %}
  5. {% block stylesheet %}
  6. <style>
  7. /*
  8. .pluginCMBblog .item_blog_image {
  9.     width: 100%;
  10.     height: 248px;
  11.     object-fit: cover;
  12. }
  13. */
  14. .pluginCMBblog .item_blog_image {
  15.     width: 100%;
  16.     height: 190px;
  17.     object-fit: cover;
  18. }
  19. .pluginCMBblog .figure__main_image {
  20.     margin: 0;
  21.     padding: 0;
  22.     display: grid;
  23.     justify-content: stretch;
  24.     align-items: flex-end;
  25. }
  27. .pluginCMBblog .item_blog_image,
  28. .pluginCMBblog figcaption {
  29.     padding: 0;
  30.     grid-column: 1/2;
  31.     grid-row: 1/2;
  32. }
  33. .pluginCMBblog figcaption {
  34.     text-align: center;
  35.     padding: 0.4rem 2rem;
  36.     font-size: 1rem;
  37.     background-color: rgba(0,0,0,.7);
  38.     color: #fff;
  39.     overflow: hidden;
  40.     white-space: normal;
  41.     word-wrap: break-word;
  42. }
  43. .pluginCMBblog .ec-topicpath .ec-topicpath__item {
  44.     display: initial;
  45. }
  46. .pluginCMBblog .list_blog_cat li {
  47.     display: initial;
  48.     letter-spacing: 0.2rem;
  49.     font-size: 16px;
  50.     padding: 0 15px;
  51. }
  52. .pluginCMBblog .list_blog_cat li:nth-child(n+2) {
  53.     border-left: 2px solid #ccc;
  54. }
  55. .pluginCMBblog .list_blog .list_category_link {
  56.     color: #337ab7;
  57.     padding: .2rem 0.5rem;
  58.     font-size: 80%;
  59.     border-right: 1px solid #ddd;
  60. }
  61. .pluginCMBblog .blog_category {
  62.     margin: 0;
  63.     padding: 0;
  64.     display: flex;
  65.     flex-wrap: wrap;
  66. }
  67. .pluginCMBblog .blog_category li {
  68.     display: initial;
  69. }
  70. .pluginCMBblog .blog_category li:last-child .list_category_link {
  71.     border: none;
  72. }
  73. .pluginCMBblog .blog_title_h3 {
  74.     font-size: 16px;
  75.     line-height: 1.4;  
  76.     margin-top: 10px;
  77.     margin-bottom: 1px;
  78.     word-break: break-word;
  79. }
  80. .pluginCMBblog .blog_release_date {
  81.     font-size: 1rem;
  82.     margin-bottom: 1rem;
  83. }
  84. .w-100 {
  85.     width: 100%
  86. }
  87. .side-bar > div {
  88.     width: 90%;
  89.     margin: 40px auto;
  90. }
  91. h5.tag-header {
  92.   padding: 1rem 2rem;
  93.   border-left: 4px solid #000;
  94. }
  95. .month-archive a {
  96.     text-decoration: underline;
  97.     display: block;
  98.     padding: 3px 27px;
  99. }
  100. .archive-link-div {
  101.     max-height: 600px;
  102.     overflow-y: scroll;
  103. }
  104. .archive-link-div::-webkit-scrollbar {
  105.     display: none;
  106. }
  107. @media screen and (max-width: 768px){
  108.     .pluginCMBblog .item_blog_image {
  109.         width: 100%;
  110.         height: 40vw;
  111.         object-fit: cover;
  112.     }
  113.     .side-bar > div {
  114.         width: 100%
  115.     }
  116. }
  117. @media only screen and (min-width: 768px) {
  119.     .side-bar {
  120.         width: 280px;
  121.         background-color: #f6f6f6;
  122.     }
  123. /*▼RZ 2023.09.11 EDIT ec-roleのスタイルをこのページに限定 ▼*/
  124. /*
  125.     .ec-role {
  126.         display: flex;
  127.         justify-content: flex-start
  128.     }
  129. */
  130.     .blog_box {
  131.         display: flex;
  132.         justify-content: flex-start
  133.     }
  134. /*▲RZ 2023.09.11 EDIT ec-roleのスタイルをこのページに限定 ▲*/
  135.     .mt-65 {
  136.         margin-top: 65px;
  137.     }
  138. }
  139. </style>
  140. {% endblock %}
  142. {% block main %}
  143.     <div class="ec-role pluginCMBblog">
  144.         <div class="blog_box">
  145.             <div class="w-100">
  146.                 <div class="ec-searchnavRole__topicpath">
  147.                     <ol class="ec-topicpath list_blog_cat">
  148.                         <li class="ec-topicpath__item">
  149.                             <a href="{{ url('cm_blog_pro_page_list') }}">{{ '全て'|trans }}</a>
  150.                         </li>
  151.                         {% for category in categories %}
  152.                     
  153.                         <li class="{{category.class}}">
  154.                             <a href="{{ url('cm_blog_pro_page_list', {categories: [category.getId()]}) }}" class="list_category_link">
  155.                                 {{ category.getName|raw }}
  156.                             </a>
  157.                         </li>
  158.                         {% endfor %}
  159.                     </ol>
  160.                 </div>
  161.         
  162.                 {% if pagination.totalItemCount > 0 %}
  163.                     <div class="ec-shelfRole" style="padding-top: 20px">
  164.                         <ul class="ec-shelfGrid list_blog">
  165.                             {% for blog in pagination %}
  166.                             <li class="ec-shelfGrid__item">
  167.                                 <a href="{{ url('cm_blog_pro_page_detail', {'id': blog.slug ? blog.slug : blog.id}) }}">
  168.                                     <figure class="figure__main_image">
  169.                                         {% if blog.getMainListImage %}
  170.                                             <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class='item_blog_image' />
  171.                                         {% else %}
  172.                                             <img src="{{ asset(''|no_image_product, 'save_image') }}" class='item_blog_image' />
  173.                                         {% endif %}
  174.                                         {% if blog.getFigCaption %}
  175.                                             <figcaption>{{ blog.getFigCaption }}</figcaption>
  176.                                         {% endif %}
  177.                                     </figure>
  178.                                 </a>
  179.                                 <h3 class="blog_title_h3">{{ blog.getTitle|length > 45 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.getTitle|raw }}</h3>  
  180.                                 <div class="blog_release_date">公開日：{{ blog.release_date|date('Y年m月d日')}}</div>
  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|length > 15 ? category.getCategory.getName|striptags|replace({('&nbsp;'):' '})|slice(0, 15)|raw ~ '...' : category.getCategory.getName|raw }}
  186.                                                 </a>
  187.                                             </li>
  188.                                         {% endfor %}        
  189.                                 </ul>
  190.                             </li>
  191.                             {% endfor %}
  192.                         </ul>
  193.                     </div>
  194.                     <div class="ec-pagerRole">
  195.                         {% include "pager.twig" with {'pages': pagination.paginationData, 'routes' : 'cm_blog_pro_page_list'} %}
  196.                     </div>
  197.                 {% endif %}
  198.             </div>
  199.             <div class="side-bar">
  200.                 <div class="mt-65 month-archive">
  201.                     <h5 class="tag-header">{{ 'plg.CMBlogPro.blog.month_archive'|trans }}</h5>
  202.                     <div class="archive-link-div">
  203.                         {% for key, month in monthArr %}
  204.                             <a href="{{ url('cm_blog_pro_page_list', {date: key}) }}">{{ month }}</a>
  205.                         {% endfor %}
  206.                     </div>
  207.                 </div>
  208.             </div>
  209.         </div>
  210.     </div>
  211. {% endblock %}