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. }
  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.                     {# 選択済みカテゴリを優先する #}
  129.                     {# {% if selectedCategoryIds is not null %}
  130.                         {% for category in categories %} #}
  131.                             {# 除外カテゴリに指定されている場合は表示しない #}
  132.                             {# {% if excludeCategoryIds is empty or category.getId() not in excludeCategoryIds %}
  133.                                 {% for selectedCategoryId in selectedCategoryIds %}
  134.                                     {% if selectedCategoryId == category.getId() %}
  135.                                     <li class="{{category.class}} blog-category-item is-selected">
  136.                                         <a href="{{ url('blog_list', {categories: [category.getId()]}) }}" class="list_category_link">
  137.                                             {{ category.getName|raw }}
  138.                                         </a>
  139.                                     </li>
  140.                                     {% endif %}
  141.                                 {% endfor %}
  142.                             {% endif %}
  143.                         {% endfor %}
  144.                     {% endif %} #}
  146.                     <li class="blog-category-item {{ selectedCategoryIds is not null ? ' ec-topicpath__item' : ' is-selected' }}" >
  147.                         <a href="{{ url('blog_list') }}" class="list_category_link">{{ '全て'|trans }}</a>
  148.                     </li>
  149.                     {% for category in categories %}
  150.                         {# 除外カテゴリに指定されている場合は表示しない #}
  151.                         {% if excludeCategoryIds is empty or category.getId() not in excludeCategoryIds %}
  152.                             {# 検索条件のカテゴリにデザイン用のclassを付与 #}
  153.                             {% if selectedCategoryIds is not null %}
  154.                                 {% for selectedCategoryId in selectedCategoryIds %}
  155.                                     {% if selectedCategoryId != category.getId() %}
  156.                                         <li class="{{category.class}} blog-category-item">
  157.                                             <a href="{{ url('blog_list', {categories: [category.getId()]}) }}" class="list_category_link">
  158.                                                 {{ category.getName|raw }}
  159.                                             </a>
  160.                                         </li>
  161.                                     {% else %}
  162.                                       <li class="{{category.class}} blog-category-item is-selected">
  163.                                           <a href="{{ url('blog_list', {categories: [category.getId()]}) }}" class="list_category_link">
  164.                                               {{ category.getName|raw }}
  165.                                           </a>
  166.                                       </li>
  167.                                     {% endif %}
  168.                                 {% endfor %}
  169.                             {% else %}
  171.                             <li class="{{category.class}} blog-category-item">
  172.                                 <a href="{{ url('blog_list', {categories: [category.getId()]}) }}" class="list_category_link">
  173.                                     {{ category.getName|raw }}
  174.                                 </a>
  175.                             </li>
  176.                             {% endif %}
  177.                         {% endif %}
  178.                     {% endfor %}
  179.                 </ol>
  180.             </div>
  182.             {% if pagination.totalItemCount > 0 %}
  183.                 <div class="ec-shelfRole" style="padding-top: 20px">
  184.                     <ul class="ec-shelfGrid list_blog">
  185.                         {% for blog in pagination %}
  186.                         <li class="ec-shelfGrid__item">
  187.                             <a href="{{ url('blog_detail/{id}', {'id': blog.slug ? blog.slug : blog.id}) }}">
  188.                                 <figure class="figure__main_image">
  189.                                 {% if blog.getMainListImage %}
  190.                                     <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  191.                                     {% else %}
  192.                                     <img src="{{ asset(''|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  193.                                 {% endif %}
  194.                                 </figure>
  195.                             </a>
  196.                             <a href="{{ url('blog_detail/{id}', {'id': blog.slug ? blog.slug : blog.id}) }}">
  197.                               <h3 class="blog_title_h3">{{ blog.getTitle|length > 45 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.getTitle|raw }}</h3>
  198.                             </a>
  199.                             <p class="blog_day">{{blog.release_date|date('Y年m月d日')}}</p>
  200.                             <ul class="blog_category">
  201.                                     {% for category in blog.getBlogCategories %}
  202.                                         <li class="{{category.getCategory.class}}">
  203.                                             <a href="{{ url('blog_list', {categories: [category.getCategory().getId()]}) }}" class="list_category_link">
  204.                                             {{ category.getCategory.getName|length > 15 ? category.getCategory.getName|striptags|replace({('&nbsp;'):' '})|slice(0, 15)|raw ~ '...' : category.getCategory.getName|raw }}
  205.                                             </a>
  206.                                         </li>
  207.                                     {% endfor %}
  208.                             </ul>
  209.                         </li>
  210.                         {% endfor %}
  211.                     </ul>
  212.                 </div>
  213.                 <div class="ec-pagerRole">
  214.                     {% include "pager.twig" with {'pages': pagination.paginationData, 'routes' : 'blog_list'} %}
  215.                 </div>
  216.             {% endif %}
  218.             <div class="page__inner mt-50">
  219.               <h2 class="mod_movie-h2">
  220.                 ブログ一覧
  221.               </h2>
  222.               <div class="mod_movie-btn-more">
  223.                 <a href="{{ url('blog_list') }}">ブログ一覧に戻る</a>
  224.               </div>
  225.             </div>
  226.         </div>
  228.         {#<div class="side-bar">#}
  229.         {#    <div class="mt-65 month-archive">#}
  230.         {#        <h5 class="tag-header">{{ 'plg.CMBlogPro.blog.month_archive'|trans }}</h5>#}
  231.         {#        <div class="archive-link-div">#}
  232.         {#            {% for key, month in monthArr %}#}
  233.         {#                <a href="{{ url('cm_blog_pro_page_list', {date: key}) }}">{{ month }}</a>#}
  234.         {#            {% endfor %}#}
  235.         {#        </div>#}
  236.         {#    </div>#}
  237.         {#</div>#}
  238.     </div>
  239. {% endblock %}