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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}
  4.     <script type="text/javascript">
  5.         $(function() {
  6.             $('.archive-link-div__year__ttl').click(function(event) {
  7.                 $(this).closest('.archive-link-div__year').toggleClass('active');
  8.             });
  9.         });
  10.     </script>    
  11. {% endblock %}
  13. {% block stylesheet %}
  14.     <style>
  15.         .pluginCMBblog .item_blog_image {
  16.             width: 100% !important;
  17.             height: 248px;
  18.             object-fit: cover;
  19.         }
  20.         .pluginCMBblog .figure__main_image{
  21.             margin: 0;
  22.             padding: 0;
  23.             display: grid;
  24.             justify-content: stretch;
  25.             align-items: flex-end;
  26.         }
  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 !important;
  45.         }
  46.         .blog_release_dc{
  47.             display: flex;
  48.             align-items: center;
  49.             justify-content: flex-start;
  50.             font-size: 1.4rem;
  51.             margin-top: 1rem;
  52.         }
  53.         .pluginCMBblog .list_blog_cat li {
  54.             display: initial !important;
  55.             letter-spacing: 0.2rem;
  56.         }
  57.         .pluginCMBblog .list_blog .list_category_link{
  58.             color: inherit;
  59.             padding:  0 1rem 0 0;
  60.         }
  61.         .pluginCMBblog .blog_category li:last-child .list_category_link{
  62.             border: none;
  63.         }
  64.         .pluginCMBblog .blog_category{
  65.             margin: 0;
  66.             padding: 0;
  67.             display: flex;
  68.             flex-wrap: wrap;
  69.         }
  70.         .pluginCMBblog .blog_category li{
  71.             display: initial;
  72.         }
  73.         .pluginCMBblog .blog_title_h3{
  74.             font-size: 18px !important;
  75.             line-height: 1.4;
  76.             margin-top: 10px;
  77.             margin-bottom: 1px;
  78.             word-break: break-word;
  79.             color: #2881c3;
  80.         }
  81.         .pluginCMBblog .blog_release_date {
  82.             padding-right: 1rem;
  83.             margin-right: 1rem;
  84.             position: relative;
  85.         }
  86.         .pluginCMBblog .blog_release_date:after {
  87.             content: "";
  88.             position: absolute;
  89.             right: 0;
  90.             top: 50%;
  91.             transform: translateY(-50%);
  92.             width: 1px;
  93.             height: 1em;
  94.             background-color: #ddd;
  95.         }
  96.         .w-100 {
  97.             width: 100%
  98.         }
  99.         .side-bar > div {
  100.             width: 90%;
  101.             margin:40px auto;
  102.         }
  103.         h5.tag-header {
  104.           padding: 1rem 2rem;
  105.           border-left: 4px solid #000;
  106.         }
  107.         .month-archive a {
  108.             text-decoration: underline;
  109.             display: block;
  110.             padding: 3px 27px;
  111.         }
  112.         .archive-link-div {
  113.             max-height: 600px;
  114.             overflow-y: scroll;
  115.         }
  116.         .archive-link-div::-webkit-scrollbar {
  117.             display: none;
  118.         }
  119.         @media screen and (max-width: 768px){
  120.             .pluginCMBblog .item_blog_image {
  121.                 width: 100% !important;
  122.                 height: 40vw;
  123.                 object-fit: cover;
  124.             }
  125.             .side-bar > div {
  126.                 width: 100%
  127.             }
  128.         }
  129.         @media only screen and (min-width: 768px) {
  130.             .side-bar {
  131.                 width: 280px;
  132.                 background-color: #f6f6f6;
  133.             }
  134.             .ec-role {
  135.                 display: flex;
  136.                 justify-content: flex-start
  137.             }
  138.             .mt-65 {
  139.                 margin-top: 65px!important;
  140.             }
  141.         }
  142.     </style>
  143. {% endblock %}
  145. {% block main %}
  146.     <div class="ec-banner">
  147.         <div class="ec-banner__inner">
  148.             <div class="inner">
  149.                 <h2>
  150.                     {% if page_title ?? false %}
  151.                         {{ page_title }}
  152.                     {% else %}
  153.                         コラム    
  154.                     {% endif %}
  155.                 </h2>
  156.             </div>
  157.         </div>
  158.         <div class="ec-breadcrumb">
  159.             <ul class="ec-breadcrumb__menu">
  160.                 <li class="ec-breadcrumb__item"><a href="{{ url('homepage') }}">TOP</a></li>
  161.                 <li class="ec-breadcrumb__item"><span>＞</span></li>
  162.                 <li class="ec-breadcrumb__item"><p>コラム</p></li>
  163.             </ul>
  164.         </div>
  165.     </div>
  167.     <div class="ec-role pluginCMBblog">
  168.         <div class="w-100">
  169.             <div class="ec-searchnavRole__topicpath">
  170.                 <ol class="ec-topicpath list_blog_cat">
  171.                     <li class="ec-topicpath__item">
  172.                         <a href="{{ url('cm_blog_pro_page_list') }}">{{ '全て'|trans }}</a>
  173.                     </li>
  174.                     {% for category in categories %}
  175.                 
  176.                     <li class="{{category.class}}">
  177.                         <a href="{{ url('cm_blog_pro_page_list', {categories: [category.getId()]}) }}" class="list_category_link">
  178.                             {{ category.getName|raw }}
  179.                         </a>
  180.                     </li>
  181.                     {% endfor %}
  182.                 </ol>
  183.             </div>
  184.     
  185.             {% if pagination.totalItemCount > 0 %}
  186.                 <div class="ec-shelfRole" style="padding-top: 20px">
  187.                     <ul class="ec-shelfGrid list_blog">
  188.                         {% for blog in pagination %}
  189.                         <li class="ec-shelfGrid__item">
  190.                             <a href="{{ url('cm_blog_pro_page_detail', {'id': blog.slug ? blog.slug : blog.id}) }}">
  191.                                 <figure class="figure__main_image">
  192.                                     {% if blog.getMainListImage %}
  193.                                         <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  194.                                     {% else %}
  195.                                         <img src="{{ asset(''|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  196.                                     {% endif %}
  197.                                     {% if blog.getFigCaption %}
  198.                                         <figcaption>{{ blog.getFigCaption }}</figcaption>
  199.                                     {% endif %}
  200.                                 </figure>
  201.                             </a>
  202.                             <h3 class="blog_title_h3">{{ blog.getTitle|length > 25 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 25)|raw ~ '...' : blog.getTitle|raw }}</h3> 
  203.                             <div class="blog_release_dc">
  204.                                 <div class="blog_release_date">{{ blog.release_date|date('Y.m.d')}}</div>
  205.                                 <ul class="blog_category">
  206.                                     {% for category in blog.getBlogCategories %}
  207.                                         <li class="{{category.getCategory.class}}">
  208.                                             <a href="{{ url('cm_blog_pro_page_list', {categories: [category.getCategory().getId()]}) }}" class="list_category_link">
  209.                                             {{ category.getCategory.getName|length > 15 ? category.getCategory.getName|striptags|replace({('&nbsp;'):' '})|slice(0, 15)|raw ~ '...' : category.getCategory.getName|raw }}
  210.                                             </a>
  211.                                         </li>
  212.                                     {% endfor %}        
  213.                                 </ul>
  214.                             </div> 
  215.                         </li>
  216.                         {% endfor %}
  217.                     </ul>
  218.                 </div>
  219.                 <div class="ec-pagerRole ec-product__group">
  220.                     <div class="pagenation">
  221.                         {% include "pager.twig" with {'pages': pagination.paginationData, 'routes' : 'cm_blog_pro_page_list'} %}                             
  222.                     </div>
  223.                 </div>
  224.             {% endif %}
  225.         </div>
  226.         <div class="side-bar">
  227.             <div class="mt-65 month-archive">
  228.                 <h5 class="tag-header">{{ 'plg.CMBlogPro.blog.month_archive'|trans }}</h5>
  229.                 <div class="archive-link-div">
  230.                     {% for key_y, val_y in monthArr %}
  231.                         <div class="archive-link-div__year {% if search_year == key_y %} active {% endif %}">
  232.                             <div class="archive-link-div__year__ttl">{{ key_y }}年</div>
  233.                             <div class="archive-link-div__year__ctt month-archive">
  234.                                 {% for key_m, val_m in val_y %}
  235.                                     <a href="{{ url('cm_blog_pro_page_list', {date: key_m}) }}">
  236.                                         <span>▶</span>
  237.                                         {{ val_m.ym }}（{{ val_m.count }}）
  238.                                     </a>
  239.                                 {% endfor %}
  240.                             </div>
  241.                         </div>
  242.                     {% endfor %}
  243.                 </div>
  244.             </div>
  245.         </div>
  246.     </div> 
  247. {% endblock %}