app/template/default/blog/news_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. }
  15. .pluginCMBblog .ec-topicpath .ec-topicpath__item{
  16.     display: initial !important;
  17. }
  19. .pluginCMBblog .list_blog_cat li {
  20.     display: initial !important;
  21.     letter-spacing: 0.2rem;
  22.     border-right: 1px solid #ddd;
  23.     font-size: 16px;
  24. }
  25. .pluginCMBblog .list_category_link{
  26.     padding: 0 0.5rem;
  27. }
  29. .pluginCMBblog .list_blog .list_category_link{
  30.     color: #337ab7;
  31.     padding: 0 0.5rem;
  32. }
  34. .pluginCMBblog .blog_category li:last-child{
  35.     border: none;
  36. }
  38. .pluginCMBblog .blog_category{
  39.     margin: 0;
  40.     padding: 0;
  41. }
  42. .pluginCMBblog .blog_category li{
  43.     display: initial;
  44.     border-right: 1px solid #ddd;
  45. }
  47. .pluginCMBblog .list_blog_cat li:last-child {
  48.     border-right: none;
  49. }
  51. .pluginCMBblog .blog_title_h3{
  52.     font-size: 16px !important;
  53.     line-height: 1.4;
  54.     margin-top: 10px;
  55.     word-break: break-word;
  56. }
  57. .w-100 {
  58.     width: 100%
  59. }
  60. .side-bar > div {
  61.     width: 90%;
  62.     margin:40px auto;
  63. }
  64. h5.tag-header {
  65.   padding: 1rem 2rem;
  66.   border-left: 4px solid #000;
  67. }
  68. .month-archive a {
  69.     text-decoration: underline;
  70.     display: block;
  71.     padding: 3px 27px;
  72. }
  73. .archive-link-div {
  74.     max-height: 600px;
  75.     overflow-y: scroll;
  76. }
  77. .archive-link-div::-webkit-scrollbar {
  78.     display: none;
  79. }
  80. @media screen and (max-width: 768px){
  81. .pluginCMBblog .item_blog_image {
  82.     width: 100% !important;
  83.     height: 40vw;
  84.     object-fit: cover;
  85.     }
  86.     .side-bar > div {
  87.         width: 100%
  88.     }
  89. }
  90. @media only screen and (min-width: 768px) {
  92.     .side-bar {
  93.         width: 280px;
  94.         background-color: #f6f6f6;
  95.     }
  96.     .ec-role {
  97.         display: flex;
  98.         justify-content: flex-start
  99.     }
  100.     .mt-65 {
  101.         margin-top: 65px!important;
  102.     }
  103. }
  105. .blog-category-item {
  106.     color: #337ab7 !important;
  107. }
  108. .blog-category-item.is-selected {
  109.     color: rgb(82, 82, 99) !important;
  110. }
  111. .blog-category-item .list_category_link {
  112.     color: inherit;
  113. }
  115. </style>
  116. {% endblock %}
  118. {% block main %}
  119. {% set selectedCategoryIds = null %}
  120. {% if 'categories' in searchData|keys %}
  121.     {% set selectedCategoryIds = searchData.categories %}
  122. {% endif %}
  124.     <div class="ec-role pluginCMBblog content__inner">
  125.         <div class="w-100">
  126.             <div class="ec-searchnavRole__topicpath">
  127.                 <ol class="ec-topicpath list_blog_cat">
  128.                 {% if is_granted('ROLE_USER') is not empty %}
  129.                     {# 選択済みカテゴリを優先する #}
  130.                     {# {% if selectedCategoryIds is not null %}
  131.                         {% for category in categories %} #}
  132.                             {# 除外カテゴリに指定されている場合は表示しない #}
  133.                             {# {% if excludeCategoryIds is empty or category.getId() not in excludeCategoryIds %}
  134.                                 {% for selectedCategoryId in selectedCategoryIds %}
  135.                                     {% if selectedCategoryId == category.getId() %}
  136.                                     <li class="{{category.class}} blog-category-item is-selected">
  137.                                         <a href="{{ url('news_list', {categories: [category.getId()]}) }}" class="list_category_link">
  138.                                             {{ category.getName|raw }}
  139.                                         </a>
  140.                                     </li>
  141.                                     {% endif %}
  142.                                 {% endfor %}
  143.                             {% endif %}
  144.                         {% endfor %}
  145.                     {% endif %} #}
  147.                     <li class="blog-category-item {{ selectedCategoryIds is not null ? ' ec-topicpath__item' : ' is-selected' }}">
  148.                         <a href="{{ url('news_list') }}" class="list_category_link">{{ '全て'|trans }}</a>
  149.                     </li>
  150.                     {% for category in categories %}
  151.                         {# 除外カテゴリに指定されている場合は表示しない #}
  152.                         {% if excludeCategoryIds is empty or category.getId() not in excludeCategoryIds %}
  153.                           {# 会員用、お知らせカテゴリのみ表示 #}
  154.                           {% if category.getId() < 3 %}
  155.                             {# 検索条件のカテゴリにデザイン用のclassを付与 #}
  156.                             {% if selectedCategoryIds is not null %}
  157.                                 {% for selectedCategoryId in selectedCategoryIds %}
  158.                                     {% if selectedCategoryId != category.getId() %}
  159.                                       <li class="{{category.class}} blog-category-item">
  160.                                           <a href="{{ url('news_list', {categories: [category.getId()]}) }}" class="list_category_link">
  161.                                               {{ category.getName|raw }}
  162.                                           </a>
  163.                                       </li>
  164.                                     {% else %}
  165.                                       <li class="{{category.class}} blog-category-item is-selected">
  166.                                           <a href="{{ url('news_list', {categories: [category.getId()]}) }}" class="list_category_link">
  167.                                               {{ category.getName|raw }}
  168.                                           </a>
  169.                                       </li>
  170.                                     {% endif %}
  171.                                 {% endfor %}
  172.                             {% else %}
  174.                             <li class="{{category.class}} blog-category-item">
  175.                                 <a href="{{ url('news_list', {categories: [category.getId()]}) }}" class="list_category_link">
  176.                                     {{ category.getName|raw }}
  177.                                 </a>
  178.                             </li>
  179.                             {% endif %}
  180.                           {% endif %}
  181.                         {% endif %}
  182.                     {% endfor %}
  183.                   {% endif %}
  184.                 </ol>
  185.             </div>
  187.             {% if pagination.totalItemCount > 0 %}
  188.                 <div class="ec-shelfRole" style="padding-top: 20px">
  189.                     <ul class="ec-shelfGrid list_blog">
  190.                         {% for blog in pagination %}
  191.                         <li class="ec-shelfGrid__item">
  192.                             <a href="{{ url('news_detail/{id}', {'id': blog.slug ? blog.slug : blog.id}) }}">
  193.                                 <figure class="figure__main_image">
  194.                                 {% if blog.getMainListImage %}
  195.                                     <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  196.                                     {% else %}
  197.                                     <img src="{{ asset(''|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  198.                                 {% endif %}
  199.                                 </figure>
  200.                             </a>
  201.                             <a href="{{ url('blog_detail/{id}', {'id': blog.slug ? blog.slug : blog.id}) }}">
  202.                               <h3 class="blog_title_h3">{{ blog.getTitle|length > 45 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.getTitle|raw }}</h3>
  203.                             </a>
  204.                             <p class="blog_day">{{blog.release_date|date('Y年m月d日')}}</p>
  205.                             <ul class="blog_category">
  206.                                     {% for category in blog.getBlogCategories %}
  207.                                         <li class="{{category.getCategory.class}}">
  208.                                             <a href="{{ url('news_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.                         </li>
  215.                         {% endfor %}
  216.                     </ul>
  217.                 </div>
  218.                 <div class="ec-pagerRole">
  219.                     {% include "pager.twig" with {'pages': pagination.paginationData, 'routes' : 'news_list'} %}
  220.                 </div>
  221.             {% endif %}
  223.             <div class="page__inner mt-50">
  224.               <h2 class="mod_movie-h2">
  225.                 お知らせ一覧
  226.               </h2>
  227.               <div class="mod_movie-btn-more">
  228.                 <a href="{{ url('news_list') }}">お知らせ一覧に戻る</a>
  229.               </div>
  230.             </div>
  231.         </div>
  232.         {#<div class="side-bar">#}
  233.         {#    <div class="mt-65 month-archive">#}
  234.         {#        <h5 class="tag-header">{{ 'plg.CMBlogPro.blog.month_archive'|trans }}</h5>#}
  235.         {#        <div class="archive-link-div">#}
  236.         {#            {% for key, month in monthArr %}#}
  237.         {#                <a href="{{ url('cm_blog_pro_page_list', {date: key}) }}">{{ month }}</a>#}
  238.         {#            {% endfor %}#}
  239.         {#        </div>#}
  240.         {#    </div>#}
  241.         {#</div>#}
  242.     </div>
  243. {% endblock %}