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